當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

基于JavaScript实现的网页版贪吃蛇

發(fā)布時(shí)間：2024/3/13 javascript 33 豆豆

生活随笔收集整理的這篇文章主要介紹了基于JavaScript实现的网页版贪吃蛇小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

效果截圖

實(shí)現(xiàn)原理

通過div布局來實(shí)現(xiàn)貪吃蛇小游戲,html+JavaScript實(shí)現(xiàn), 通過方向鍵的上下左右實(shí)現(xiàn)蛇的移動(dòng)

首先,地圖為一個(gè)二維數(shù)組 Map[*][*]

蛇的坐標(biāo)分為X軸和Y軸即行(H) 與列(L),且分別用 SnakeH 和 SnakeL 兩個(gè)一維數(shù)組來存儲(chǔ)

并且都以SnakeH[0] 和 SnakeL[0]作為蛇頭進(jìn)行移動(dòng)

食物的坐標(biāo)分為X軸和Y軸,用 foodX 和 foodY 來記錄食物坐標(biāo)

首先通過雙層for循環(huán)生成存儲(chǔ)地圖用的二維數(shù)組

然后通過循環(huán)使用 document.createElement("div"); 在一個(gè)div中添加多個(gè)子元素

一共添加800個(gè)子元素,填充至父div中.

然后通過css設(shè)置,地圖div的背景顏色為肉色,蛇身的div背景顏色為綠色,食物為紅色.

通過改變div顏色來實(shí)現(xiàn)物體顯示

其中還使用了?window.onkeydown = function( ) 方法來獲取鍵盤輸入按鍵

還使用了?

? ? ?定時(shí)器 ?(要執(zhí)行的代碼或方法名,間隔的時(shí)間(毫秒));
?? ??? ??? ??? ?var hh = setInterval("move()",200);

使其每0.2秒就調(diào)用一次移動(dòng)方法.

下面是全部代碼!

代碼分析

<!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默認(rèn)的樣式*/padding: 0;border: none;font: inherit;color: inherit;background-color: transparent;cursor: pointer;}.btn {/* 默認(rèn)為button 但是在<a>上依然有效 */display: inline-block;text-align: center;text-decoration: none;/* 創(chuàng)造上下間距一定的空間 */margin: 2px 0;/* border透明 (當(dāng)鼠標(biāo)懸停時(shí)上色) */border: solid 1px transparent;border-radius: 4px;/* padding大小與字體大小相關(guān) (no width/height) */padding: 0.5em 1em;/* 確保字體顏色和背景色有足夠區(qū)分度! */color: #ffffff;background-color: #9555af;}</style></head><body><h1>網(wǎng)頁版貪吃蛇</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(); // 地圖數(shù)組var snakeH = [10,10,10,10,10]; //行var snakeL = [27,28,29,30,31];//列var foodX = 0;var foodY = 0var snakeLength = 5; //蛇的長度function starMap(){//用于產(chǎn)生初始地圖與資源 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("蛇的坐標(biāo):"+snakeH[i]+","+snakeL[i]+";");}for (var i=0; i<snakeLength; i++) {Map[snakeH[i]][snakeL[i]].className="snake";}}function creayFood(){//隨機(jī)生成食物坐標(biāo)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("新的食物的坐標(biāo):"+foodX+","+foodY+"; ");}function showFood(){ Map[foodX][foodY].className="food";}function eatFood(){//每次都記錄下蛇身數(shù)組var fSnakeH = snakeH;var fSnakeL = snakeL;//如果蛇頭的位置等于食物的位置if(snakeH[0] == foodX && snakeL[0] == foodY){//記錄食物的坐標(biāo)var fH = foodX;var fL = foodY;//將食物坐標(biāo)放入蛇數(shù)組的第一位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("吃到了食物!");//生成一個(gè)新食物creayFood();}else{console.log("沒有吃到食物!");}}function death(){if(snakeH[0] < 0 || snakeL[0] < 0){console.log("你撞墻了!");alert("你撞墻了! 你的分?jǐn)?shù)為"+snakeLength);location.reload(); }if(snakeH[0] > 20 || snakeL[0] > 40){console.log("你撞墻了!");alert("你撞墻了! 你的分?jǐn)?shù)為"+snakeLength);location.reload(); }for (var i=1; i<snakeLength; i++) {if(snakeH[0] == snakeH[i] && snakeL[0] == snakeL[i]){console.log("你自殺了!");alert("你自殺了! 你的分?jǐn)?shù)為"+snakeLength);location.reload();}}}var zhi = 38;//默認(rèn)開始方向向上走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; //向左移動(dòng),蛇頭的列發(fā)生變化,向左-1break;case 38:flag1 = snakeL[0];flag2 = snakeL[1];flag3 = snakeH[0];flag4 = snakeH[1];snakeH[0] -= 1;//向上移動(dòng),蛇頭的行發(fā)生變化,向上-1break;case 39:flag1 = snakeL[0];flag2 = snakeL[1];flag3 = snakeH[0];flag4 = snakeH[1];snakeL[0] += 1; 向右移動(dòng),蛇頭的列發(fā)生變化,向右+1break;case 40:flag1 = snakeL[0];flag2 = snakeL[1];flag3 = snakeH[0];flag4 = snakeH[1];snakeH[0] += 1; 向下移動(dòng),蛇頭的列發(fā)生變化,向下+1break;}//蛇頭坐標(biāo)修改之后,再將除蛇頭外的蛇身坐標(biāo)全部向后交換 // *!!!* 這里的細(xì)節(jié)原理文章結(jié)尾會(huì)有解釋console.log("屁股的坐標(biāo):"+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("移動(dòng)一次結(jié)束!");eatFood();//判斷是否吃到食物death();//判斷是否死亡//每一次移動(dòng)之后,都重新將所有div恢復(fù)成肉色,重新顯示出蛇的最新位置,和食物的最新位置 cleanMap();showSnake();showFood();}function starGame(){//開始游戲showSnake();creayFood();showFood();//定時(shí)器 (要執(zhí)行的代碼,間隔的時(shí)間(毫秒))var hh = setInterval("move()",200);}function RandoMath(Min,Max){//生成[Min,Max)之間的隨機(jī)數(shù)var num = Min + Math.random()*Max;return num;}starMap();</script></body> </html>

總結(jié)

第250行代碼解釋:? ?數(shù)組中的蛇身坐標(biāo)值交換

1.先將A[0]的值賦給flag1 , 再將A[1]的值賦給flag2

2.開始for循環(huán),從下標(biāo)1開始循環(huán)

for(var i=1; i<snakeLength; i+=2){? ?//由于兩個(gè)flag,所以一次更改了兩個(gè)數(shù)組節(jié)點(diǎn)的值,所以下標(biāo)一次加2
?? ??? ??? ??? ??? ??? ??? ?snakeL[i] = flag1;? ? ?
?? ??? ??? ??? ??? ??? ??? ?flag1 = snakeL[i+1];? // 在SnakeL[i+1]的值被flag2覆蓋前,保存到flag1中去
?? ??? ??? ??? ??? ??? ??? ?snakeL[i+1] = flag2;
?? ??? ??? ??? ??? ??? ??? ?flag2 = snakeL[i+2];
?? ??? ??? ?}

總結(jié)

以上是生活随笔為你收集整理的基于JavaScript实现的网页版贪吃蛇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： python vimdiff_vimdi
下一篇： Springboot测试类之@RunWi