純原生js實(shí)現(xiàn)貪吃蛇游戲
更新時(shí)間：2020年04月16日 14:55:32 作者：狗子
這篇文章主要為大家詳細(xì)介紹了純原生js實(shí)現(xiàn)貪吃蛇游戲的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)貪吃蛇游戲的具體代碼，供大家參考，具體內(nèi)容如下
<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%;
}
h1 {
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">
<h1>貪吃蛇游戲</h1>
<!-- 記錄吃了多少個蛋 -->
<p style="font-size:20px;color:red"> score:<span id="score" style="color:black">0</span> </p>
<!-- 暫停按鈕 -->
<input id="Pause" type="button" name="name" value="Pause">
<!-- 開始按鈕 -->
<input id="Start" type="button" name="name" value="Start">
<!-- 刷新(重新開始游戲) -->
<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è)置兩個變量
// 用于存儲行數(shù)和列數(shù)(即方格的個數(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)建一個二維數(shù)組,用來記錄地圖上的所有div的位置
var snakeDIVPosition = [];
// 通過雙層for循環(huán)來創(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)建一個行級數(shù)組,用來存儲當(dāng)前行中的每個方塊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)建一個一維數(shù)組,用來存儲蛇身所占的div
var snake = [];
// 固定蛇身起始長度為3個div
for ( var i = 0; i < 3; i++) {
// 為蛇身設(shè)置不同顏色的div
snakeDIVPosition[0][i].className = 'col activeSnake';
// 存儲在蛇身數(shù)組中
snake[i] = snakeDIVPosition[0][i];
}
// 定義變量來控制蛇
var x = 2;
var y = 0;// 蛇頭的起始位置偏移量
var scoreCount = 0;// 分?jǐn)?shù)計(jì)數(shù)器,即吃了多少個蛋
var eggX = 0;// 記錄蛋所在的行位置
var eggY = 0;// 記錄蛋所在的列位置;
var direction = 'right';// 記錄蛇移動的方向,初始為向右
var changeDir = true;// 判斷是否需要改變蛇的移動方向
var delayTimer = null;// 延遲定時(shí)器
// 添加鍵盤事件監(jiān)聽方向鍵來改變蛇的移動方向
document.onkeydown = function(event) {
// 先判斷是否需要改變方向,true表示需要,false表示不需要
if (!changeDir) {
return;// return空表示直接結(jié)束函數(shù),后續(xù)代碼不執(zhí)行
}
event = event || window.event;
// 為了合理處理蛇的移動,需要判斷蛇頭和蛇身
// 假設(shè)蛇向右移動,點(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;
}
// 我們通過keyCode確定蛇要移動的方向
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);
};
// 開始設(shè)置蛇移動邏輯
// 蛇移動函數(shù)
function snakeMove() {
// 根據(jù)上面設(shè)置的方向來設(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é)束蛇移動的定時(shí)器
clearInterval(moveTimer);
return;// 終止鍵盤事件;
}
// 如果蛇吃到自己,也要結(jié)束游戲
for ( var i = 0; i < snake.length; i++) {
// 將此時(shí)蛇頭移動后的位置與之前左右的組成蛇的div的位置進(jìn)行比較,如果相同則說明吃到自己,游戲結(jié)束
if (snake[i] == snakeDIVPosition[y][x]) {
alert('Game over!!!');
clearInterval(moveTimer);
return;
};
}
// 判斷蛇頭移動的位置是否有蛋
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)生一個新的蛋
createNewEgg();
} else {
// 設(shè)置蛇碰不到蛋的邏輯
// 讓蛇移動
// 蛇尾去掉蛇自身的顏色,變成格子的顏色
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);
// 定義一個生成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)生一個蛋
if (snakeDIVPosition[eggY][eggX].className == 'col activeSnake') {
createNewEgg();// 重新隨機(jī)新的egg
} else {
snakeDIVPosition[eggY][eggX].className = 'col egg';
}
};
createNewEgg();// 在游戲開始的時(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);
};
// 添加開始按鈕
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>
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于JS拆箱轉(zhuǎn)換的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
javascript實(shí)現(xiàn)的LI列表輸出，隔行同色的代碼
javascript實(shí)現(xiàn)的LI列表輸出，隔行同色的代碼...2007-10-10
js 剪切板應(yīng)用clipboardData詳細(xì)解析
本篇文章主要介紹了js剪切板應(yīng)用clipboardData。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JavaScript實(shí)現(xiàn)網(wǎng)頁頭部進(jìn)度條刷新
這篇文章主要介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁頭部進(jìn)度條刷新實(shí)例代碼，非常不錯，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-04-04
JS中不應(yīng)該使用箭頭函數(shù)的四種情況詳解
箭頭函數(shù)給我們的工作帶來了極大的方便，但是它們有什么缺點(diǎn)呢？我們應(yīng)該一直使用箭頭函數(shù)嗎？我們應(yīng)該在哪些場景中停止使用箭頭函數(shù)？本文就來為大家詳細(xì)講講2022-07-07
這篇文章主要介紹了淺析JavaScript對象轉(zhuǎn)換成原始值，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下，需要的朋友可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簽到功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
js replace(a,b)之替換字符串中所有指定字符的方法
下面小編就為大家?guī)硪黄猨s replace(a,b)之替換字符串中所有指定字符的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
Math對象中的方法很常用,來跟我一起看看吧,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Math對象相關(guān)知識全解的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
js實(shí)現(xiàn)帶翻轉(zhuǎn)動畫圖片時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶翻轉(zhuǎn)動畫的圖片時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04