• 2

[求助]HTML5 & javascript問題!!!!!!

學長的程式碼 看不懂

有人可以解答嗎?!

類似推格子的遊戲

加註解
感激(詳細一點 初學網路程式設計)
<!DOCTYPE html>

<html>
<head>
<meta charset = "uf-8">

<title>HW-09</title>

<style>
body{
font-size: 75px;
font-weight: bold;
font-family: Sans-Serif;
color: blue;
}

table{
width: 400px;
border-collapse: collapse;
}

td{
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
border:4px gray solid;
}
</style>

var Tile = new Array(16);
var i, j, temp;
function start(){
createTiles();
for (i = 0; i < 16; i++){<br>Tile[i] = document.getElementById(i);
if (i!=0)
Tile[i][removed]=i;
//window.alert(i);
}
for(i = 0; i < 16; i++){<br>j = parseInt(Math.random()*16);
temp = Tile[i][removed];
Tile[i][removed] = Tile[j][removed];
Tile[j][removed] = temp;
//window.alert(j);
}
}

function createTiles(){
var tbody = document.getElementById("tablebody");
for (var i = 0; i < 16 ; ){<br>var row = document.createElement("tr");
for (var j = 0; j < 4; j++,i++ ){<br>var cell = document.createElement("td");
cell.setAttribute("id", i);
cell.setAttribute("onclick", "Swap("+i+")");
row.appendChild( cell );
}
tbody.appendChild( row );
}
}

function Swap(e){
j = -1;
i = e;
if(i <= 14 && Tile[i+1][removed] == 0) j = i+1;
if(i >= 1 && Tile[i-1][removed] == 0) j = i-1;
if(i <= 11 && Tile[i+4][removed] == 0) j = i+4;
if(i >= 4 && Tile[i-4][removed] == 0) j = i-4;
//window.alert("j = "+j+"i = "+i);
if(j != -1){
temp = Tile[i][removed];
Tile[i][removed] = Tile[j][removed];
Tile[j][removed] = temp;
gameCheck();
}

}

function gameCheck(){
for(i = 0; i < 15; i++)<br>if(Tile[i][removed] != i+1) break;
if(i == 15)
[removed]("YOU ARE WIN!!");
//window.alert("i = "+i);
}

addEventListener("load", start , false);
//var tbody = document.getElementById("tablebody");
//window.addEventListener("onclick", window.alert(), false);

</head>
<body>





</body>
</html>

[求助]HTML5 & javascript問題!!!!!!
2013-01-03 21:03 發佈
消失的931 wrote:
學長的程式碼 看不懂...(恕刪)



看不懂+1

雞排奶茶來兩份 ~
消失的931 wrote:
程式碼 看不懂...(恕刪)
先說想花多少錢買答案
這代碼蠻有趣的,你學長也蠻厲害
明天要上班,簡單說一下
layout到頁面上是這樣

< table id="tablebody">
 < tr>
   < td id="0" onclick="Swap(0)">1</ td>
   < td id="1" onclick="Swap(1)">2</ td>
   < td id="2" onclick="Swap(2)">14</ td>
   < td id="3" onclick="Swap(3)">8</ td>
  </ tr>
  < tr>
   < td id="4" onclick="Swap(4)">3</ td>
   < td id="5" onclick="Swap(5)">11</ td>
   < td id="6" onclick="Swap(6)">10</ td>
   < td id="7" onclick="Swap(7)">6</ td>
  </ tr>
  < tr>
   < td id="8" onclick="Swap(8)">9</ td>
   < td id="9" onclick="Swap(9)">12</ td>
   < td id="10" onclick="Swap(10)">5</ td>
   < td id="11" onclick="Swap(11)">15</ td>
  </ tr>
  < tr>
   < td id="12" onclick="Swap(12)">4</ td>
   < td id="13" onclick="Swap(13)">13</ td>
   < td id="14" onclick="Swap(14)">7</ td>
   < td id="15" onclick="Swap(15)"></ td>
  </ tr>
</ table>

start(): 程式進入點,隨機塞16數字到表格,Tile[i][removed]是方格裡的數字

createTiles() : 產生表格,一開始只有< table id="tablebody"></ table>,透過此function塞入tr與td

swap() : 方格點擊事件,旁邊方格為空白則兩格互換

gameCheck(): 判斷順序,最後(i == 15)代表從1排到15,則遊戲完成

其實都用到javascript基礎函式,上網查一下即可了解
body裡要加一個id叫tablebody的table
程式才會跑吧

