目錄
效果展示
原理分析
Game.js檔案
Snake.js檔案
Food.js檔案
附上源代碼
寫了這么久的代碼
是否你和我一樣感到枯燥乏味了呢？
是否沒有前進的動力了呢？
別忘了當時的你躊躇滿志將前端Web一舉拿下的斗志啊！
今天博主要給大家展現一個好玩的游戲
貪吃蛇小游戲！
嘿，你可別小瞧這東西！
制作程序是從無到有
等做完它
你就能從中體會到比玩游戲還快樂的居然是打代碼!
效果展示
原理分析
我們制作前為了代碼更清晰就分成幾個js檔案來撰寫，
其中Game.js可以看作是一個媒介的作用；Snake.js是當蛇初始化時在最左邊向右走的狀態；
貪吃蛇在游戲中的運動可以想象成這條蛇是在一張25*25的表格中運動：
如圖所示
Game.js檔案
📝所以我們在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檔案
📝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.js檔案
📝食物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;
})());
}附上源代碼
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>貪吃蛇</title>
<style>
* {
padding: 0;
margin: 0;
}
#app {
position: relative;
border: 20px solid #f8bbd0;
background-color: #fce4ec;
width: 500px;
height: 500px;
margin: 15px auto;
}
table {
border-collapse: collapse;
background-color: #fce4ec;
}
td {
position: relative;
background-size: 100% 100%;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
/* background-color: #fce4ec; */
/* border: 1px solid #aaa; */
}
td .snake {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.start,
.suspend {
cursor: pointer;
position: absolute;
width: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.suspend {
display: none;
z-index: 2;
}
</style>
</head>
<body>
<!-- <h3 id="f">幀編號:0</h3>
<h3 id="score">分數：0</h3> -->
<div id="app">
<img src="img/start.gif" alt="" class="start">
<img src="img/stop.png" alt="" class="suspend">
</div>
<!-- <script src="js/last.js"></script> -->
<script src="Snake.js"></script>
<script src="Food.js"></script>
<script src="Game.js"></script>
<script>
var game = null;
var flag = true;
var suspend = document.querySelector('.suspend');
document.querySelector('.start').addEventListener('click', function() {
// document.querySelector('#app').style.backgroundColor='white';
this.style.display = 'none';
game = new Game();
document.querySelector('table').addEventListener('click', function() {
clearInterval(game.timer);
suspend.style.display = 'block';
})
suspend.addEventListener('click', function() {
suspend.style.display = 'none';
game.timer = setInterval(function() {
game.f++;
// document.getElementById('f').innerHTML = '幀編號：' + game.f;
// document.getElementById('score').innerHTML = '分數：' + game.score;
// 清屏
game.clear();
// 蛇的運動（更新）
// 蛇的更新速度，當蛇變長的時候，速度要加快
var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
game.f % during == 0 && game.snake.update();
// game.snake.update();
// 渲染蛇
game.snake.render();
// 渲染食物
game.food.render();
}, 10)
})
})
</script>
</body>
</html>Game.js
function Game() {
this.row = 25; // 行數
this.col = 25; // 列數
this.score = 0; //分數
this.init(); //初始化節點
this.snake = new Snake(); //實體化蛇類--系結到Game()中 原型鏈來找
this.food = new Food(this); //初始化食物
// this.last = new Last();
this.start(); //執行定時器任務
this.bindEvent(); //鍵盤的事件監聽
this.d = 'R';
}
//創建物件Game 里面寫上它的屬性（特征）↑
Game.prototype.init = function() {
this.dom = document.createElement('table');
// 創建表格--父元素為document（頁面中創建表格）
var tr, td;
// 遍歷行和列
for (var i = 0; i < this.row; i++) {
tr = document.createElement('tr'); // 創建行
for (var j = 0; j < this.col; j++) {
td = document.createElement('td'); // 創建列
tr.appendChild(td); // 把列追加到行
}
this.dom.appendChild(tr); // 把行追加到表格
}
document.querySelector('#app').appendChild(this.dom); //把表格追加到div里
}
// 遍歷表格，清除表格上的顏色(畫布上不停的渲染)
Game.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.background = '';
this.dom.getElementsByTagName('tr')[i].getElementsByTagName('td')[j].innerHTML = '';
}
}
}
// 設定顏色的方法 讓表格的第幾行，第幾列設定什么顏色
Game.prototype.setColor = function(row, col, color) {
this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].style.background = color;
}
// 設定蛇頭
Game.prototype.setColorHead = function(row, col) {
var img = document.createElement('img');
img.src = 'img/head.png';
img.className = 'snake';
this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].appendChild(img);
// this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].style.backgroundColor='transparent'
switch (this.d) {
case 'R': //右
break;
case 'D': //下
img.style.transform = 'rotate(90deg)';
break;
case 'L': //左
img.style.transform = 'rotate(180deg)';
break;
case 'U': //上
img.style.transform = 'rotate(-90deg)';
break;
}
}
// 渲染食物
Game.prototype.setHTML = function(row, col) {
this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].style.backgroundImage = 'url(./img/food.png)';
}
// 設定鍵盤的事件監聽
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;
}
})
}
Game.prototype.start = function() {
// 幀編號
this.f = 0;
// 定時器里面的核心就是游戲的渲染本質：清屏-更新-渲染
this.timer = setInterval(function() {
game.f++;
// document.getElementById('f').innerHTML = '幀編號：' + game.f;
// document.getElementById('score').innerHTML = '分數：' + game.score;
// 清屏
game.clear();
// 蛇的運動（更新）
// 蛇的更新速度，當蛇變長的時候，速度要加快
var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
game.f % during == 0 && game.snake.update();
// game.snake.update();
// 渲染蛇
game.snake.render();
// 渲染食物
game.food.render();
}, 10)
}Snake.js
function Snake() {
// 蛇的初始化身體
this.body = [
{ 'row': 3, 'col': 5 },
{ 'row': 3, 'col': 4 },
{ 'row': 3, 'col': 3 },
{ 'row': 3, 'col': 2 }
];
this.direction = 'R'; //信號量，設定運動方向
this.willDirection = 'R'; //即將改變的方向，目的就是為了方向出現原地調頭的情況
}
Snake.prototype.render = function() {
// 蛇頭的渲染
game.setColorHead(this.body[0].row, this.body[0].col);
// 蛇身的渲染
for (var i = 1; i < this.body.length; i++) {
game.setColor(this.body[i].row, this.body[i].col, '#649c49')
}
}
// 蛇的運動
Snake.prototype.update = function() {
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 'U': //上
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].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();
}
}
// 蛇吃食物
// 判斷如果當前的蛇的頭部沒有和食物進行重合，就代表此時沒有吃到食物，此時就進行尾部洗掉，如果重合了就代表遲到了，此時我們不進行洗掉尾部
// 判斷蛇身體的長度=食物的長度
if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) {
// 此時情況是只有頭部增加了，尾部沒有洗掉
game.food = new Food(game); //創建新的食物
game.score++;
game.f = 0;
} else {
this.body.pop(); //洗掉陣列最后一個元素
}
}
// 蛇的方向改變，防止的是在一次渲染之前會出現調頭的情況
Snake.prototype.changeDirection = function(d) {
this.willDirection = d;
}Food.js
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;
})());
}
Food.prototype.render = function() {
game.setHTML(this.row, this.col);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/403988.html
標籤：其他
上一篇：回憶小時候的貪吃蛇，你愛了嗎