JS實(shí)現(xiàn)貪吃蛇小游戲
頁(yè)面效果：
貪吃蛇游戲是中介者模式開(kāi)發(fā)的，我們這個(gè)貪吃蛇案例不是像之前一樣都寫(xiě)在一個(gè)HTML文件中，而是進(jìn)行了類(lèi)的拆分，單獨(dú)js表示每一個(gè)類(lèi)，中介類(lèi)是Game類(lèi)
一、初始化結(jié)構(gòu)
首先我們要進(jìn)行頁(yè)面的初始化，初始化布局不是直接寫(xiě)html標(biāo)簽里面，而是通過(guò)game進(jìn)行初始化結(jié)點(diǎn)上樹(shù)
我們?cè)O(shè)置的是20行20列的表格，用this.row表示行，this.col表示列
Games.prototype.init = function () {
this.dom = document.createElement('table');
var tr, td;
//遍歷行和列上樹(shù)
for (var i = 0; i < this.row; i++) {
// 遍歷行，創(chuàng)建結(jié)點(diǎn)上樹(shù)
tr = document.createElement('tr');
for (var j = 0; j < this.col; j++) {
// 遍歷列，創(chuàng)建結(jié)點(diǎn)上樹(shù)
td = document.createElement('td');
// 追加結(jié)點(diǎn)上樹(shù)
tr.appendChild(td);
// 追加結(jié)點(diǎn)上樹(shù)
this.dom.appendChild(tr);
}
}
// 表格上樹(shù)
document.getElementById('app').appendChild(this.dom);
}
實(shí)現(xiàn)效果：
二、渲染蛇的顏色?
渲染蛇的邏輯：蛇類(lèi)調(diào)用Game類(lèi)的setColor方法，因?yàn)楸举|(zhì)就是table表格渲染顏色，table表格在Game類(lèi)初始化創(chuàng)建的，所以理因讓Game設(shè)置渲染顏色的方法
// 設(shè)置顏色的方法
Games.prototype.setColor = function (row, col, color) {
// 讓表格的第幾行第幾列設(shè)置什么顏色
this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].style.backgroundColor = color;
}
此時(shí)我們讓Snake類(lèi)調(diào)用game的setColor方法
Snake.prototype.render = function () {
// 蛇的渲染
game.setColor(this.body[0].row, this.body[0].col, 'pink');
// 蛇的身體
for (var i = 1; i < this.body.length; i++) {
game.setColor(this.body[i].row, this.body[i].col, 'skyblue');
}
}
此時(shí)有一個(gè)問(wèn)題,Snake的render誰(shuí)來(lái)調(diào)用？用過(guò)我們Snake自己的構(gòu)造函數(shù)中調(diào)用得不到game，因?yàn)榇藭r(shí)的Game類(lèi)的四部走還沒(méi)有執(zhí)行完，所有現(xiàn)在是undefined
解決方法就是定時(shí)器去調(diào)用，因?yàn)槎〞r(shí)器是異步的，所以不會(huì)阻止Game類(lèi)的四部走
this.timer = setInterval(function () {
// 定時(shí)器里面的核心就是游戲的渲染本質(zhì)，清屏-更新-渲染
// 渲染蛇
game.snake.render();
}, 20);
實(shí)現(xiàn)效果：?
三、蛇的運(yùn)動(dòng)
蛇的運(yùn)動(dòng)其實(shí)就是蛇在進(jìn)行body數(shù)組的更新，本質(zhì)就是body數(shù)組中尾部刪除，頭部增加，所以蛇會(huì)渲染新的狀態(tài)
Snake.prototype.update = function () {
// 當(dāng)前的direction接收willdirection
this.direction = this.willDirection;
switch (this.direction) {
case 'R':
this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col + 1 });
break;
case 'D':
this.body.unshift({ 'row': this.body[0].row + 1, 'col': this.body[0].col });
break;
case 'L':
this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col - 1 });
break;
case 'T':
this.body.unshift({ 'row': this.body[0].row - 1, 'col': this.body[0].col });
break;
}
此時(shí)你會(huì)發(fā)現(xiàn)蛇會(huì)越來(lái)越長(zhǎng)
是因?yàn)槲覀冎皇歉嬖V了蛇如何渲染顏色，之前渲染過(guò)的我們需要擦除一下
我們給Game設(shè)置一個(gè)擦除屏幕的方法
// 清屏
Games.prototype.clear = function () {
for (var i = 0; i < this.row; i++) {
for (var j = 0; j < this.col; j++) {
this.dom.getElementsByTagName('tr')[i].getElementsByTagName('td')[j].style.backgroundColor = '#fff';
this.dom.getElementsByTagName('tr')[i].getElementsByTagName('td')[j].innerHTML = '';
}
}
}
接下來(lái)我們要在定時(shí)器中進(jìn)行游戲的三步走：清屏-更新和渲染
// 清屏
game.clear();
// 蛇的運(yùn)動(dòng)/更新
// 蛇的更新速度 當(dāng)蛇邊長(zhǎng)的時(shí)候，速度加快
var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
// 蛇的更新
game.f % during == 0 && game.snake.update();
// 渲染蛇
game.snake.render();
蛇在不同的方向進(jìn)行運(yùn)動(dòng)，可以給Game設(shè)置一個(gè)bindEvent事件，進(jìn)行鍵盤(pán)事件監(jiān)聽(tīng)，改變不同方向，并且進(jìn)行判斷在蛇頭向下運(yùn)動(dòng)的時(shí)候不能按上鍵等
Games.prototype.bindEvent = function () {
var self = this;
// 鍵盤(pán)事件
document.onkeydown = function (even) {
switch (even.keyCode) {
case 37:
// 先進(jìn)行判斷，如果當(dāng)前的方向是向右移動(dòng)，此時(shí)我們不能按左鍵
if (self.snake.direction == 'R') return;
self.snake.changeDirection('L');
break;
case 38:
// 先進(jìn)行判斷，如果當(dāng)前的方向是向下移動(dòng)，此時(shí)我們不能按上鍵
if (self.snake.direction == 'D') return;
self.snake.changeDirection('T');
break;
case 39:
// 先進(jìn)行判斷，如果當(dāng)前的方向是向左移動(dòng)，此時(shí)我們不能按右鍵
if (self.snake.direction == 'L') return;
self.snake.changeDirection('R');
break;
case 40:
// 先進(jìn)行判斷，如果當(dāng)前的方向是向上移動(dòng)，此時(shí)我們不能按下鍵
if (self.snake.direction == 'T') return;
self.snake.changeDirection('D');
break;
}
}
}
此時(shí)Snake類(lèi)也必須有對(duì)應(yīng)的方向匹配，我們?cè)赟nake的初始化的時(shí)候設(shè)置一個(gè)this.direction='R'
Snake.prototype.update = function () {
// 當(dāng)前的direction接收willdirection
this.direction = this.willDirection;
switch (this.direction) {
case 'R':
this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col + 1 });
break;
case 'D':
this.body.unshift({ 'row': this.body[0].row + 1, 'col': this.body[0].col });
break;
case 'L':
this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col - 1 });
break;
case 'T':
this.body.unshift({ 'row': this.body[0].row - 1, 'col': this.body[0].col });
break;
}
四、蛇死亡的判定方式 蛇有兩種判定死亡的方式
第一種就是蛇自己超出了表格部分
// 超出了表格邊緣的部分
if (this.body[0].col > game.col - 1 || this.body[0].row > game.row - 1 || this.body[0].col < 0 || this.body[0].row < 0) {
alert('游戲結(jié)束,您當(dāng)前的得分為' + game.score);
clearInterval(game.timer);
this.body.shift();
clearInterval(game.timer);
}
第二種就是蛇自己和身體的某一部位重合了
// 自己撞到自己
for (var i = 1; i < this.body.length; i++) {
if (this.body[0].col == this.body[i].col && this.body[0].row == this.body[i].row) {
alert('游戲結(jié)束,您當(dāng)前的得分為' + game.score);
this.body.shift();
clearInterval(game.timer);
}
}
五、食物的創(chuàng)建
此時(shí)我們創(chuàng)建一個(gè)Food類(lèi)來(lái)產(chǎn)生食物，在Game中進(jìn)行實(shí)例化，在定時(shí)器中進(jìn)行渲染
我們?cè)陔S機(jī)生成食物的row和col的時(shí)候先判斷一下是否在蛇的身上
function Food(gameSnake) {
var self = this;
// 食物的位置
// do-while循環(huán)語(yǔ)句作用是先創(chuàng)建一個(gè)row和col然后判斷這個(gè)row和col是否在蛇的身上
do {
this.row = parseInt(Math.random() * gameSnake.row);
this.col = parseInt(Math.random() * gameSnake.col);
} while ((function () {
// 遍歷蛇的row和col 然后和Food新隨機(jī)出來(lái)的row和col進(jìn)行判斷，是否重合
for (var i = 0; i < gameSnake.snake.body.length; i++) {
if (gameSnake.snake.body[i].row == self.row && gameSnake.snake.body[i].col == self.col) {
return true;
}
}
return false;
})())
console.log(this.row, this.col);
}
Food.prototype.render = function () {
game.setHTML(this.row, this.col, '?');
}
六、蛇吃食物邊長(zhǎng)
蛇在運(yùn)動(dòng)的時(shí)候會(huì)將數(shù)組body頭部添加一個(gè)元素，在尾部刪除一個(gè)元素，因此我們?cè)谏哳^碰到食物之后只需要讓尾部不刪除就可以
if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) {
// 創(chuàng)建新的食物
game.food = new Food(game);
// 讓幀編號(hào)歸0
// 加分?jǐn)?shù)
game.score++;
game.f = 0;
} else {
this.body.pop();
}
蛇吃食物變快
我們?cè)O(shè)置一個(gè)幀編號(hào)，在碰到食物之前一直自增，然后讓蛇的更新速度隨著蛇的長(zhǎng)度增長(zhǎng)而增快
this.f = 0;
game.f++;
// 蛇的更新速度 當(dāng)蛇邊長(zhǎng)的時(shí)候，速度加快
var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
// 蛇的更新
game.f % during == 0 && game.snake.update();
// 渲染蛇
七、開(kāi)始游戲功能
我們只需要寫(xiě)一個(gè)按鈕在html里面然后通過(guò)定位將它放到合適的地方 ，給它一個(gè)點(diǎn)擊事件，只有我們點(diǎn)擊開(kāi)始按鈕之后在執(zhí)行Game里面的代碼
<div id="app"></div>
<div class="startgame"><img src="images/btn1.gif" alt=""></div>
<div class="stopgame"><img src="images/btn4.png" alt=""></div>
<script>
var game = null;
var btnstart = document.querySelector('.startgame');
var btnstop = document.querySelector('.stopgame')
btnstart.addEventListener('click', function () {
btnstart.style.display = 'none';
game = new Games();
// console.log(table);
var table = document.querySelector('table');
table.addEventListener('click', function () {
clearInterval(game.timer);
btnstop.style.display = 'block';
})
八、暫停/繼續(xù)游戲功能
我們給暫停的按鈕和table都給一個(gè)點(diǎn)擊事件，當(dāng)我們點(diǎn)擊table表格的時(shí)候停止按鈕顯現(xiàn)出來(lái)并且停止Game里面的定時(shí)器，當(dāng)我們點(diǎn)擊暫停按鈕之后就開(kāi)啟定時(shí)器并讓它自己隱藏起來(lái)
btnstop.addEventListener('click', function () {
btnstop.style.display = 'none';
game.timer = setInterval(function () {
// 定時(shí)器里面的核心就是游戲的渲染本質(zhì)，清屏-更新-渲染
game.f++;
// document.getElementById('f').innerHTML = '幀編號(hào):' + game.f;
// // 渲染分?jǐn)?shù)
// document.getElementById('score').innerHTML = '分?jǐn)?shù):' + game.score;
// 清屏
game.clear();
// 蛇的運(yùn)動(dòng)/更新
// 蛇的更新速度 當(dāng)蛇邊長(zhǎng)的時(shí)候，速度加快
var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
// 蛇的更新
game.f % during == 0 && game.snake.update();
// 渲染蛇
game.snake.render();
// 渲染食物
game.food.render();
}, 10);
})
到此這篇關(guān)于JS實(shí)現(xiàn)貪吃蛇小游戲的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
打地鼠游戲代碼說(shuō)明，喜歡用js開(kāi)發(fā)游戲的朋友可以參考下。2010-10-10
這篇文章主要介紹了使用JS+CSS實(shí)現(xiàn)俄羅斯方塊游戲,使用簡(jiǎn)單的js+css就能在網(wǎng)頁(yè)實(shí)現(xiàn)俄羅斯方塊小游戲,感興趣的小伙伴快來(lái)看吧2023-04-04
本文詳細(xì)講解了JS實(shí)現(xiàn)貪吃蛇小游戲的過(guò)程，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11
JS模擬抽獎(jiǎng)序效果實(shí)現(xiàn)代碼
JS模擬抽獎(jiǎng)效果，聽(tīng)起來(lái)都很難以置信，如果你對(duì)抽獎(jiǎng)的要求不高，或許這個(gè)小小的抽獎(jiǎng)程序就能幫上您的大忙，因?yàn)樗娴暮軐?shí)用。我覺(jué)得還不錯(cuò)的網(wǎng)頁(yè)特效，按興趣的朋友可以參考下2012-12-12
基于JavaScript+CSS共同完成的一款小型網(wǎng)頁(yè)游戲，鉆石棋，具體玩法還不太懂，你在網(wǎng)上搜搜玩法，應(yīng)該比較有意思，一共有32個(gè)棋子。2010-03-03
圖片拼圖記憶力測(cè)試游戲，網(wǎng)頁(yè)+JS版
每次隨機(jī)給出一塊，在問(wèn)號(hào)區(qū)域中找到它的位置并單擊該位置。每選對(duì)一個(gè)區(qū)域得一分，得15分才算獲勝，每次游戲只有15次機(jī)會(huì)。2011-02-02
使用JavaScript做一款無(wú)框架瀏覽器直接運(yùn)行的益智類(lèi)數(shù)字棋牌小游戲
這篇文章主要介紹了使用JavaScript做一款無(wú)框架瀏覽器直接運(yùn)行的益智類(lèi)數(shù)字棋牌小游戲,沒(méi)有使用任何游戲框架，就簡(jiǎn)單使用HTML做布局，CSS做動(dòng)畫(huà)，JavaScript做事件響應(yīng),需要的朋友可以參考下2023-03-03