JS實現(xiàn)貪吃蛇小游戲
頁面效果:
貪吃蛇游戲是中介者模式開發(fā)的,我們這個貪吃蛇案例不是像之前一樣都寫在一個HTML文件中,而是進(jìn)行了類的拆分,單獨(dú)js表示每一個類,中介類是Game類
一、初始化結(jié)構(gòu)
首先我們要進(jìn)行頁面的初始化,初始化布局不是直接寫html標(biāo)簽里面,而是通過game進(jìn)行初始化結(jié)點上樹
我們設(shè)置的是20行20列的表格,用this.row表示行,this.col表示列
Games.prototype.init = function () { this.dom = document.createElement('table'); var tr, td; //遍歷行和列上樹 for (var i = 0; i < this.row; i++) { // 遍歷行,創(chuàng)建結(jié)點上樹 tr = document.createElement('tr'); for (var j = 0; j < this.col; j++) { // 遍歷列,創(chuàng)建結(jié)點上樹 td = document.createElement('td'); // 追加結(jié)點上樹 tr.appendChild(td); // 追加結(jié)點上樹 this.dom.appendChild(tr); } } // 表格上樹 document.getElementById('app').appendChild(this.dom); }
實現(xiàn)效果:
二、渲染蛇的顏色?
渲染蛇的邏輯:蛇類調(diào)用Game類的setColor方法,因為本質(zhì)就是table表格渲染顏色,table表格在Game類初始化創(chuàng)建的,所以理因讓Game設(shè)置渲染顏色的方法
// 設(shè)置顏色的方法 Games.prototype.setColor = function (row, col, color) { // 讓表格的第幾行第幾列設(shè)置什么顏色 this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].style.backgroundColor = color; }
此時我們讓Snake類調(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'); } }
此時有一個問題,Snake的render誰來調(diào)用?用過我們Snake自己的構(gòu)造函數(shù)中調(diào)用得不到game,因為此時的Game類的四部走還沒有執(zhí)行完,所有現(xiàn)在是undefined
解決方法就是定時器去調(diào)用,因為定時器是異步的,所以不會阻止Game類的四部走
this.timer = setInterval(function () { // 定時器里面的核心就是游戲的渲染本質(zhì),清屏-更新-渲染 // 渲染蛇 game.snake.render(); }, 20);
實現(xiàn)效果:?
三、蛇的運(yùn)動
蛇的運(yùn)動其實就是蛇在進(jìn)行body數(shù)組的更新,本質(zhì)就是body數(shù)組中尾部刪除,頭部增加,所以蛇會渲染新的狀態(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; }
此時你會發(fā)現(xiàn)蛇會越來越長
是因為我們只是告訴了蛇如何渲染顏色,之前渲染過的我們需要擦除一下
我們給Game設(shè)置一個擦除屏幕的方法
// 清屏 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 = ''; } } }
接下來我們要在定時器中進(jìn)行游戲的三步走:清屏-更新和渲染
// 清屏 game.clear(); // 蛇的運(yùn)動/更新 // 蛇的更新速度 當(dāng)蛇邊長的時候,速度加快 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)動,可以給Game設(shè)置一個bindEvent事件,進(jìn)行鍵盤事件監(jiān)聽,改變不同方向,并且進(jìn)行判斷在蛇頭向下運(yùn)動的時候不能按上鍵等
Games.prototype.bindEvent = function () { var self = this; // 鍵盤事件 document.onkeydown = function (even) { switch (even.keyCode) { case 37: // 先進(jìn)行判斷,如果當(dāng)前的方向是向右移動,此時我們不能按左鍵 if (self.snake.direction == 'R') return; self.snake.changeDirection('L'); break; case 38: // 先進(jìn)行判斷,如果當(dāng)前的方向是向下移動,此時我們不能按上鍵 if (self.snake.direction == 'D') return; self.snake.changeDirection('T'); break; case 39: // 先進(jìn)行判斷,如果當(dāng)前的方向是向左移動,此時我們不能按右鍵 if (self.snake.direction == 'L') return; self.snake.changeDirection('R'); break; case 40: // 先進(jìn)行判斷,如果當(dāng)前的方向是向上移動,此時我們不能按下鍵 if (self.snake.direction == 'T') return; self.snake.changeDirection('D'); break; } } }
此時Snake類也必須有對應(yīng)的方向匹配,我們在Snake的初始化的時候設(shè)置一個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)建
此時我們創(chuàng)建一個Food類來產(chǎn)生食物,在Game中進(jìn)行實例化,在定時器中進(jìn)行渲染
我們在隨機(jī)生成食物的row和col的時候先判斷一下是否在蛇的身上
function Food(gameSnake) { var self = this; // 食物的位置 // do-while循環(huán)語句作用是先創(chuàng)建一個row和col然后判斷這個row和col是否在蛇的身上 do { this.row = parseInt(Math.random() * gameSnake.row); this.col = parseInt(Math.random() * gameSnake.col); } while ((function () { // 遍歷蛇的row和col 然后和Food新隨機(jī)出來的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, '?'); }
六、蛇吃食物邊長
蛇在運(yùn)動的時候會將數(shù)組body頭部添加一個元素,在尾部刪除一個元素,因此我們在蛇頭碰到食物之后只需要讓尾部不刪除就可以
if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) { // 創(chuàng)建新的食物 game.food = new Food(game); // 讓幀編號歸0 // 加分?jǐn)?shù) game.score++; game.f = 0; } else { this.body.pop(); }
蛇吃食物變快
我們設(shè)置一個幀編號,在碰到食物之前一直自增,然后讓蛇的更新速度隨著蛇的長度增長而增快
this.f = 0; game.f++; // 蛇的更新速度 當(dāng)蛇邊長的時候,速度加快 var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1; // 蛇的更新 game.f % during == 0 && game.snake.update(); // 渲染蛇
七、開始游戲功能
我們只需要寫一個按鈕在html里面然后通過定位將它放到合適的地方 ,給它一個點擊事件,只有我們點擊開始按鈕之后在執(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都給一個點擊事件,當(dāng)我們點擊table表格的時候停止按鈕顯現(xiàn)出來并且停止Game里面的定時器,當(dāng)我們點擊暫停按鈕之后就開啟定時器并讓它自己隱藏起來
btnstop.addEventListener('click', function () { btnstop.style.display = 'none'; game.timer = setInterval(function () { // 定時器里面的核心就是游戲的渲染本質(zhì),清屏-更新-渲染 game.f++; // document.getElementById('f').innerHTML = '幀編號:' + game.f; // // 渲染分?jǐn)?shù) // document.getElementById('score').innerHTML = '分?jǐn)?shù):' + game.score; // 清屏 game.clear(); // 蛇的運(yùn)動/更新 // 蛇的更新速度 當(dāng)蛇邊長的時候,速度加快 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實現(xiàn)貪吃蛇小游戲的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用JavaScript做一款無框架瀏覽器直接運(yùn)行的益智類數(shù)字棋牌小游戲
這篇文章主要介紹了使用JavaScript做一款無框架瀏覽器直接運(yùn)行的益智類數(shù)字棋牌小游戲,沒有使用任何游戲框架,就簡單使用HTML做布局,CSS做動畫,JavaScript做事件響應(yīng),需要的朋友可以參考下2023-03-03