聽說剛學完JavaScript的你，找不到demo來練手？
文章目錄
前言：
這是本蒟蒻這周的web作業，開始覺得選貪吃蛇可能會有點小難，但是自己看了看網站的一些視頻後，發現似乎還是挺有意思的，於是打算分享出來，希望對剛學完JavaScript基礎知識，正愁沒有demo來練手的小夥伴有些許幫助。
文件資源：
資源位置
因爲比較簡單，所以沒有設置c幣，只希望大佬留個贊再走唄；
demo的簡單介紹：
前言中也提了句，這是一個web版的低配版貪吃蛇單機小遊戲
（看到前面那麼多前綴，就知道，這真的只是一個demo，因爲實在是太低配了）
這是的蛇頭，食物、身體都是通過div實現，所以就比較簡單了。
這裏的JavaScript用的是jquery框架，因爲還是可以稍微少點代碼量（哈哈哈）
佈局：
效果圖：
既然選好目標後，我們首先當然是得確定佈局：
這是最終需要的效果圖。
具體實現：
那麼怎麼實現呢：
1.地圖：
身體，食物都要大小一致，我們還是比較容易想到用table標籤，但是table下面不能創建div，這是我們需要注意的。所以我們需要另外開一個div表示真正的地圖：這樣就可以在地圖開生成食物和蛇頭了。
但是我們會發現table標籤和真正表示地圖的div不能重合，於是我們可以用絕對定位，使其重合
2.得分顯示區域：
直接用一個div下面封裝一個span標籤即可，方便之後修改它的值
3.改變速度按鈕區域：
直接用四個buton標籤即可
4.遊戲說明區域：
一個p標籤即可
於是html文件和css文件就出來了：
這裏對於table的創建，就別一個個cv…
vscode下直接table>tr20>td40按回車即可，
其他操作可以看下面博客：
https://www.cnblogs.com/summit7ca/p/6944215.html
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>貪吃蛇</title>
<link type="text/css" rel="stylesheet" href="index.css"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="index.js" type="text/javascript"></script>
</head>
<body>
<!-- 地圖500*1000 每個單元格爲25*25 (20行，40列）-->
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- 真正的地圖 因爲table裏面不能加div-->
<div id="map"></div>
<div id="scoreDiv">
Score：<span id="score">0</span>
</div>
<div id="buttonGroup">
<button id="quickBtn">快</button>
<button id="midBtn">中</button>
<button id="slowBtn">慢</button>
<button id="restart">重新開始</button>
</div>
<p>
遊戲說明：<br>
紅色方塊表示：蛇頭，藍色方塊表示：食物，黃色方塊表示：身體。<br>
通過鍵盤的上、下、左、右鍵來移動貪吃蛇
</p>
</body>
</html>
css文件：
命名需要爲：index.css，而且需要和html在同一目錄下，不然html無法調用
（這是講給像我一樣的蒟蒻的，大佬勿噴）
* {
margin: 0;
padding: 0;
}
#scoreDiv {
font-size: 30px;
}
#map {
width: 1000px;
height: 500px;
background-color: black;
}
table {
border: 0;
position: absolute;
left: 0;
top: 0;
}
td {
width: 25px;
height: 25px;
}
button{
width: 25px;
height: 25px;
}
#restart{
background-color: red;
width:100px;
height: 25px;
}
p{
font-size:20px;
}
相關功能實現：
1.產生蛇頭、食物div
我們可以對這個操作用一函數封裝。
//刷新頁面時，不僅要產生地圖，而且還要產生 蛇頭 和 一個食物
//封裝一個方法，用於創建div元素 放入地圖
function createDiv(color) {
var div = document.createElement("div"); //創建一個div節點
div.style.width = "25px";
div.style.height = "25px";
div.style.position="absolute"; //爲了改變位置，並不獨立成行
//位置是隨機的 使用js隨機數
//Math.random() 產生一個[0,1)的隨機數
div.style.left=parseInt(Math.random()*10)*25+"px";
div.style.top=parseInt(Math.random()*10)*25+"px";
div.style.backgroundColor=color;
$("#map").append(div); //JQuery操作
//返回創建出的div
return div;
}
- 這裏需要傳入一個color是因爲，我們對於後面的身體操作有用
- 其中每次遊戲蛇頭和食物都是隨機的，於是我們得用到Math.random()這個函數產生隨機數。
2.使用定時器讓蛇頭動起來
我們可以對我們新產生的div的value值，表示方向，然後對於遊戲開始時對蛇頭設置一個默認的移動方向，通過對div的位置，來實現蛇頭的移動，具體見代碼：
//判斷當前蛇頭的移動方向
switch(headNode.value){
case "左":
headNode.style.left=parseInt(headNode.style.left)-25+"px";
break;
case "右":
headNode.style.left=parseInt(headNode.style.left)+25+"px";
break;
case "上":
headNode.style.top=parseInt(headNode.style.top)-25+"px";
break;
case "下":
headNode.style.top=parseInt(headNode.style.top)+25+"px";
break;
}
3.通過鍵盤的上下左右鍵，實現蛇頭的移動
- 我們首先得知道鍵值，左：37，右：39，上：38，下：40
- 調用document的keydown方法，獲取當前按下的鍵值
//通過鍵盤的按鍵，來改變蛇頭的移動方向
//不同的鍵值對應不同的鍵
$(document).keydown(function(e){ //e表示事件對象
//console.log(e.keyCode);
switch(e.keyCode){
case 37:
headNode.value="左"
break;
case 39:
headNode.value="右"
break;
case 38:
headNode.value="上"
break;
case 40:
headNode.value="下"
break;
}
})
4.定義兩個數組
-分別存身體和整個蛇，在後面蛇的移動有需要
//放所有身體的數組
var bodyarr=[];
//放整個蛇的數組
var nodes=[];
5.碰撞檢測：以改變食物的位置
- 碰撞檢測：即div元素重合（蛇頭和食物）
- 吃到食物，身體加一
//碰撞檢測 即：兩個元素重合
//吃到食物,身體加一
if(headNode.style.left==foodNode.style.left&&headNode.style.top==foodNode.style.top){
var bodyNode=createDiv("yellow");
var lastNode;
if(bodyarr.length>0){
lastNode=bodyarr[bodyarr.length-1];
}
else{
lastNode=headNode;
}
switch(lastNode.value){
case "左":
bodyNode.style.left=parseInt(lastNode.style.left)+25+"px";
bodyNode.style.top=lastNode.style.top;
break;
case "右":
bodyNode.style.left=parseInt(lastNode.style.left)-25+"px";
bodyNode.style.top=lastNode.style.top;
break;
case "上":
bodyNode.style.top=parseInt(lastNode.style.top)+25+"px";
bodyNode.style.left=lastNode.style.left;
break;
case "下":
bodyNode.style.top=parseInt(lastNode.style.top)-25+"px";
bodyNode.style.left=lastNode.style.left;
break;
}
bodyNode.value=lastNode.value;
bodyarr.push(bodyNode);
nodes.push(bodyNode);
6.身體隨之移動：
- 身體隨前一塊移動
- 需要逆序遍歷身體數組，正序的話會出錯，仔細想一想會發現：第一塊身體移動方向等於蛇頭移動方向，第二塊等於第一塊，以此類推，所有的身體移動方向都是蛇頭移動方向了
//身體移動
if(bodyarr.length>0){
//身體跟隨前一塊移動 ,逆序遍歷
for(var i=bodyarr.length-1;i>=0;i--){
switch(bodyarr[i].value){
case "左":
bodyarr[i].style.left=parseInt(bodyarr[i].style.left)-25+"px";
break;
case "右":
bodyarr[i].style.left=parseInt(bodyarr[i].style.left)+25+"px";
break;
case "上":
bodyarr[i].style.top=parseInt(bodyarr[i].style.top)-25+"px";
break;
case "下":
bodyarr[i].style.top=parseInt(bodyarr[i].style.top)+25+"px";
break;
}
if(i==0){
bodyarr[i].value=headNode.value;
}
else{
bodyarr[i].value=bodyarr[i-1].value;
}
}
}
7.遊戲結束
- 撞牆
- 吃到身體
//離開地圖,撞牆
if(parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>975
||parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>475){
clearInterval(t);
alert("撞牆了,Game Over!");
}
//吃到自己的身體
if(bodyarr.length>0){
for(var i=0;i<bodyarr.length;i++){
if(bodyarr[i].style.left==headNode.style.left&&bodyarr[i].style.top==headNode.style.top){
clearInterval(t);
alert("咬到身體了,Game Over!");
break;
}
}
}
8.防止更新的食物位置與身體重合
//更新食物位置,防止食物與蛇重合
var x=parseInt(Math.random()*10)*25;
var y=parseInt(Math.random()*10)*25;
for(var i=0;i<nodes.length;i++){
if(parseInt(nodes[i].style.left)==x&&parseInt(nodes[i].style.top)==y){
x=parseInt(Math.random()*10)*25;
y=parseInt(Math.random()*10)*25;
i=-1;
}
}
foodNode.style.left=x+"px";
foodNode.style.top=y+"px";
9.得分增加
直接改變span標籤的值即可（每吃一個+10）
//得分增加
$("#score").text(parseInt($("#score").text())+10);
10.對按鈕實現相關功能
//對按鈕實現相關功能
$("#quickBtn").click(function(){
t=setInterval(move,100);
})
$("#midBtn").click(function(){
t=setInterval(move,500);
})
$("#slowBtn").click(function(){
t=setInterval(move,2000);
})
$("#restart").click(function(){
location.reload();
})
於是基本上這個demo所有功能都實現了
js文件：
同樣需要注意下命名：
$(function () {
//放所有身體的數組
var bodyarr=[];
//放整個蛇的數組
var nodes=[];
//蛇移動的速度,默認爲中速
var t=setInterval(move,500);
//刷新頁面時，不僅要產生地圖，而且還要產生 蛇頭 和 一個食物
//封裝一個方法，用於創建div元素 放入地圖
function createDiv(color) {
var div = document.createElement("div"); //創建一個div節點
div.style.width = "25px";
div.style.height = "25px";
div.style.position="absolute"; //爲了改變位置，並不獨立成行
//位置是隨機的 使用js隨機數
//Math.random() 產生一個[0,1)的隨機數
div.style.left=parseInt(Math.random()*10)*25+"px";
div.style.top=parseInt(Math.random()*10)*25+"px";
div.style.backgroundColor=color;
$("#map").append(div);
//返回創建出的div
return div;
}
//蛇頭的移動方向 ，假設默認移動方向向左
//四個方向 左 右 上 下
var headNode=createDiv("red"); //創建一個蛇頭
nodes.push(headNode);
headNode.value="右";
var foodNode=createDiv("blue"); //創建一個食物
function move(){
//身體移動
if(bodyarr.length>0){
//身體跟隨前一塊移動 ,逆序遍歷
for(var i=bodyarr.length-1;i>=0;i--){
switch(bodyarr[i].value){
case "左":
bodyarr[i].style.left=parseInt(bodyarr[i].style.left)-25+"px";
break;
case "右":
bodyarr[i].style.left=parseInt(bodyarr[i].style.left)+25+"px";
break;
case "上":
bodyarr[i].style.top=parseInt(bodyarr[i].style.top)-25+"px";
break;
case "下":
bodyarr[i].style.top=parseInt(bodyarr[i].style.top)+25+"px";
break;
}
if(i==0){
bodyarr[i].value=headNode.value;
}
else{
bodyarr[i].value=bodyarr[i-1].value;
}
}
}
//判斷當前蛇頭的移動方向
switch(headNode.value){
case "左":
headNode.style.left=parseInt(headNode.style.left)-25+"px";
break;
case "右":
headNode.style.left=parseInt(headNode.style.left)+25+"px";
break;
case "上":
headNode.style.top=parseInt(headNode.style.top)-25+"px";
break;
case "下":
headNode.style.top=parseInt(headNode.style.top)+25+"px";
break;
}
//離開地圖,撞牆
if(parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>975
||parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>475){
clearInterval(t);
alert("撞牆了,Game Over!");
}
//吃到自己的身體
if(bodyarr.length>0){
for(var i=0;i<bodyarr.length;i++){
if(bodyarr[i].style.left==headNode.style.left&&bodyarr[i].style.top==headNode.style.top){
clearInterval(t);
alert("咬到身體了,Game Over!");
break;
}
}
}
//碰撞檢測 即：兩個元素重合
//吃到食物,身體加一
if(headNode.style.left==foodNode.style.left&&headNode.style.top==foodNode.style.top){
var bodyNode=createDiv("yellow");
var lastNode;
if(bodyarr.length>0){
lastNode=bodyarr[bodyarr.length-1];
}
else{
lastNode=headNode;
}
switch(lastNode.value){
case "左":
bodyNode.style.left=parseInt(lastNode.style.left)+25+"px";
bodyNode.style.top=lastNode.style.top;
break;
case "右":
bodyNode.style.left=parseInt(lastNode.style.left)-25+"px";
bodyNode.style.top=lastNode.style.top;
break;
case "上":
bodyNode.style.top=parseInt(lastNode.style.top)+25+"px";
bodyNode.style.left=lastNode.style.left;
break;
case "下":
bodyNode.style.top=parseInt(lastNode.style.top)-25+"px";
bodyNode.style.left=lastNode.style.left;
break;
}
bodyNode.value=lastNode.value;
bodyarr.push(bodyNode);
nodes.push(bodyNode);
//得分增加
$("#score").text(parseInt($("#score").text())+10);
//更新食物位置,防止食物與蛇重合
var x=parseInt(Math.random()*10)*25;
var y=parseInt(Math.random()*10)*25;
for(var i=0;i<nodes.length;i++){
if(parseInt(nodes[i].style.left)==x&&parseInt(nodes[i].style.top)==y){
x=parseInt(Math.random()*10)*25;
y=parseInt(Math.random()*10)*25;
i=-1;
}
}
foodNode.style.left=x+"px";
foodNode.style.top=y+"px";
}
}
//通過鍵盤的按鍵，來改變蛇頭的移動方向
//不同的鍵值對應不同的鍵
$(document).keydown(function(e){ //e表示事件對象
//console.log(e.keyCode);
switch(e.keyCode){
case 37:
headNode.value="左"
break;
case 39:
headNode.value="右"
break;
case 38:
headNode.value="上"
break;
case 40:
headNode.value="下"
break;
}
})
//對按鈕實現相關功能
$("#quickBtn").click(function(){
t=setInterval(move,100);
})
$("#midBtn").click(function(){
t=setInterval(move,500);
})
$("#slowBtn").click(function(){
t=setInterval(move,2000);
})
$("#restart").click(function(){
location.reload();
})
})
大佬不妨留個贊再走唄。