2022-1-25 前端達(dá)人
寫了這么久的代碼
是否你和我一樣感到枯燥乏味了呢？
是否沒有前進(jìn)的動(dòng)力了呢？
別忘了當(dāng)時(shí)的你躊躇滿志將前端Web一舉拿下的斗志啊！
今天博主要給大家展現(xiàn)一個(gè)好玩的游戲
貪吃蛇小游戲！
嘿，你可別小瞧這東西！
制作過程是從無到有
等做完它
你就能從中體會(huì)到比玩游戲還快樂的居然是打代碼!
我們制作前為了代碼更清晰就分成幾個(gè)js文檔來編寫。
其中Game.js可以看作是一個(gè)媒介的作用；Snake.js是當(dāng)蛇初始化時(shí)在最左邊向右走的狀態(tài)；
貪吃蛇在游戲中的運(yùn)動(dòng)可以想象成這條蛇是在一張25*25的表格中運(yùn)動(dòng)：
如圖所示
所以我們?cè)贕ame.js中添加表格節(jié)點(diǎn)：
-
function Game() {
-
this.row = 25;
-
this.col = 25;
-
-
}
-
-
Game.prototype.init = function() {
-
this.dom = document.createElement('table');
-
// 創(chuàng)建表格--父元素為document（頁面中創(chuàng)建表格）
-
// var tr, td;
-
for (var i = 0; i < this.row; i++) { //追加行
-
var tr = document.createElement('tr');
-
for (var j = 0; j < this.td; j++) { //追加列
-
var td = document.createElement('col');
-
td.appendChild(tr);
-
}
-
}
-
};
Snake.js中當(dāng)蛇初始化時(shí)在最左邊向右走的狀態(tài)：
如圖所示
-
function Snake() {
-
// 蛇的初始化身體
-
this.body = [
-
{ 'row': 3, 'col': 5 },
-
{ 'row': 3, 'col': 4 },
-
{ 'row': 3, 'col': 3 },
-
{ 'row': 3, 'col': 2 }
-
];
-
}
-
Snake.prototype.render = function() {
-
// 蛇頭的渲染
-
game.setColorHead(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, 'cyan')
-
}
-
}
當(dāng)蛇在運(yùn)動(dòng)的時(shí)候它的原理是“頭增尾刪”。
因?yàn)樯叩拈L度先是不變的，而我們改變的也是改變這個(gè)四個(gè)格子的顏色，走一格頭部那一格顏色變?yōu)榉凵?，尾巴那一格的顏色變?yōu)榘咨?
接下來讓蛇通過我們按鍵來進(jìn)行運(yùn)動(dòng)：放在一個(gè)監(jiān)聽事件內(nèi)
-
// 設(shè)置鍵盤的事件監(jiān)聽
-
Game.prototype.bindEvent = function() {
-
var self = this;
-
document.addEventListener('keydown', function(e) {
-
// 用ASCII碼值判斷鍵盤方向
-
switch (e.keyCode) {
-
case 37: //左
-
if (self.snake.direction == 'R') return; // 先進(jìn)行判斷，如果當(dāng)前的方向是向右移動(dòng)，此時(shí)我們不能按左鍵
-
self.snake.changeDirection('L');
-
self.d = 'L';
-
break;
-
case 38: //上
-
if (self.snake.direction == 'D') return; // 先進(jìn)行判斷，如果當(dāng)前的方向是向下移動(dòng)，此時(shí)我們不能按上鍵
-
self.snake.changeDirection('U');
-
self.d = 'U';
-
break;
-
case 39: //右
-
if (self.snake.direction == 'L') return; // 先進(jìn)行判斷，如果當(dāng)前的方向是向左移動(dòng)，此時(shí)我們不能按右鍵
-
self.snake.changeDirection('R');
-
self.d = 'R';
-
break;
-
case 40: //下
-
if (self.snake.direction == 'U') return; // 先進(jìn)行判斷，如果當(dāng)前的方向是向上移動(dòng)，此時(shí)我們不能按下鍵
-
self.snake.changeDirection('D');
-
self.d = 'D';
-
break;
-
}
-
})
-
}
接下來我們判定蛇是否撞到墻而結(jié)束
-
// 死亡的判斷,超出了表格邊緣的部分
-
if (this.body[0].col > game.col - 1 || this.body[0].col < 0 || this.body[0].row > game.row - 1 || this.body[0].row < 0) {
-
alert('撞到墻了哦，一共吃掉了' + game.score + '顆草莓');
-
this.body.shift();
-
clearInterval(game.timer);
-
location.reload();
-
}
-
接下來我們判定蛇是否撞到自己而結(jié)束
-
// 自己撞到自己的時(shí)候會(huì)判定死亡
-
for (var i = 1; i < this.body.length; i++) {
-
// 如果當(dāng)前蛇的頭部和身體的某一個(gè)部位的 row 和 col 完全重合的時(shí)候
-
if (this.body[0].row == this.body[i].row && this.body[0].col == this.body[i].col) {
-
alert('撞到自己了,吃掉了' + game.score + '顆草莓');
-
this.body.shift();
-
clearInterval(game.timer);
-
location.reload();
-
}
-
}
食物food類，用來產(chǎn)生食物
-
function Food(gameSnake) {
-
// 食物的位置
-
this.row = parseInt(Math.random() * gameSnake.row)
-
this.col = parseInt(Math.random() * gameSnake.col)
-
}
-
Food.prototype.render = function() {
-
game.setHTML(this.row, this.col);
-
}
-
食物隨機(jī)生成在單元格中，利用do...while來實(shí)現(xiàn)
-
function Food(gameSnake) {
-
var self = this;
-
// 下面的 do-while 循環(huán)語句作用是先創(chuàng)建一個(gè) row 和 col
-
然后判斷這個(gè) row 和 col 是否在蛇的身上
-
//do...while來創(chuàng)建食物
-
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 (self.row == gameSnake.snake.body[i].row && self.col == gameSnake.snake.body[i].col) {
-
return true;
-
}
-
}
-
return false;
-
})());
-
}
文章來源：csdn 作者：實(shí)習(xí)期小潘
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wnxcall.com