冷先生 wrote:
body裡要加一個i...(恕刪)


同意+1

這裡面哪裡用到HTML5了...
而且這程式一點都不難阿..還是自己花點時間慢慢看吧..
樓主,你買本HTML5 & javascript字典,看不懂的語法查一下,就明白了喔。
消失的931 wrote
...(恕刪)


css 是style裡面包的可以先略過
Js部份可以先從function先著手了解
不知道在幹嘛的參數可以做顯示在頁面
會有助你理解
自己跟程式走一邊比較實際
題外話:charset 裡面應該是utf-8,不是uf-8

首先,body裡少了一個叫作tablebody的table


預設就要有,因為在最一開始的createTiles()裡就要用到它
var tbody = document.getElementById("tablebody");


前面var應該甭多說了,接著這程式的起點就是start(),因為最後面的
addEventListener("load", start , false);

其中start()裡做的第一件事就是呼叫createTiles()
這個function內是一個雙層的for迴圈,
特別的是外層的for沒有第三個值,i++這東西寫在內層的for裡了,和j一起++
(看到這裡我覺得挺酷的

i的用途是編號,每個td都被給了一個id,從0~15,也就是i
cell.setAttribute("id", i);
下一行就是加入一個事件偵聽器
cell.setAttribute("onclick", "Swap("+i+")");
每個td被click的時候執行Swap(),並把自己的id作為參數

而內層用j的那個for就是每列造四個td
四個都好了之後appendChild()進一開始造的tr裡

createTiles()跑完了,回到start()
接著又是一個for,這個for跑完的時候格子會照順序填入1234....15
第一格是空著的:
if (i!=0)
Tile[i][removed]=i;
為何不在for的時候直接從1開始就好了呢?
因為這個迴圈另一個目的是把元素丟進Tile這個陣列裡
Tile[i] = document.getElementById(i);
所以從0~15都要run過一遍

再來還是一個for,這個for就是一直在交換內容,用來打亂格子內的數字。
用隨機產生0~15的亂數j→Tile[j]
來和照順序跑的i做交換→Tile[i]


初始化的工作都完成了,
再來就是當使用者click td的時候會執行的Swap()
這裡算是這支程式的重點所在
傳進來的參數e就是被點擊的td的id
一開始的j設成-1等等再說

這裡分成四個部分討論:
if(i <= 14 && Tile[i+1][removed] == 0) j = i+1;
if(i >= 1 && Tile[i-1][removed] == 0) j = i-1;
if(i <= 11 && Tile[i+4][removed] == 0) j = i+4;
if(i >= 4 && Tile[i-4][removed] == 0) j = i-4;
這裡的分個判斷又分成兩個部分
第一個是判斷i的值,是為了避免後面的Tile[]超出索引
像是叫到什麼Tile[16][removed]之類的,就會無法繼續跑下去,
後面的innerHTML==0就很怪了,這裡可以run的原因是因為只用了兩個等號,
因為對兩個等號來說:
0 == ''
猜猜結果是如何?是『true』阿
放三個等號下去這程式馬上死,應該寫成空字串''
這地方他整個的寫法的確是比較難看懂,我的直覺是:
if(Tile[i+1] && Tile[i+1][removed] === '') j = i + 1;
if(Tile[i-1] && Tile[i-1][removed] === '') j = i - 1;
if(Tile[i+4] && Tile[i+4][removed] === '') j = i + 4;
if(Tile[i-4] && Tile[i-4][removed] === '') j = i - 4;
往右推+1
往左推-1
往下推+4
往上推-4
好好想一下應該能通

接著的if(j != -1)就是判斷有沒有成功推到東西了!
剛才最上面一開始不是把j設成-1嗎?
如果中間所有的if都沒有執行到,那j仍然是-1,則Swap()到此結束;
假如有執行到任一個if,則在後面的j = i + 1也好- 4也好,
j指的就是本來空著的那格的id。

所以把Tile[i]和Tile[j]交換,就完成推過去的動作了。

最後…最後就是gameCheck()了
又是跑一個0~15的for
if(Tile[i][removed] != i+1) break;
如果遇到格子的id和i+1不同就直接跳出
為何是i+1?
因為第一格的id是0,但最後解答的時候第一格應該放1
所以格子的id就是答案的-1(這裡好難用文字表達

如果這個for迴圈順利跑完,就顯示YOU ARE WIN!!






結束,睡覺。
  • 2
內文搜尋
X
評分
評分
複製連結
Mobile01提醒您
您目前瀏覽的是行動版網頁
是否切換到電腦版網頁呢?