首頁 > 開發者 > JavaScript
程式設計步驟1、設計格子產生函數。這是一個通用的產生函數，可以自己輸入行，列，儲存格高度。每個儲存格是一個div。結合CSS代碼的調整可以產生各種大小和寬窄的地面。2、產生一條蛇。採用一個數組表示蛇，每個元素是一個div，可以通過id值擷取元素的行、列屬性。3、檢測方向按鍵4、設計判斷下一步位置的函數。在這個函數中，首先判斷有沒有撞，如果沒有撞則判斷下一步的位置並且改變蛇的形狀。這時候有兩種情況，第一種是沒有吃到食物，在蛇的數組前加入新元素，將蛇尾的元素刪除；另一種情況是吃到了食物，這時候只添加新元素，還要產生新的食物。5、通過setInterval調用上一步中的函數 程式碼[javascript] <!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=gb2312" /> <style type="text/css"> /*需要調整的內容有.inner的font-size,line-height*/ .inner {width:29px;height:29px; float:left;display:inline; font-size:20px;line-height:20px;text-align:center;font-weight:bold;color:#F00; border-top:1px solid black; border-left:1px solid black; } #outside{ padding:0; float:left; border-right:1px solid black; border-bottom:1px solid black; } .clearFix:after{ clear:both; display:block; visibility:hidden; height:0; content:""; } .clearFix{zoom:1;} </style> <script type="text/javascript"> var foodR = -1;//食物座標 var foodC = -1; var dir = 0; window.onload = function(){ var r = 15;//行數 var c = 20;//列數 var w = 18;//儲存格寬度 var cell = createCell(r,c,w);//建立格子，行，列，儲存格寬度。這個格子是一個二維數組 var snake = new Array();//建立蛇。這個蛇是一個一維數組 for(var i=0;i<3;i++)//初始化蛇 { snake[i] = cell[0][3-i]; snake[i].innerText="*"; } document.onkeydown = function()//檢測當前方向按鍵 { dir = changeDir(this); } generateFood(cell);//產生食物 setInterval(function(){checkDir(cell,snake);},200); //檢測當前前進方向並前進。在setInterval中不能直接傳入參數，需要採用function進行函數調用 } function generateFood(cell)//產生食物 { do{ foodR = Math.floor(Math.random()*cell.length);//根據格子的總數量產生 foodC = Math.floor(Math.random()*cell[0].length); }while(cell[foodR][foodC].innerText == "*")//食物不能和蛇重合 cell[foodR][foodC].innerText = "○";//畫出食物 } function changeDir(e)//檢測當前方向按鍵 { if(event.keyCode>=37&&event.keyCode<=40)//如何按鍵是方向鍵，返回按鍵碼 return event.keyCode; } function checkDir(cell,snake)//檢測當前前進方向並前進 { if(dir>=37&&dir<=40)//初始化的時候，按下任意方向鍵開始運行 { var nextNode = new Array(2);//下一步的座標 nextNode = getNext(dir,cell,snake);//擷取下一步座標 if(nextNode[0]!=-1&&nextNode[1]!=-1&&nextNode[0]!=cell.length&&nextNode[1]!=cell[0].length&&cell[nextNode[0]][nextNode[1]].innerText!="*") //如果沒有撞到邊上，也沒有撞到自己，繼續前進.cell.length行數，cell[0].length列數 { snake.unshift(cell[nextNode[0]][nextNode[1]]);//在最前面添加一截 snake[0].innerText="*"; if(nextNode[0]==foodR&&nextNode[1]==foodC)//如果吃到食物，產生新的食物 { generateFood(cell);} else { snake.pop().innerText="";}//如果沒吃到食物，將最後一截去掉 for(var i = 0;i<snake.length;i++)//設定顏色 { switch(i) { case 0: snake[i].style.color="#F00"; break; case 1: snake[i].style.color="#F11"; break; case 2: snake[i].style.color="#F22"; break; case 3: snake[i].style.color="#F33"; break; case 4: snake[i].style.color="#F44"; break; default: snake[i].style.color="#F55"; break; } } } else //如果撞了，重新整理頁面 { alert("撞了"); window.location.reload(); } } } function getNext(dir,cell,snake)//擷取下一步座標 { var nextNode = new Array(2); nextNode[0] = getRow(snake[0]);//擷取當前行 nextNode[1] = getCol(snake[0]);//擷取當前列 switch(dir)//根據方向不同前進 { case 37: //左 nextNode[1]--; break; case 38: //上 nextNode[0]--; break; case 39: //右 nextNode[1]++; break; case 40: nextNode[0]++; break; default: break; } return (nextNode);//返回下一步的行和列 } function createCell(row,col,wid)//建立格子。內部小格子顯示左，上邊框；外部大個子顯示右，下邊框 { //box.style.width = row*30+"px"; var i = 0; var j = 0; var box = document.getElementById("outside");//設定外部格子寬高 box.style.width = col*(wid+1)+"px"; box.style.height = row*(wid+1)+"px"; var cell = new Array(); for(i=0;i<row;i++)//建立內部格子 { cell[i] = new Array(); for(j=0;j<col;j++) { //alert("in:r"+i+"c"+j); cell[i][j] = document.createElement("div"); cell[i][j].style.width = wid+"px";//設定寬度 cell[i][j].style.height = wid+"px";//設定高度 cell[i][j].className = "inner";//設定class cell[i][j].name = "inner"; cell[i][j].id = "r"+i+"c"+j;//設定id box.appendChild(cell[i][j]);//加入結點 } } return cell; } function getRow(cell)//獲得當前格子的行 { www.2cto.com var r = String(cell.id.match(/r[0-9]*/));//截取id的r及數字部分 var rID = r.substr(1);//截取r後面的數字 return(rID); } function getCol(cell)//獲得當前格子的列 { var c = cell.id.indexOf("c");//佔到id中c的位置 var cID = cell.id.substr(c+1);//截取c後面的數字 return(cID); } </script> </head> <body> <div id="outside" class="clearFix"></div> <div id="mess"></div> </body> </html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
