JS實(shí)戰(zhàn)面向?qū)ο筘澇陨咝∮螒蚴纠?/h1>
更新時間：2021年12月02日 09:13:46 作者：四季奶青全糖去冰@
大家好，本篇文章主要講的是JS實(shí)戰(zhàn)面向?qū)ο筘澇陨咝∮螒蚴纠?，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下哦，方便下次瀏覽
思考
第一步思考蛇分為幾個部分，蛇頭和蛇身體是怎么形成的。
第二步思考蛇是怎么運(yùn)動的；如何通過鍵盤控制蛇的走向。
第三步思考游戲在什么情況下會結(jié)束。
第四步思考食物是怎么產(chǎn)生的，產(chǎn)生的位置和蛇的位置有什么需要注意的點(diǎn)。
第五步思考蛇是怎么吃到食物的；吃到后蛇的身體會變長，食物又會產(chǎn)生新的。
第六步做完以后多玩幾次，享受一下自己的勞動成果。?。。?/p>
一、貪吃蛇效果圖
二、貪吃蛇分析
2.1 開始游戲功能
當(dāng)用戶進(jìn)入游戲主界面時，可在界面中下方顯眼的位置找到“start”按鈕，點(diǎn)擊后用戶可進(jìn)行新游戲。獲取button變量，給它添加一個addEventListener('click', function() {})點(diǎn)擊事件。
btnstart.addEventListener('click', function() {
btnstart.style.display = 'none';
//調(diào)用中介類
game = new Game();
var table = document.querySelector('table');
table.addEventListener('click', function() {
//清除定時器
clearInterval(game.timer);
btnstop.style.display = 'block';
})
});
2.2 運(yùn)動功能
2.2.1 蛇的不同方向的運(yùn)動
當(dāng)用戶點(diǎn)擊”開始游戲“按鈕后，蛇的方向默認(rèn)從左到右方向移動。
//當(dāng)前的direction接受willDirection ?。?！
this.direction = this.willDirection;
//蛇的不同方向的運(yùn)動
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;
}
2.2.2 鍵盤控制方向運(yùn)動功能
用戶可通過使用鍵盤上的上下左右方位鍵控制蛇的移動方向，蛇在控制的方向上進(jìn)行直線前進(jìn)。
Game.prototype.bindEvent = function() {
var self = this;
//鍵盤事件
document.onkeydown = function(e) {
switch (e.keyCode) {
//按左鍵
case 37:
//先進(jìn)行判斷（如果當(dāng)前的方向是向右移動，此時我們不能按左鍵）
if (self.snake.direction == 'R') return;
// self.snake.direction = 'L';
self.snake.changeDirection('L');
self.d = "L";
break;
//按上鍵
case 38:
if (self.snake.direction == 'D') return;
self.snake.changeDirection('T');
self.d = "T";
break;
//按右鍵
case 39:
if (self.snake.direction == 'L') return;
self.snake.changeDirection('R');
self.d = "R";
break;
//按下鍵
case 40:
if (self.snake.direction == 'T') return;
self.snake.changeDirection('D');
self.d = "D";
break;
}
}
};
2.3 吃食物功能
2.3.1 食物的產(chǎn)生
食物的位置：遍歷蛇的row和col，然后和隨機(jī)生成的row和col進(jìn)行判斷是否重合。
var self = this; //指的是window
//下面的do-while循環(huán)語句作用是先創(chuàng)建一個row和col，在判斷這個是否在蛇身上
do {
//食物的位置
this.row = parseInt(Math.random() * gameSnake.row);
this.col = parseInt(Math.random() * gameSnake.col);
} while ((function() {
//遍歷蛇的row和col，然后和隨機(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;
})());
2.3.2 吃食物的過程
當(dāng)界面任意位置出現(xiàn)食物，用戶使用方位鍵控制蛇移動到食物周圍，當(dāng)蛇頭碰到食物時則表示貪吃蛇吃到此食物，界面上會在任意位置出現(xiàn)下一個食物，用戶再次控制蛇去吃這一食物。
//如果當(dāng)前蛇的頭部沒有和食物重合就代表沒有吃到食物，此時進(jìn)行尾部刪除；
if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) {
//如果重合了就代表吃到了，不進(jìn)行尾部刪除，只有頭部增加了
//創(chuàng)建新的食物
game.food = new Food(game);
//讓幀編號歸0，因?yàn)樯邥f一下
//吃到食物，加分?jǐn)?shù)
game.score++;
game.f = 0;
} else {
this.body.pop();
}
2.4 死亡判定功能
當(dāng)蛇頭在前進(jìn)方向上撞到墻壁或蛇頭吃到蛇身時，給出死亡判定，并彈框給出用戶本次游戲得分。
2.4.1 觸邊死亡判斷（撞墻了）
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 + '分');
this.body.unshift();
clearInterval(game.timer);
}
2.4.2?自己撞到自己
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 + '分');
clearInterval(game.timer);
}
}
2.5 暫停/繼續(xù)游戲功能
btnstop.addEventListener('click', function() {
btnstop.style.display = 'none';
game.timer = setInterval(function() {
// 定時器里面的核心就是游戲的渲染本質(zhì)，清屏-更新-渲染
game.f++;
// 清屏
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();
}, 20);
})
總結(jié)
貪吃蛇小游戲項(xiàng)目，需要理清楚思路。
到此這篇關(guān)于JS實(shí)戰(zhàn)面向?qū)ο筘澇陨咝∮螒蚴纠奈恼戮徒榻B到這了,更多相關(guān)JS貪吃蛇小游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
-
js前端加載超大圖片(100M以上)實(shí)現(xiàn)秒開的最佳解決方案
前端加載超大圖片時,一般可以采取圖片壓縮,圖片分割,預(yù)加載等措施,而對于幾百M(fèi)或上G的大圖而言,不管對圖片進(jìn)行怎么優(yōu)化或加速處理,要實(shí)現(xiàn)秒開也是不太可能的事情,所以本文小編將給大家介紹如何對大圖進(jìn)行分割,在前端進(jìn)行拼接實(shí)現(xiàn)秒開,需要的朋友可以參考下 2023-10-10
-
JavaScript模塊管理的簡單實(shí)現(xiàn)方式詳解
這篇文章主要介紹了JavaScript模塊管理的簡單實(shí)現(xiàn)方式,它方便組織你的代碼，提高項(xiàng)目的可維護(hù)性。一個項(xiàng)目的可維護(hù)性高不高，也體現(xiàn)一個程序員的水平，在如今越來越復(fù)雜的前端項(xiàng)目，這一點(diǎn)尤為重要。,需要的朋友可以參考下 2019-06-06
-
javascript中的Array對象(數(shù)組的合并、轉(zhuǎn)換、迭代、排序、堆棧)
Array?是javascript中經(jīng)常用到的數(shù)據(jù)類型。javascript?的數(shù)組其他語言中數(shù)組的最大的區(qū)別是其每個數(shù)組項(xiàng)都可以保存任何類型的數(shù)據(jù)。本文主要討論javascript中數(shù)組的聲明、轉(zhuǎn)換、排序、合并、迭代等等基本操作 2023-03-03
-
這篇文章主要介紹了JavaScript阻止表單提交方法,通過代碼示例講解了阻止表單提交需要注意的事項(xiàng)，以及onSubmit和check（）的區(qū)別寫法,需要的朋友可以參考下 2017-08-08
-
詳談js對url進(jìn)行編碼和解碼(三種方式的區(qū)別)
下面小編就為大家?guī)硪黄斦刯s對url進(jìn)行編碼和解碼(三種方式的區(qū)別)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 2017-08-08
-
這篇文章主要介紹了JS一次前端面試經(jīng)歷,結(jié)合具體案例形式分析了JS前端面試過程中遇到的問題以及響應(yīng)的注意事項(xiàng),需要的朋友可以參考下 2020-03-03
-
JS常用正則表達(dá)式總結(jié)。需要的朋友可以過來參考下，希望對大家有所幫助 2013-11-11
-
本文主要介紹了原生js仿淘寶網(wǎng)商品放大鏡效果的實(shí)例，具有很好的參考價值，下面跟著小編一起來看下吧 2017-02-02
-
這篇文章主要介紹了JavaScript小技巧整理篇(非常全)的相關(guān)資料,需要的朋友可以參考下 2016-01-01
-
javascript作用域容易記錯的兩個地方分析，學(xué)習(xí)js的朋友可以參考下 2012-06-06
最新評論
思考
第一步思考蛇分為幾個部分，蛇頭和蛇身體是怎么形成的。
第二步思考蛇是怎么運(yùn)動的；如何通過鍵盤控制蛇的走向。
第三步思考游戲在什么情況下會結(jié)束。
第四步思考食物是怎么產(chǎn)生的，產(chǎn)生的位置和蛇的位置有什么需要注意的點(diǎn)。
第五步思考蛇是怎么吃到食物的；吃到后蛇的身體會變長，食物又會產(chǎn)生新的。
第六步做完以后多玩幾次，享受一下自己的勞動成果。?。。?/p>
一、貪吃蛇效果圖
二、貪吃蛇分析
2.1 開始游戲功能
當(dāng)用戶進(jìn)入游戲主界面時，可在界面中下方顯眼的位置找到“start”按鈕，點(diǎn)擊后用戶可進(jìn)行新游戲。獲取button變量，給它添加一個addEventListener('click', function() {})點(diǎn)擊事件。
btnstart.addEventListener('click', function() {
btnstart.style.display = 'none';
//調(diào)用中介類
game = new Game();
var table = document.querySelector('table');
table.addEventListener('click', function() {
//清除定時器
clearInterval(game.timer);
btnstop.style.display = 'block';
})
});
2.2 運(yùn)動功能
2.2.1 蛇的不同方向的運(yùn)動
當(dāng)用戶點(diǎn)擊”開始游戲“按鈕后，蛇的方向默認(rèn)從左到右方向移動。
//當(dāng)前的direction接受willDirection ?。?！
this.direction = this.willDirection;
//蛇的不同方向的運(yùn)動
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;
}
2.2.2 鍵盤控制方向運(yùn)動功能
用戶可通過使用鍵盤上的上下左右方位鍵控制蛇的移動方向，蛇在控制的方向上進(jìn)行直線前進(jìn)。
Game.prototype.bindEvent = function() {
var self = this;
//鍵盤事件
document.onkeydown = function(e) {
switch (e.keyCode) {
//按左鍵
case 37:
//先進(jìn)行判斷（如果當(dāng)前的方向是向右移動，此時我們不能按左鍵）
if (self.snake.direction == 'R') return;
// self.snake.direction = 'L';
self.snake.changeDirection('L');
self.d = "L";
break;
//按上鍵
case 38:
if (self.snake.direction == 'D') return;
self.snake.changeDirection('T');
self.d = "T";
break;
//按右鍵
case 39:
if (self.snake.direction == 'L') return;
self.snake.changeDirection('R');
self.d = "R";
break;
//按下鍵
case 40:
if (self.snake.direction == 'T') return;
self.snake.changeDirection('D');
self.d = "D";
break;
}
}
};
2.3 吃食物功能
2.3.1 食物的產(chǎn)生
食物的位置：遍歷蛇的row和col，然后和隨機(jī)生成的row和col進(jìn)行判斷是否重合。
var self = this; //指的是window
//下面的do-while循環(huán)語句作用是先創(chuàng)建一個row和col，在判斷這個是否在蛇身上
do {
//食物的位置
this.row = parseInt(Math.random() * gameSnake.row);
this.col = parseInt(Math.random() * gameSnake.col);
} while ((function() {
//遍歷蛇的row和col，然后和隨機(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;
})());
2.3.2 吃食物的過程
當(dāng)界面任意位置出現(xiàn)食物，用戶使用方位鍵控制蛇移動到食物周圍，當(dāng)蛇頭碰到食物時則表示貪吃蛇吃到此食物，界面上會在任意位置出現(xiàn)下一個食物，用戶再次控制蛇去吃這一食物。
//如果當(dāng)前蛇的頭部沒有和食物重合就代表沒有吃到食物，此時進(jìn)行尾部刪除；
if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) {
//如果重合了就代表吃到了，不進(jìn)行尾部刪除，只有頭部增加了
//創(chuàng)建新的食物
game.food = new Food(game);
//讓幀編號歸0，因?yàn)樯邥f一下
//吃到食物，加分?jǐn)?shù)
game.score++;
game.f = 0;
} else {
this.body.pop();
}
2.4 死亡判定功能
當(dāng)蛇頭在前進(jìn)方向上撞到墻壁或蛇頭吃到蛇身時，給出死亡判定，并彈框給出用戶本次游戲得分。
2.4.1 觸邊死亡判斷（撞墻了）
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 + '分');
this.body.unshift();
clearInterval(game.timer);
}
2.4.2?自己撞到自己
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 + '分');
clearInterval(game.timer);
}
}
2.5 暫停/繼續(xù)游戲功能
btnstop.addEventListener('click', function() {
btnstop.style.display = 'none';
game.timer = setInterval(function() {
// 定時器里面的核心就是游戲的渲染本質(zhì)，清屏-更新-渲染
game.f++;
// 清屏
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();
}, 20);
})
總結(jié)
貪吃蛇小游戲項(xiàng)目，需要理清楚思路。
到此這篇關(guān)于JS實(shí)戰(zhàn)面向?qū)ο筘澇陨咝∮螒蚴纠奈恼戮徒榻B到這了,更多相關(guān)JS貪吃蛇小游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
-
js前端加載超大圖片(100M以上)實(shí)現(xiàn)秒開的最佳解決方案
前端加載超大圖片時,一般可以采取圖片壓縮,圖片分割,預(yù)加載等措施,而對于幾百M(fèi)或上G的大圖而言,不管對圖片進(jìn)行怎么優(yōu)化或加速處理,要實(shí)現(xiàn)秒開也是不太可能的事情,所以本文小編將給大家介紹如何對大圖進(jìn)行分割,在前端進(jìn)行拼接實(shí)現(xiàn)秒開,需要的朋友可以參考下2023-10-10 -
JavaScript模塊管理的簡單實(shí)現(xiàn)方式詳解
這篇文章主要介紹了JavaScript模塊管理的簡單實(shí)現(xiàn)方式,它方便組織你的代碼，提高項(xiàng)目的可維護(hù)性。一個項(xiàng)目的可維護(hù)性高不高，也體現(xiàn)一個程序員的水平，在如今越來越復(fù)雜的前端項(xiàng)目，這一點(diǎn)尤為重要。,需要的朋友可以參考下2019-06-06 -
javascript中的Array對象(數(shù)組的合并、轉(zhuǎn)換、迭代、排序、堆棧)
Array?是javascript中經(jīng)常用到的數(shù)據(jù)類型。javascript?的數(shù)組其他語言中數(shù)組的最大的區(qū)別是其每個數(shù)組項(xiàng)都可以保存任何類型的數(shù)據(jù)。本文主要討論javascript中數(shù)組的聲明、轉(zhuǎn)換、排序、合并、迭代等等基本操作2023-03-03 - 這篇文章主要介紹了JavaScript阻止表單提交方法,通過代碼示例講解了阻止表單提交需要注意的事項(xiàng)，以及onSubmit和check（）的區(qū)別寫法,需要的朋友可以參考下2017-08-08
-
詳談js對url進(jìn)行編碼和解碼(三種方式的區(qū)別)
下面小編就為大家?guī)硪黄斦刯s對url進(jìn)行編碼和解碼(三種方式的區(qū)別)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08 - 這篇文章主要介紹了JS一次前端面試經(jīng)歷,結(jié)合具體案例形式分析了JS前端面試過程中遇到的問題以及響應(yīng)的注意事項(xiàng),需要的朋友可以參考下2020-03-03
- JS常用正則表達(dá)式總結(jié)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
- 本文主要介紹了原生js仿淘寶網(wǎng)商品放大鏡效果的實(shí)例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
- 這篇文章主要介紹了JavaScript小技巧整理篇(非常全)的相關(guān)資料,需要的朋友可以參考下2016-01-01
- javascript作用域容易記錯的兩個地方分析，學(xué)習(xí)js的朋友可以參考下2012-06-06