當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
基于JavaScript实现的网页版贪吃蛇
生活随笔
收集整理的這篇文章主要介紹了
基于JavaScript实现的网页版贪吃蛇
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果截圖
實現原理
通過div布局來實現貪吃蛇小游戲,html+JavaScript實現, 通過方向鍵的上下左右實現蛇的移動
首先,地圖為一個二維數組 Map[*][*]
蛇的坐標分為X軸和Y軸 即 行(H) 與 列(L),且分別用 SnakeH 和 SnakeL 兩個一維數組來存儲
并且都以SnakeH[0] 和 SnakeL[0]作為蛇頭進行移動
食物的坐標分為X軸和Y軸,用 foodX 和 foodY 來記錄食物坐標
首先通過雙層for循環生成存儲地圖用的二維數組
然后通過循環使用 document.createElement("div"); 在一個div中添加多個子元素
一共添加800個子元素,填充至父div中.
然后通過css設置,地圖div的背景顏色為肉色,蛇身的div背景顏色為綠色,食物為紅色.
通過改變div顏色來實現物體顯示
其中還使用了?window.onkeydown = function( ) 方法來獲取鍵盤輸入按鍵
還使用了?
? ? ?定時器 ?(要執行的代碼或方法名,間隔的時間(毫秒));
?? ??? ??? ??? ?var hh = setInterval("move()",200);
使其每0.2秒就調用一次移動方法.
下面是全部代碼!
代碼分析
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>貪吃蛇</title><style type="text/css">h1{font-family: 楷體;text-align: center;color: #9555af;}#father{width: 800px;height: 400px;border: 1px solid black;margin: 0 auto;}.baby{height: 18px;width: 18px;border: 1px solid black;background-color: bisque; float: left;}.snake{height: 18px;width: 18px;border: 1px solid black;background-color: green; float: left;}.food{height: 18px;width: 18px;border: 1px solid black;background-color: red; float: left;}#buttn{width: 70px;height: auto;border: 1px solid transparent;margin: 0 auto;margin-top: 50px;}button {/*清除button默認的樣式*/padding: 0;border: none;font: inherit;color: inherit;background-color: transparent;cursor: pointer;}.btn {/* 默認為button 但是在<a>上依然有效 */display: inline-block;text-align: center;text-decoration: none;/* 創造上下間距一定的空間 */margin: 2px 0;/* border透明 (當鼠標懸停時上色) */border: solid 1px transparent;border-radius: 4px;/* padding大小與字體大小相關 (no width/height) */padding: 0.5em 1em;/* 確保字體顏色和背景色有足夠區分度! */color: #ffffff;background-color: #9555af;}</style></head><body><h1>網頁版貪吃蛇</h1><div id="father"></div><div id="buttn"><button type="button" class="btn" onclick="starGame()">開始</button></div><script type="text/javascript">//全局變量var Map = new Array(); // 地圖數組var snakeH = [10,10,10,10,10]; //行var snakeL = [27,28,29,30,31];//列var foodX = 0;var foodY = 0var snakeLength = 5; //蛇的長度function starMap(){//用于產生初始地圖與資源 for (var i=0; i<20; i++) {Map[i] = Array();for(var j=0; j<40; j++){var div2 = document.createElement("div");div2.className = "baby";Map[i][j] = document.getElementsByTagName("div")[0].appendChild(div2); } } }function cleanMap(){//將地圖全部變成肉色for (var i=0; i<20; i++) {for (var j=0; j<40; j++) {Map[i][j].className="baby";}}}function showSnake(){//初始蛇身長度為3,包括蛇頭for (var i=0; i<snakeLength; i++) {console.log("蛇的坐標:"+snakeH[i]+","+snakeL[i]+";");}for (var i=0; i<snakeLength; i++) {Map[snakeH[i]][snakeL[i]].className="snake";}}function creayFood(){//隨機生成食物坐標foodX = parseInt(RandoMath(0,20));foodY = parseInt(RandoMath(0,40));//如果食物生成到了蛇身,則重新生成食物for(var i=0; i<snakeLength; i++){if(snakeH[i]==foodX && snakeL[i]==foodY){foodX = parseInt(RandoMath(0,20));foodY = parseInt(RandoMath(0,40));}}console.log("新的食物的坐標:"+foodX+","+foodY+"; ");}function showFood(){ Map[foodX][foodY].className="food";}function eatFood(){//每次都記錄下蛇身數組var fSnakeH = snakeH;var fSnakeL = snakeL;//如果蛇頭的位置等于食物的位置if(snakeH[0] == foodX && snakeL[0] == foodY){//記錄食物的坐標var fH = foodX;var fL = foodY;//將食物坐標放入蛇數組的第一位snakeH[0] = fH;snakeL[0] = fL;for (var i=1; i<snakeLength; i++) {snakeH[i] = fSnakeH[i];snakeL[i] = fSnakeL[i];}snakeLength += 1;//蛇身長度加1console.log("吃到了食物!");//生成一個新食物creayFood();}else{console.log("沒有吃到食物!");}}function death(){if(snakeH[0] < 0 || snakeL[0] < 0){console.log("你撞墻了!");alert("你撞墻了! 你的分數為"+snakeLength);location.reload(); }if(snakeH[0] > 20 || snakeL[0] > 40){console.log("你撞墻了!");alert("你撞墻了! 你的分數為"+snakeLength);location.reload(); }for (var i=1; i<snakeLength; i++) {if(snakeH[0] == snakeH[i] && snakeL[0] == snakeL[i]){console.log("你自殺了!");alert("你自殺了! 你的分數為"+snakeLength);location.reload();}}}var zhi = 38;//默認開始方向向上走var f = zhi;window.onkeydown = function(e){var ke = e.keyCode;if(ke == 37 && zhi != 39){zhi=ke;f = zhi;console.log(zhi);}if(ke === 38 && zhi != 40){zhi=ke;f = zhi;console.log(zhi);}if(ke === 39 && zhi != 37){zhi=ke;f = zhi;console.log(zhi);}if(ke === 40 && zhi != 38){zhi=ke;f = zhi;console.log(zhi);}if(ke != 37 && ke != 38 && ke != 39 && ke != 40){zhi = f;}}function move(){var flag1 = 0;var flag2 = 0;var flag3 = 0;var flag4 = 0;//方向鍵 ←為37 ↑ 38 → 39 ↓ 40switch(zhi){case 37:flag1 = snakeL[0];flag2 = snakeL[1];flag3 = snakeH[0];flag4 = snakeH[1];snakeL[0] -= 1; //向左移動,蛇頭的列發生變化,向左-1break;case 38:flag1 = snakeL[0];flag2 = snakeL[1];flag3 = snakeH[0];flag4 = snakeH[1];snakeH[0] -= 1;//向上移動,蛇頭的行發生變化,向上-1break;case 39:flag1 = snakeL[0];flag2 = snakeL[1];flag3 = snakeH[0];flag4 = snakeH[1];snakeL[0] += 1; 向右移動,蛇頭的列發生變化,向右+1break;case 40:flag1 = snakeL[0];flag2 = snakeL[1];flag3 = snakeH[0];flag4 = snakeH[1];snakeH[0] += 1; 向下移動,蛇頭的列發生變化,向下+1break;}//蛇頭坐標修改之后,再將除蛇頭外的蛇身坐標全部向后交換 // *!!!* 這里的細節原理文章結尾會有解釋console.log("屁股的坐標:"+snakeH[snakeLength-1]+","+snakeL[snakeLength-1]+"; ");for(var i=1; i<snakeLength; i+=2){snakeL[i] = flag1;flag1 = snakeL[i+1];snakeH[i] = flag3;flag3 = snakeH[i+1];snakeL[i+1] = flag2;flag2 = snakeL[i+2];snakeH[i+1] = flag4;flag4 = snakeH[i+2];}console.log("移動一次結束!");eatFood();//判斷是否吃到食物death();//判斷是否死亡//每一次移動之后,都重新將所有div恢復成肉色,重新顯示出蛇的最新位置,和食物的最新位置 cleanMap();showSnake();showFood();}function starGame(){//開始游戲showSnake();creayFood();showFood();//定時器 (要執行的代碼,間隔的時間(毫秒))var hh = setInterval("move()",200);}function RandoMath(Min,Max){//生成[Min,Max)之間的隨機數var num = Min + Math.random()*Max;return num;}starMap();</script></body> </html>總結
第250行代碼解釋:? ?數組中的蛇身坐標值交換
1.先將A[0]的值賦給flag1 , 再將A[1]的值賦給flag2
2.開始for循環,從下標1開始循環
for(var i=1; i<snakeLength; i+=2){? ?//由于兩個flag,所以一次更改了兩個數組節點的值,所以下標一次加2
?? ??? ??? ??? ??? ??? ??? ?snakeL[i] = flag1;? ? ?
?? ??? ??? ??? ??? ??? ??? ?flag1 = snakeL[i+1];? // 在SnakeL[i+1]的值被flag2覆蓋前,保存到flag1中去
?? ??? ??? ??? ??? ??? ??? ?snakeL[i+1] = flag2;
?? ??? ??? ??? ??? ??? ??? ?flag2 = snakeL[i+2];
?? ??? ??? ?}
總結
以上是生活随笔為你收集整理的基于JavaScript实现的网页版贪吃蛇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python vimdiff_vimdi
- 下一篇： 41-fcntl设置文件锁