本文實例爲大家分享了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)
封裝一個蛇的運動方法
蛇的運動方向
全部代碼