贪食蛇游戏开发
本文详细介绍了使用HTML和JavaScript从零开始开发贪食蛇游戏的过程，包括地图绘制、食物生成、蛇的移动与增长等功能。
最近看教程写一个贪食蛇，总结一下
一、画地图
二、在地图上显示食物
三、在地图上显示蛇
四、让蛇动起来
五、当蛇吃到食物的时候，蛇变长，食物消失然后在地图上重新显示一个食物
一、画地图
先来一个地图的div
<div class="map"></div>
给地图添加样式
.map{
width: 1200px;
height: 800px;
background-color: #cccccc;
position: relative;
}
好~画完地图了~
二、将食物显示在地图上
先创建一个food.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"
//如果不传值都有默认值
}
//为原型添加初始化食物代码，需要一个地图参数
Food.prototype.init = function (map) {
//先创建一个食物的div
var div = document.createElement("div");
//将食物添加到地图中
map.appendChild(div);
//设置食物的样式
div.style.width = this.width + "px";
div.style.height = this.height + "px";
//设置食物的位置的时候，需要先让食物脱离文档流
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.style.backgroundColor = this.color;
//将食物存进数组中，将来删除使用
elements.push(div);
};
//将Food暴露给window
window.Food = Food;
}());
调用一下看看效果
var fd = new Food();
fd.init(document.querySelector(".map"));
随机食物显示出来了！
三、接下来要在地图上显示蛇了
先创建一个snake.js文件，然后上代码
//蛇的自调用函数
(function () {
//存放蛇的每个身体部分
var elements = [];
function Snake(width , height , direction) {
this.width = width || 20;
this.height = height || 20;
//蛇初始的位置和颜色
this.body = [
{x:3,y:2,color:"red"},
{x:2,y:2,color:"orange"},
{x:1,y:2,color:"orange"}
];
//蛇的方向
this.direction = direction || "right";
}
//为原型添加方法---蛇的初始化方法
Snake.prototype.init = function (map) {
//循环遍历创建蛇身体的div
for (var i = 0;i < this.body.length;i++){
//body数组中的每一个元素都是一个对象
var obj = this.body[i];
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.backgroundColor = obj.color;
//横纵坐标
div.style.left = obj.x * this.width + "px";
div.style.top = obj.y * this.height + "px";
//然后将div加入到elements数组中
elements.push(div);
}
};
//将Snake暴露给window
window.Snake = Snake;
}());
调用一下看看效果
var snake = new Snake();
snake.init(document.querySelector(".map"));
ok,蛇出来了，接下来就让蛇开始动起来~
四、让蛇动起来
先上代码，在snake.js中添加move方法
//为原型添加方法----蛇的移动
Snake.prototype.move = function(food,map){
//改变蛇身体的坐标位置
var i = this.body.length - 1;
for (; i > 0; i--) {
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;
}
};
这样蛇的位置已经是移动了一格的，但是页面还不能显示，因为还需要重新画一下蛇的位置
snake.move(fd,document.querySelector(".map"));
//在蛇移动后再重新画一下蛇的位置
snake.init(document.querySelector(".map"));
可以看到蛇往前移动了一步，但是出现了一个问题，就是蛇看起来自己变长了一格，其实蛇移动后，是重新画了一条蛇出来，之前的那条蛇没有删除，留在了原地，所以叠加起来就给人一种蛇变长的感觉，接下来要把之前的蛇删掉
在snake.js文件中加入代码
//删除小蛇的私有函数
function remove(){
//因为之前的蛇先暴露出来的是尾巴，所以要从尾巴先开始删除
var i = elements.length - 1;
for(;i >= 0;i--){
//先从当前元素找到该元素的父元素，然后再删除这个子元素
var ele =elements[i];
//从map上删除这个子元素
ele.parentNode.removeChild(ele);
//从数组中删掉这个元素
elements.splice(i, 1);
}
}
然后在蛇的初始化代码中调用remove方法
Snake.prototype.init = function (map) {
remove();
//循环遍历创建蛇身体的div
for (var i = 0;i < this.body.length;i++){
//body数组中的每一个元素都是一个对象
var obj = this.body[i];
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.backgroundColor = obj.color;
//横纵坐标
div.style.left = obj.x * this.width + "px";
div.style.top = obj.y * this.height + "px";
//然后将div加入到elements数组中
elements.push(div);
}
};
再刷新网页看一下结果
可以看到蛇往前走了一步并且身体没有变长
接下来要让蛇可以一直移动了，但是一直调用蛇move和init方法是非常傻的，所以加入setInterval，而且每次都要在外部写测试代码也很麻烦，所以直接把蛇和食物封装起来
创建game.js文件 上代码
//自调用函数----游戏对象
(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);
};
//添加原型方法---让小蛇自动跑起来
Game.prototype.runSnake = function(food,map){
//自动移动
var timeId = setInterval(function () {
//因为setInterval的this是window，所以在构造函数中将构造函数的this赋值给that,然后在setInterval用bind(that)
this.snake.move(food,map);
this.snake.init(map);
}.bind(that),150)
};
//将Game暴露给window
window.Game = Game;
}());
好了这样就不用写很多外部测试代码了，直接两句话
var game = new Game(document.querySelector(".map"));
game.init();
看看效果
蛇开始横向移动了，出现了新的问题，就是超过了墙蛇还是会继续移动，飞了！
接下来就让它跑不出这个墙！上代码！
//添加原型方法---让小蛇自动跑起来
Game.prototype.runSnake = function(food,map){
//自动移动
var timeId = setInterval(function () {
//因为setInterval的this是window，所以在构造函数中将构造函数的this赋值给that,然后在setInterval用bind(that)
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) {
switch (e.keyCode) {
case 37:
if (this.snake.direction !== "right") {
this.snake.direction = "left";
}
break;
case 38:
if (this.snake.direction !== "bottom") {
this.snake.direction = "top";
}
break;
case 39:
if (this.snake.direction !== "left") {
this.snake.direction = "right";
}
break;
case 40:
if (this.snake.direction !== "top") {
this.snake.direction = "bottom";
}
break;
}
}.bind(that),false);
//初始化游戏
Game.prototype.init = function () {
this.food.init(this.map);
this.snake.init(this.map);
this.runSnake(this.food,this.map);
//调用按键的方法
this.bindKey();
};
看看效果
蛇已经可以控制方向了，接下来就是当蛇碰撞到食物的时候，现有的食物消失，蛇变长一格，然后再创建一个新的食物
五、当蛇吃到食物的时候，蛇变长，食物消失然后在地图上重新显示一个食物
在snake.js 的move方法中加入代码
//判断有没有吃到食物
//小蛇的蛇头和食物的坐标一致
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.js添加remove私有方法
//私有函数---删除食物
function remove(){
for (var i = 0; i < elements.length; i++) {
var ele = elements[i];
ele.parentNode.removeChild(ele);
elements.splice(i, 1);
}
}
在food.js init方法中调用remove方法就可以删除食物并且新增食物
//为原型添加初始化食物代码，需要一个地图参数
Food.prototype.init = function (map) {
remove();
//先创建一个食物的div
var div = document.createElement("div");
//将食物添加到地图中
map.appendChild(div);
//设置食物的样式
div.style.width = this.width + "px";
div.style.height = this.height + "px";
//设置食物的位置的时候，需要先让食物脱离文档流
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.style.backgroundColor = this.color;
//将食物存进数组中，将来删除使用
elements.push(div);
};
在判断蛇吃到食物代码中加入food.init(map)就可以实现删除食物，新增食物
//判断有没有吃到食物
//小蛇的蛇头和食物的坐标一致
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);
}
看看效果
蛇已经可以吃食物了，但是又有一个新问题，蛇是可以吃自己的，所以还要加点判断，在撞墙判断后加上咬到自己判断
//咬到自己判断
for(var i = 1;i < this.snake.body.length;i++){
if (headX === this.snake.body[i].x && headY === this.snake.body[i].y){
clearInterval(timeId);
alert("游戏结束");
}
}
好看看效果
成功了~
OK，到现在整个贪吃蛇就结束了~
扫一扫
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
