2022-1-25 前端達人
寫了這么久的代碼
是否你和我一樣感到枯燥乏味了呢？
是否沒有前進的動力了呢？
別忘了當時的你躊躇滿志將前端Web一舉拿下的斗志??！
今天博主要給大家展現一個好玩的游戲
貪吃蛇小游戲！
嘿，你可別小瞧這東西！
制作過程是從無到有
等做完它
你就能從中體會到比玩游戲還快樂的居然是打代碼!
我們制作前為了代碼更清晰就分成幾個js文檔來編寫。
其中Game.js可以看作是一個媒介的作用；Snake.js是當蛇初始化時在最左邊向右走的狀態；
貪吃蛇在游戲中的運動可以想象成這條蛇是在一張25*25的表格中運動：
如圖所示
所以我們在Game.js中添加表格節點：
-
function Game() {
-
this.row = 25;
-
this.col = 25;
-
-
}
-
-
Game.prototype.init = function() {
-
this.dom = document.createElement('table');
-
// 創建表格--父元素為document（頁面中創建表格）
-
// 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中當蛇初始化時在最左邊向右走的狀態：
如圖所示
-
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')
-
}
-
}
當蛇在運動的時候它的原理是“頭增尾刪”。
因為蛇的長度先是不變的，而我們改變的也是改變這個四個格子的顏色，走一格頭部那一格顏色變為粉色，尾巴那一格的顏色變為白色。
接下來讓蛇通過我們按鍵來進行運動：放在一個監聽事件內
-
// 設置鍵盤的事件監聽
-
Game.prototype.bindEvent = function() {
-
var self = this;
-
document.addEventListener('keydown', function(e) {
-
// 用ASCII碼值判斷鍵盤方向
-
switch (e.keyCode) {
-
case 37: //左
-
if (self.snake.direction == 'R') return; // 先進行判斷，如果當前的方向是向右移動，此時我們不能按左鍵
-
self.snake.changeDirection('L');
-
self.d = 'L';
-
break;
-
case 38: //上
-
if (self.snake.direction == 'D') return; // 先進行判斷，如果當前的方向是向下移動，此時我們不能按上鍵
-
self.snake.changeDirection('U');
-
self.d = 'U';
-
break;
-
case 39: //右
-
if (self.snake.direction == 'L') return; // 先進行判斷，如果當前的方向是向左移動，此時我們不能按右鍵
-
self.snake.changeDirection('R');
-
self.d = 'R';
-
break;
-
case 40: //下
-
if (self.snake.direction == 'U') return; // 先進行判斷，如果當前的方向是向上移動，此時我們不能按下鍵
-
self.snake.changeDirection('D');
-
self.d = 'D';
-
break;
-
}
-
})
-
}
接下來我們判定蛇是否撞到墻而結束
-
// 死亡的判斷,超出了表格邊緣的部分
-
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();
-
}
-
接下來我們判定蛇是否撞到自己而結束
-
// 自己撞到自己的時候會判定死亡
-
for (var i = 1; i < this.body.length; i++) {
-
// 如果當前蛇的頭部和身體的某一個部位的 row 和 col 完全重合的時候
-
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類，用來產生食物
-
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);
-
}
-
食物隨機生成在單元格中，利用do...while來實現
-
function Food(gameSnake) {
-
var self = this;
-
// 下面的 do-while 循環語句作用是先創建一個 row 和 col
-
然后判斷這個 row 和 col 是否在蛇的身上
-
//do...while來創建食物
-
do {
-
// 食物的位置
-
this.row = parseInt(Math.random() * gameSnake.row)
-
this.col = parseInt(Math.random() * gameSnake.col)
-
} while ((function() {
-
// 遍歷蛇的 row col 然后和 food 新隨機出來的 row col 進行判斷，是否重合
-
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 作者：實習期小潘
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn