這幾天模仿學習了Ajax，一個數字小遊戲的例子，分享一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jiuge.js"></script>
<title>Game</title>
</head>
<body>
<br />
<br />
<br />
<br />
<div id="result" align="center">
<br/>
<br/>
<br/>
<br/>
<br/>
</div><br/>
<div id="puzzleGrid">
<table width="23%" border="1" align="center">
<tr>
<td id="cell11"><img src="img/1343357799813_08.png" alt="8" /></td>
<td id="cell12"><img src="img/1343357799927_03.png" alt="3" /></td>
<td id="cell13"><img src="img/1343357799922_11.png" alt="11"/></td>
<td id="cell14"><img src="img/1343357799936_13.png" alt="13" /></td>
</tr>
<tr>
<td id="cell21"><img src="img/1343357799959_06.png" alt="6" /></td>
<td id="cell22"><img src="img/1343357799982_10.png" alt="10" /></td>
<td id="cell23"><img src="img/1343357799945_empty.png" alt="empty" /></td>
<td id="cell24"><img src="img/1343357799954_09.png" alt="9" /></td>
</tr>
<tr>
<td id="cell31"><img src="img/1343357799976_12.png" alt="12" /></td>
<td id="cell32"><img src="img/1343357799931_05.png" alt="5" /></td>
<td id="cell33"><img src="img/1343357799979_07.png" alt="7" /></td>
<td id="cell34"><img src="img/1343357799968_14.png" alt="14" /></td>
</tr>
<tr>
<td id="cell41"><img src="img/1343357799950_04.png" alt="4" /></td>
<td id="cell42"><img src="img/1343357799941_02.png" alt="2" /></td>
<td id="cell43"><img src="img/1343357799964_15.png" alt="15" /></td>
<td id="cell44"><img src="img/1343357799973_01.png" alt="1" /></td>
</tr>
</table>
</div>
</body>
</html>
JS代碼：
// JavaScript Document
window.onload = iniPage;
function iniPage(){
result = document.getElementById("result");
count = 0;
var table = document.getElementById("puzzleGrid");
var cells = table.getElementsByTagName("td");
for(var i =0;i<cells.length;i++){
var cell = cells[i];
cell.onclick = titleClick;
}
}
function titleClick(){
if(cellEmpty(this)){
alert("please cleck on a NO. tie");
return;
}
//通過當前編號尋找交換位置並交換
change(this);
var selectImage = this.firstChild;
var DestionImage = Iniempty.firstChild;
}
//獲取空閒位置ID並實現交換
function change(currentID){
//獲取當前行列
currentRow = Number(currentID.id.charAt(4));
currentCol = Number(currentID.id.charAt(5));
//判斷是否上移
if(currentRow >1){
emptyRow = currentRow-1;
emptyCol = currentCol;
distionid = "cell"+emptyRow+emptyCol;
cell = document.getElementById(distionid);
if(cellEmpty(cell)){
swap(currentID,cell);
}
}
//判斷是否下移
if(currentRow<4){
emptyRow = currentRow+1;
emptyCol = currentCol;
distionid = "cell"+emptyRow+emptyCol;
cell = document.getElementById(distionid);
if(cellEmpty(cell)){
swap(currentID,cell);
}
}
//判斷是否左移
if(currentCol>1){
emptyRow= currentRow;
emptyCol = currentCol-1;
distionid = "cell"+emptyRow+emptyCol;
cell = document.getElementById(distionid);
if(cellEmpty(cell)){
swap(currentID,cell);
}
}
//判斷是否右移
if(currentCol<4){
emptyRow = currentRow;
emptyCol = currentCol+1;
distionid = "cell"+emptyRow+emptyCol;
cell = document.getElementById(distionid);
if(cellEmpty(cell)){
swap(currentID,cell);
}
}
}
//判斷點擊的是否是空區域
function cellEmpty(cell){
var image = cell.firstChild;
//while(iamge.nodeName=="#text"){
// image = image.nextSibling;
//}
if(image.alt=="empty"){
return true;
}
return false;
}
//實現交換函數
function swap(current,destion){
count++;
result.innerHTML = "統計點擊次數爲："+count+"<br/>點擊元素所在行："+currentRow+"<br/>點擊元素所在列："+currentCol+"<br/>移動格位所在行："
+destion.id.charAt(4)+"<br/>移動格位所在行："+destion.id.charAt(5);
selectedImage = current.firstChild;
destionImage = destion.firstChild;
current.appendChild(destionImage);
destion.appendChild(selectedImage);
result.innerHTML(success());
}
//編寫完成函數
function success(){
var tiles = document.getElementById("puzzleGrid").getElementsByTagName("img");
var order ="";
for(var i=0;i<tiles.length;i++){
var num = tiles.src.substr(-6,2);
if(num!="ty"){
order+=num;
}
}
if(order=="010203040506070809101112131415"){
return "恭喜你成功了！";
}
}圖片大家想想辦法吧
大家注意一下圖片的命名啊，這個會用到的