用JavaScript實現貪吃蛇遊戲
阿新 • • 發佈：2020-10-13
本文例項為大家分享了JavaScript實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下
地圖
地圖：寬，高，背景顏色，因為小蛇和食物都是相對於地圖顯示的，這裡小蛇和食物都是地圖的子元素，隨機位置顯示，脫離文件流的，地圖也需要脫離文件流relative，----css需要設定：寬，高，背景顏色，脫標
食物—div元素
elements---->儲存div的陣列（將來刪除的食物div時候，先從map中刪除div，再從陣列中移除div）
食物：寬，高，背景顏色，橫座標，縱座標
一個食物就是一個物件，這個物件有相應的屬性，這個物件需要在地圖上顯示
最終要建立食物的物件，先有建構函式，並且把相應的值作為引數傳入到建構函式中
1、食物的建構函式—>建立食物物件
2、食物的顯示的方法—>通過物件呼叫方法，顯示食物，設定相應的樣式
2.1.1 因為食物要被小蛇吃掉，吃掉後應該再次出現食物，原來的食物就刪除了
2.1.2 每一次初始化食物的時候先刪除原來的食物，然後重新的初始化食物
2.1.3 通過一個私有的函式（外面不能呼叫的函式）刪除地圖上的食物，同時最開始的食物也相應的儲存到一個數組中，再從這個陣列中把食物刪除
小蛇
小蛇就是一個物件
屬性：每個身體都有寬、高、方向
屬性：身體分三個部分，每個部分都是一個物件，每個部分都有橫縱座標，背景顏色
方法：小蛇要想顯示在地圖上，先刪除之前的小蛇，然後再初始化小蛇（小蛇要移動）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.map {
width: 800px;
height: 600px;
background-color: #ccc;
position: relative;
}
</style>
</head>
<body>
<div class="map"></div>
<script src="貪吃蛇案例.js"></script>
</body>
</html>js
//自呼叫函式--食物
(function () {
var elements = [];//用來儲存每個小方塊元素
//建立小方塊物件，需要先建構函式 小方塊有寬高顏色 橫縱座標屬性
function Food(x,y,width,height,color) {
//小方塊的橫縱座標
this.x = x || 0;
this.y = y || 0;
//小方塊的寬高顏色
this.width = width || 20;
this.height = height || 20;
this.color = color || 'green';
}
//為原型新增初始化的方法（作用：在頁面上顯示食物）
//因為食物要在地圖上顯示這個食物，所以需要地圖這個引數（map--就是class=“.map”這個div）
Food.prototype.init = function (map) {
//先刪除這個小食物
//外部無法訪問到這個函式
remove();
//建立div（即小方塊）
var div = document.createElement("div");
//把div新增到地圖中
map.appendChild(div);
//設定div的樣式
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.backgroundColor = this.color;
//橫縱座標需要隨機產生 在這先停止
//使div小方塊脫離文件流
div.style.position = 'absolute';
//隨機產生橫縱座標
this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;
this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;
div.style.left = this.x + 'px';
div.style.top = this.y + 'px';
//把div加到陣列elements中
elements.push(div);
};
//私有的函式---刪除食物
function remove() {
for (var i = 0; i < elements.length; i++) {
var ele = elements[i];
//找到子元素的父元素，刪除這個子元素
ele.parentNode.removeChild(ele);
// 再次把elements中的子元素刪除
elements.splice(0,1);//從0位置開始刪除1個
}
}
//把food暴露給頂級物件，外部可以使用
window.Food = Food;
}());
//自呼叫函式--小蛇
(function () {
//放小蛇的每個部分
var elements = [];
//建立小蛇的建構函式
function Snake(width,direction) {
//小蛇每個部分的寬和高
this.width = width || 20;
this.height = height || 20;
//小蛇的身體
this.body = [
{x: 3,y: 2,color: 'red'},{x: 2,color: 'orange'},{x: 1,color: 'orange'}
];
//小蛇移動的方向
this.direction = direction || 'right';
//為原型新增初始化方法
Snake.prototype.init = function (map) {
//初始化前先刪除原來的小蛇
remove();
//迴圈遍歷建立div
for (var i = 0; i < this.body.length; i++) {
//陣列中的每個元素都是陣列物件
var obj = this.body[i];
//建立div
var div = document.createElement('div');
//把div新增到地圖上
map.appendChild(div);
//設定div的樣式
div.style.position = 'absolute';
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
//橫縱座標
div.style.left = obj.x * this.width + 'px';
div.style.top = obj.y * this.height + 'px';
//小蛇每個部分的顏色
div.style.backgroundColor = obj.color;
//把小蛇每部分加到陣列中
elements.push(div);
}
};
//為小蛇新增原型方法使小蛇移動
Snake.prototype.move = function (food,map) {
//先改變小蛇身體移動的位置
var i = this.body.length - 1;//2
for (; i > 0; i--) {
//i>0 就不包括頭部
this.body[i].x = this.body[i - 1].x;//讓第三部分身體的橫座標等於第二部分身體的橫座標
this.body[i].y = this.body[i - 1].y;//讓第三部分身體的縱座標等於第二部分身體的縱座標
}
//判斷方向--改變小蛇頭部的方向
switch (this.direction) {
case 'right':
this.body[0].x += 1;
break;
case 'left':
this.body[0].x -= 1;
break;
case 'top':
this.body[0].y -= 1;
break;
case 'bottom':
this.body[0].y += 1;
break;
}
//判斷有沒有吃到食物
// 獲取小蛇的頭和食物的座標一致
var headX=this.body[0].x*this.width;
var headY=this.body[0].y*this.height;
//判斷小蛇的頭和食物的座標是否相同
if(headX==food.x&&headY==food.y){
//獲取小蛇的尾部
var last=this.body[this.body.length-1];
//把最後一個尾巴複製加到body最後
this.body.push({
x:last.x,y:last.y,color:last.color
});
//把食物刪除，重新初始化食物
food.init(map);
}
};
//刪除小蛇的私有函式
function remove() {
//獲取陣列
var i = elements.length - 1;
for (; i >= 0; i--) {
//先從當前的子元素中找到該元素的父即元素，然後在刪除這個子元素 (i>=0因為包括頭部)
var ele = elements[i];
//從map地圖上刪除這個子元素
ele.parentNode.removeChild(ele);
//再刪除陣列中的每個元素
elements.splice(i,1);
}
}
}
//把Snake暴露給window
window.Snake = Snake;
}());
//自呼叫函式--遊戲物件
(function () {
var that = null;
//遊戲的建構函式
function Game(map) {
this.food = new Food();//食物物件
this.snake = new Snake();//小蛇物件
this.map = map;//地圖物件
that = this;
}
//原型物件新增遊戲初始化方法
Game.prototype.init = function () {
this.food.init(this.map);//食物初始化
this.snake.init(this.map);//初始化小蛇
//呼叫自動移動小蛇的方法
this.runSnake(this.food,this.map);
//小蛇移動後呼叫鍵盤方法
this.bindKey();
};
//原型物件新增小蛇自動移動的方法
Game.prototype.runSnake = function (food,map) {
//自動的去移動
//這裡的this指向window
var timeID = setInterval(function () {
//移動小蛇
this.snake.move(food,map);
//初始化小蛇
this.snake.init(map);
//橫座標的最大值
var maxX = map.offsetWidth / this.snake.width;
//縱座標的最大值
var maxY = map.offsetHeight / this.snake.height;
//小蛇的頭部的座標
var headX = this.snake.body[0].x;
var headY = this.snake.body[0].y;
if (headX < 0 || headX >= maxX) {
clearInterval(timeID);
alert('遊戲結束')
}
if (headY < 0 || headY >= maxY) {
clearInterval(timeID);
alert('遊戲結束')
}
}.bind(that),150)
};
//原型物件--設定使用者按鍵，是小蛇方向改變
Game.prototype.bindKey=function(){
//獲取使用者的按鍵，改變小蛇的方向
document.addEventListener('keydown',function(e){
//這裡的this應該是觸發keydown的事件物件---document
//所以這裡的this指的是document
switch(e.keyCode){
case 37:this.snake.direction='left';break;
case 38:this.snake.direction='top';break;
case 39:this.snake.direction='right';break;
case 40:this.snake.direction='bottom';break;
}
}.bind(that),false)
};
window.Game = Game;
}());
//例項化遊戲物件
var gm = new Game(document.querySelector('.map'));
//初始化開始遊戲
gm.init();
//例項化食物物件
// var fd = new Food();
// var map = document.querySelector('.map');
// fd.init(map);
// //例項化小蛇物件
// var snake = new Snake();
// snake.init(map);//先在地圖上看到小蛇
// setInterval(function () {
// snake.init(map);
// snake.move(fd,map);
// },150);
// snake.init(map);//先在地圖上看到小蛇
// snake.move(fd,map);//走一步
// snake.init(map);//初始化--重新畫一條小蛇（把之前的小蛇先刪除，再把現在得小蛇顯示出來）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。