使用JavaScript實現(xiàn)貪吃蛇游戲
更新時間：2020年09月29日 17:00:05 作者：Cure The World
這篇文章主要為大家詳細(xì)介紹了使用JavaScript實現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)貪吃蛇游戲的具體代碼，供大家參考，具體內(nèi)容如下
index.html代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>貪吃蛇</title> <link rel="stylesheet" href="css/index.css" > </head> <body> <div id="map"> </div> <script src="js/tool.js"></script> <script src="js/food.js"></script> <script src="js/snake.js"></script> <script src="js/game.js"></script> <script src="js/main.js"></script> </body> </html>
index.css代碼如下
#map {
width: 600px;
height: 400px;
background-color: #ccc;
position: relative;
}
food.js代碼如下
//自調(diào)函數(shù) 開啟一個新的作用域，避免命名沖突
(function () {
//局部作用域
//記錄上一次創(chuàng)建的食物，為刪除做準(zhǔn)備
var elements=[];
var position = 'absolute';
//構(gòu)造函數(shù)Food
function Food(options) {
options = options || {};
this.color = options.color || 'green';
this.width = options.width || 20;
this.height = options.height || 20;
//食物的位置
this.x = options.x || 0;
this.y = options.y || 0;
}
//把食物渲染到map上
// prototype,每個函數(shù)都具有一個子對象prototype，prototype表示了該函數(shù)的原型
// prototype表示一個類屬性的集合。通過new來生成一個類的對象時，prototype對象的屬性就會變成實例化對象的屬性
Food.prototype.render = function (map) {
//刪除之前創(chuàng)建的食物
remove();
//動態(tài)創(chuàng)建div，顯示頁面上的食物
var div = document.createElement('div');
map.appendChild(div);
elements.push(div);
//隨機(jī)生成食物
this.x = Tool.getRandom(0,map.offsetWidth/this.width - 1)*this.width;
this.y = Tool.getRandom(0,map.offsetHeight/this.height - 1)*this.height;
//設(shè)置div樣式
div.style.position = position; //脫離文檔流
div.style.background = this.color;
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.left = this.x + 'px';
div.style.top = this.y + 'px';
};
function remove() {
for (var i = elements.length-1;i >= 0;i-- ){
//刪除div
elements[i].parentNode.removeChild(elements[i]);
//刪除數(shù)組元素
elements.splice(i,1); //第一個參數(shù)，從哪個元素開始 第二個參數(shù)，刪除幾個元素
}
}
//把Food構(gòu)造函數(shù) 讓外部可以訪問
window.Food = Food;
})()
//測試
// var map = document.getElementById('map');
// var food = new Food(); //這里的Food就是window.Food
// food.render(map);
snake.js代碼如下
(function () {
var position = 'absolute';
//記錄之前創(chuàng)建的蛇
var elements = [];
function Snake(options) {
options = options || {};
//蛇節(jié)的大小
this.width = options.width || 20;
this.height = options.height || 20;
//蛇移動的方向
this.direction = options.direction || 'right';
//蛇身體（蛇節(jié)） 第一個元素是蛇頭
this.body = [
{x: 5, y: 2, color: 'red'},
{x: 4, y: 2, color: 'blue'},
{x: 3, y: 2, color: 'blue'},
{x: 2, y: 2, color: 'blue'},
{x: 1, y: 2, color: 'blue'}
];
}
Snake.prototype.render = function (map) {
//刪除之前創(chuàng)建的蛇
remove();
//把每一蛇節(jié)渲染到地圖上
for (var i = 0,len = this.body.length; i<len; i++){
//蛇節(jié)
var object = this.body[i];
var div = document.createElement('div');
map.appendChild(div);
//記錄當(dāng)前蛇
elements.push(div);
//設(shè)置樣式
div.style.position = position;
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.left = object.x * this.width + 'px';
div.style.top = object.y * this.height + 'px';
div.style.backgroundColor = object.color;
}
}
//控制蛇移動的方法
Snake.prototype.move = function (food,map) {
//控制蛇的身體移動 (當(dāng)前蛇節(jié) 到 上一蛇節(jié)的位置)
for (var i = this.body.length - 1;i > 0;i--){
this.body[i].x = this.body[i - 1].x;
this.body[i].y = this.body[i - 1].y;
}
//控制蛇頭的移動
//判斷蛇移動的方向
var head = this.body[0];
switch (this.direction){
case 'right':
head.x += 1;
break;
case 'left':
head.x -=1;
break;
case 'top':
head.y -=1;
break;
case 'bottom':
head.y +=1;
}
//2.4判斷蛇頭是否和食物重合
var headX = head.x * this.width;
var headY = head.y * this.height;
if (headX === food.x && headY === food.y){
//讓蛇增加一節(jié)
//獲取蛇的最后一節(jié)
var last = this.body[this.body.length - 1];
this.body.push({
x:last.x,
y:last.y,
color:last.color
})
//隨機(jī)在地圖上重新生成食物
food.render(map);
}
}
function remove() {
for (var i = elements.length -1;i>= 0;i--){
//刪除div
elements[i].parentNode.removeChild(elements[i]);
//刪除數(shù)組中的元素
elements.splice(i,1);
}
}
//暴露構(gòu)造函數(shù)給外部
window.Snake = Snake;
})()
//測試
// var map =document.getElementById('map');
// var sanke = new Snake();
// sanke.render(map);
game.js代碼如下
//使用自調(diào)函數(shù)，創(chuàng)建一個新的局部作用域，防止命名沖突
(function () {
function Game(map) {
this.food = new Food();
this.snake = new Snake();
this.map = map;
that=this;
}
Game.prototype.start = function () {
//1.把蛇和食物對象渲染到地圖上
this.food.render(this.map);
this.snake.render(this.map);
//2.開始游戲邏輯
//2.1 讓蛇移動起來
//2.2當(dāng)蛇遇到邊界游戲結(jié)束
runSnake();
//2.3通過鍵盤控制蛇移動的方向
bindKey();
//2.4當(dāng)蛇遇到食物 做相應(yīng)的處理
}
function bindKey() {
document.onkeydown = function (e) {
switch (e.keyCode){
case 37:
if (that.snake.direction === 'right') return;
that.snake.direction = 'left';
break;
case 38:
if (that.snake.direction === 'bottom') return;
that.snake.direction = 'top';
break;
case 39:
if (that.snake.direction === 'left') return;
that.snake.direction = 'right';
break;
case 40:
if (that.snake.direction === 'top') return;
that.snake.direction = 'bottom';
break;
}
}
}
//
function runSnake() {
var timerId = setInterval(function () {
//讓蛇走一格
//在定時器中的function中this是指向window對象的
that.snake.move(that.food,that.map);
that.snake.render(that.map);
//2.2當(dāng)蛇遇到邊界游戲結(jié)束
var maxX = that.map.offsetWidth / that.snake.width;
var maxY = that.map.offsetHeight / that.snake.height;
//獲取蛇頭的坐標(biāo)
var headX = that.snake.body[0].x;
var headY = that.snake.body[0].y;
if (headX <0 || headX>=maxX){
alert('Game Over');
clearInterval(timerId);
}
if (headY <0 || headY >= maxY){
alert('Game Over');
clearInterval(timerId);
}
for (var i = that.snake.body.length - 1;i > 0;i--){
if (headX == that.snake.body[i].x && headY == that.snake.body[i].y){
alert('Game Over');
clearInterval(timerId);
break;
}
}
},300)
}
//暴露構(gòu)造函數(shù)給外部
window.Game = Game;
})()
// //測試
// var map =document.getElementById('map');
// var game = new Game(map);
// game.start();
main.js代碼如下
(function () {
var map =document.getElementById('map');
var game = new Game(map);
game.start();
})()
Tool.js代碼如下
// 工具對象
(function () {
var Tool = {
getRandom: function (min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
window.Tool = Tool;
})()
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序把百度地圖坐標(biāo)轉(zhuǎn)換成騰訊地圖坐標(biāo)過程詳解
這篇文章主要介紹了微信小程序把百度地圖坐標(biāo)轉(zhuǎn)騰訊地圖坐標(biāo)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
這篇文章主要給大家總結(jié)了關(guān)于微信小程序開發(fā)中的各種疑問解答，文中將在微信小程序開發(fā)中可能遇到的問題都進(jìn)行了整理和解答，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07
javascript實現(xiàn)日期三級聯(lián)動下拉框選擇菜單
這篇文章主要介紹了javascript實現(xiàn)日期三級聯(lián)動下拉框選擇菜單，實現(xiàn)JS年月日三級聯(lián)動下拉框選擇功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
JavaScript字符串處理之trim()和replace()詳解
這篇文章主要給大家介紹了關(guān)于JavaScript字符串處理之trim()和replace()的相關(guān)資料,文中介紹的所有這些方法都不會修改原始字符串,而是返回一個新的字符串,需要的朋友可以參考下2024-10-10
JavaScript基礎(chǔ)之this和箭頭函數(shù)詳析
這篇文章主要給大家介紹了關(guān)于JavaScript基礎(chǔ)之this和箭頭函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
js樹形菜單全選2008-07-07
之前只知道eval可以解析字符串，剛剛網(wǎng)上看了又了解了一點，這里貼出來，不懂的也看看哈2012-07-07
這篇文章主要介紹了JavaScript實現(xiàn)的伸展收縮型菜單代碼,可實現(xiàn)JavaScript響應(yīng)鼠標(biāo)事件動態(tài)遍歷及修改頁面元素屬性的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
Three.js是一款運(yùn)行在瀏覽器中的3D引擎,你可以用它創(chuàng)建各種三維場景,包括了攝影機(jī)、光影、材質(zhì)等各種對象,下面這篇文章主要給大家介紹了關(guān)于如何在微信小程序中使用three.js的保姆級教程,需要的朋友可以參考下2023-03-03
今天小編就為大家分享一篇zepto.js 實時監(jiān)聽輸入框的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-12-12