純?cè)鷍s如何實(shí)現(xiàn)貪吃蛇游戲

發(fā)布時(shí)間：2020-08-03 10:51:55 來(lái)源：億速云閱讀：147 作者：小豬欄目：web開(kāi)發(fā)
這篇文章主要講解了純?cè)鷍s如何實(shí)現(xiàn)貪吃蛇游戲，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>貪吃蛇游戲</title>

<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

.wrap {
 width: 600px;
 margin: 0 auto;
 position: relative;
}

p {
 position: absolute;
 left: 65%;
 top: 10%;
}

h2 {
 text-align: center;
 margin-bottom: 20px;
}

#score {
 text-align: center;
 font-size: 20px;
}

#snake_map {
 margin: 0 auto;
 border: 1px solid skyblue;
}
/*行樣式*/
.row {
 height: 20px;
}
/*列樣式*/
.col {
 height: 20px;
 width: 20px;
 box-sizing: border-box;
 border: 1px solid lightgray;
 background: rgb(250, 250, 250);
 float: left;
}

.activeSnake {
 background: black;
}

.egg {
 background: red;
}

#Pause {
 margin-left: 18%;
 border: 1px solid skyblue;
 color: white;
 background: skyblue;
 width: 50px;
 height: 30px;
 margin-bottom: 10px;
 border-radius: 5px;
}

#Start,#Refresh,#Speed {
 border: 1px solid skyblue;
 background: skyblue;
 color: white;
 width: 50px;
 height: 30px;
 border-radius: 5px;
 margin-left: 15px;
}
</style>


</head>
 <body>
 <div class="wrap">
 <h2>貪吃蛇游戲</h2>
 <!-- 記錄吃了多少個(gè)蛋 -->
 <p > score:<span id="score" >0</span> </p>
 <!-- 暫停按鈕 -->
 <input id="Pause" type="button" name="name" value="Pause">
 <!-- 開(kāi)始按鈕 -->
 <input id="Start" type="button" name="name" value="Start">
 <!-- 刷新(重新開(kāi)始游戲) -->
 <input id="Refresh" type="button" name="name" value="Refresh">
 <!-- 加速按鈕 -->
 <input id="Speed" type="button" name="name" value="Speed">
 <!-- 貪吃蛇的行走路徑地圖 -->
 <div id="snake_map">

 </div>
 </div>
 </body>


<script type="text/javascript">
//獲取分?jǐn)?shù)標(biāo)簽
var score = document.getElementById('score');
// 獲取路徑地圖標(biāo)簽
var map = document.getElementById('snake_map');
// 為了靈活的設(shè)置地圖的大小,以下設(shè)置兩個(gè)變量
// 用于存儲(chǔ)行數(shù)和列數(shù)(即方格的個(gè)數(shù))
var rowNumber = 25;// 行數(shù)
var columnNumber = 20;// 列數(shù);
var mapWidth = columnNumber * 20 + 'px';// 地圖的寬
var mapHeight = rowNumber * 20 + 'px';// 地圖的高
map.style.width = mapWidth;
map.style.height = mapHeight;// 設(shè)置地圖寬高
// 創(chuàng)建一個(gè)二維數(shù)組,用來(lái)記錄地圖上的所有div的位置
var snakeDIVPosition = [];
// 通過(guò)雙層for循環(huán)來(lái)創(chuàng)建地圖元素
for ( var i = 0; i < rowNumber; i++) {
 // 創(chuàng)建行div
 var rowDIV = document.createElement('div');
 // 設(shè)置div樣式
 rowDIV.className = 'row';
 // 將行div添加到路徑地圖map中
 map.appendChild(rowDIV);
 // 創(chuàng)建一個(gè)行級(jí)數(shù)組,用來(lái)存儲(chǔ)當(dāng)前行中的每個(gè)方塊div
 var rowArray = [];
 for ( var j = 0; j < columnNumber; j++) {
 // 創(chuàng)建每一行中的方塊div
 var columnDIV = document.createElement('div');
 // 設(shè)置css樣式
 columnDIV.className = 'col';
 // 將方塊DIV添加到當(dāng)前行中
 rowDIV.appendChild(columnDIV);
 // 同時(shí)將方塊添加到行數(shù)組中
 rowArray.push(columnDIV);
 }
 // 當(dāng)前內(nèi)層循環(huán)結(jié)束,將行數(shù)組添加到二維數(shù)組中
 snakeDIVPosition.push(rowArray);
}

// 創(chuàng)建蛇模型
// 創(chuàng)建一個(gè)一維數(shù)組,用來(lái)存儲(chǔ)蛇身所占的div
var snake = [];
// 固定蛇身起始長(zhǎng)度為3個(gè)div
for ( var i = 0; i < 3; i++) {
 // 為蛇身設(shè)置不同顏色的div
 snakeDIVPosition[0][i].className = 'col activeSnake';
 // 存儲(chǔ)在蛇身數(shù)組中
 snake[i] = snakeDIVPosition[0][i];
}
// 定義變量來(lái)控制蛇
var x = 2;
var y = 0;// 蛇頭的起始位置偏移量
var scoreCount = 0;// 分?jǐn)?shù)計(jì)數(shù)器,即吃了多少個(gè)蛋
var eggX = 0;// 記錄蛋所在的行位置
var eggY = 0;// 記錄蛋所在的列位置;

var direction = 'right';// 記錄蛇移動(dòng)的方向,初始為向右
var changeDir = true;// 判斷是否需要改變蛇的移動(dòng)方向
var delayTimer = null;// 延遲定時(shí)器

