基於JavaScript實現貪吃蛇遊戲

原創

laojiang025

2020-03-18 15:30

本文實例爲大家分享了JavaScript實現貪吃蛇遊戲的具體代碼，供大家參考，具體內容如下

1.結構

創建一個盒子box作爲蛇的身體，當前盒子中只有一個子元素，代表此時蛇的長度爲1.
在創建一個盒子food作爲貪吃蛇的食物。

1 <div id="box">
2 <div></div>
3 </div>
4 <div id="food"></div>

2.CSS

設置蛇和食物的樣式，這裏注意蛇和食物都是絕對定位。

1 <style>
2 *{
3 padding: 0px;
4 margin: 0px;
5 }
6 #box div{
7 width: 30px;
8 height: 30px;
9 box-sizing: border-box;
10 background: green;
11 border: 1px solid black;
12 position: absolute;
13 }
14 #food{
15 width: 30px;
16 height: 30px;
17 background: brown;
18 position: absolute;
19 }
20 </style>

3.腳本

獲取蛇的身體和每一個子元素

1 var box = document.getElementById("box");
2 var boxs = document.getElementById("box").children;
定義蛇頭的位置

1 var snackX = 0;
2 var snackY = 0;
獲取屏幕寬度和高度，以此來設定牆的邊界，以限制蛇的移動範圍。

1 var cw = document.documentElement.clientWidth;
2 var ch = document.documentElement.clientHeight;
3 var minsnackX = 0;
4 var maxsnackX = Math.floor(cw / boxs[0].offsetWidth)*boxs[0].offsetWidth;
5 var minsnackY = 0;
6 var maxsnackY = Math.floor(ch / boxs[0].offsetHeight)*boxs[0].offsetHeight;
定義初始的移動方向。

1 var turn = "right";
獲取食物元素，並設置食物的位置座標。

1 var foodele = document.getElementById("food");
2 var foodX,foodY;
蛇的初始化

1 for(var i = 0; i <6 ; i++){
2 box.appendChild(boxs[0].cloneNode(true));
3 }
刷新食物

1 function food(){
2 //此處的座標要先獲取頁面最大支持的蛇身體的塊數，然後在塊數中隨機，然後乘以塊數的大小，
3 //因爲蛇的移動每一步都是固定的，想要判定食物和蛇頭重合就必須座標是整塊的倍數。
4 foodX = parseInt( Math.random()*Math.floor(cw / boxs[0].offsetWidth))*boxs[0].offsetWidth;
5 foodY = parseInt( Math.random()*Math.floor(ch / boxs[0].offsetHeight))*boxs[0].offsetHeight;
6 //判定當食物的產生位置和蛇的任何一個位置重合時就重新生成食物。
7 for(var i = 0;i<boxs.length;i++){
8 if(foodX + "px" === boxs[i].style.left && foodY + "px" === boxs[i].style.top){
9 food();
10 }
11 }
12 foodele.style.left = foodX + "px";
13 foodele.style.top = foodY + "px";
14 }
調用food()方法生成第一個食物

1 food();
設置定時器每次執行一次蛇的運行方法

1 var timer = setInterval(function(){
2 snackMOve();
3 },150)
封裝一個蛇的運動方法