// 添加鍵盤(pán)事件監(jiān)聽(tīng)方向鍵來(lái)改變蛇的移動(dòng)方向
document.onkeydown = function(event) {
 // 先判斷是否需要改變方向,true表示需要,false表示不需要
 if (!changeDir) {
 return;// return空表示直接結(jié)束函數(shù),后續(xù)代碼不執(zhí)行
 }
 event = event || window.event;
 // 為了合理處理蛇的移動(dòng),需要判斷蛇頭和蛇身
 // 假設(shè)蛇向右移動(dòng),點(diǎn)方向鍵左,右鍵都不需要做出響應(yīng)
 if (direction == 'right' && event.keyCode == 37) {
 return;// 終止事件執(zhí)行
 }
 if (direction == 'left' && event.keyCode == 39) {
 return;
 }
 if (direction == 'up' && event.keyCode == 40) {
 return;
 }
 if (direction == 'down' && event.keyCode == 38) {
 return;
 }
 // 我們通過(guò)keyCode確定蛇要移動(dòng)的方向
 switch (event.keyCode) {
 case 37:
 direction = 'left';// 向左
 break;
 case 38:
 direction = 'up';// 向上;
 break;
 case 39:
 direction = 'right';// 向右
 break;
 case 40:
 direction = 'down';// 向下
 break;
 }
 changeDir = false;
 delayTimer = setTimeout(function() {
 // 設(shè)置是否需要改變方向
 changeDir = true;
 }, 300);
};

// 開(kāi)始設(shè)置蛇移動(dòng)邏輯
// 蛇移動(dòng)函數(shù)
function snakeMove() {
 // 根據(jù)上面設(shè)置的方向來(lái)設(shè)置蛇頭的位置
 switch (direction) {
 case 'left':
 x--;
 break;
 case 'right':
 x++;
 break;
 case 'up':
 y--;
 break;
 case 'down':
 y++;
 break;
 };
 // 判斷是否游戲結(jié)束
 if (x < 0 || y < 0 || x >= columnNumber || y >= rowNumber) {
 alert('Game Over!!!');
 // 結(jié)束蛇移動(dòng)的定時(shí)器
 clearInterval(moveTimer);
 return;// 終止鍵盤(pán)事件;
 }
 // 如果蛇吃到自己,也要結(jié)束游戲
 for ( var i = 0; i < snake.length; i++) {
 // 將此時(shí)蛇頭移動(dòng)后的位置與之前左右的組成蛇的div的位置進(jìn)行比較,如果相同則說(shuō)明吃到自己,游戲結(jié)束
 if (snake[i] == snakeDIVPosition[y][x]) {
  alert('Game over!!!');
  clearInterval(moveTimer);
  return;
 };
 }
 // 判斷蛇頭移動(dòng)的位置是否有蛋
 if (eggX == x && eggY == y) {
 snakeDIVPosition[eggY][eggX].className = 'col activeSnake';
 snake.push(snakeDIVPosition[eggY][eggX]);// 加入蛇身
 scoreCount++;// 記錄分?jǐn)?shù)
 // 更新當(dāng)前的分?jǐn)?shù)
 score.innerHTML = scoreCount;
 // 隨機(jī)產(chǎn)生一個(gè)新的蛋
 createNewEgg();
 } else {
 // 設(shè)置蛇碰不到蛋的邏輯
 // 讓蛇移動(dòng)
 // 蛇尾去掉蛇自身的顏色,變成格子的顏色
 snake[0].className = 'col';
 // 將蛇尾div從數(shù)組中移除
 snake.shift();
 // 定位到的新的蛇頭加入到蛇數(shù)組中
 snakeDIVPosition[y][x].className = 'col activeSnake';
 snake.push(snakeDIVPosition[y][x]);
 };
};

var moveTimer = setInterval('snakeMove()', 300);


// 定義一個(gè)生成min,max之間的隨機(jī)數(shù)函數(shù)
function random(min, max) {
 return Math.floor(Math.random() * (max - min + 1) + min);
};



function createNewEgg() {
 // 隨機(jī)出新的egg的下標(biāo)的x和y值
 eggX = random(0, columnNumber - 1);
 eggY = random(0, rowNumber - 1);

 // 判斷如果隨機(jī)產(chǎn)生的蛋與蛇身重合,就重新隨機(jī)產(chǎn)生一個(gè)蛋
 if (snakeDIVPosition[eggY][eggX].className == 'col activeSnake') {
 createNewEgg();// 重新隨機(jī)新的egg
 } else {
 snakeDIVPosition[eggY][eggX].className = 'col egg';
 }
};

createNewEgg();// 在游戲開(kāi)始的時(shí)候生成新的egg

var pause = document.getElementById('Pause');
var start = document.getElementById('Start');
var refresh = document.getElementById('Refresh');
var speed = document.getElementById('Speed');
// 添加暫停按鈕
pause.onclick = function() {
 clearInterval(moveTimer);
};
// 添加開(kāi)始按鈕
start.onclick = function() {
 clearInterval(moveTimer);
 moveTimer = setInterval('snakeMove()', speed1);
};
// 添加刷新按鈕
refresh.onclick = function() {
 window.location.reload();
};
// 添加加速按鈕
var speed1 = 300;
speed.onclick = function() {
 speed1 -= 20;
 clearInterval(moveTimer);
 moveTimer = setInterval('snakeMove()', speed1);
};
</script>


</html>
看完上述內(nèi)容，是不是對(duì)純?cè)鷍s如何實(shí)現(xiàn)貪吃蛇游戲有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。
向AI問(wèn)一下細(xì)節(jié)
純?cè)鷍s如何實(shí)現(xiàn)貪吃蛇游戲

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽
