用JavaScript实现贪吃蛇游戏

2023-07-14 04:47:03 63

本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下

地图

地图：宽，高，背景颜色，因为小蛇和食物都是相对于地图显示的，这里小蛇和食物都是地图的子元素，随机位置显示，脱离文档流的，地图也需要脱离文档流relative，----css需要设置：宽，高，背景颜色，脱标

食物—div元素

elements---->存储div的数组（将来删除的食物div时候，先从map中删除div，再从数组中移除div）
食物：宽，高，背景颜色，横坐标，纵坐标
一个食物就是一个对象，这个对象有相应的属性，这个对象需要在地图上显示
最终要创建食物的对象，先有构造函数，并且把相应的值作为参数传入到构造函数中
食物要想显示在地图上，食物的初始化就是一个行为

1、食物的构造函数—>创建食物对象
2、食物的显示的方法—>通过对象调用方法，显示食物，设置相应的样式
2.1.1因为食物要被小蛇吃掉，吃掉后应该再次出现食物，原来的食物就删除了
2.1.2每一次初始化食物的时候先删除原来的食物，然后重新的初始化食物
2.1.3通过一个私有的函数（外面不能调用的函数）删除地图上的食物，同时最开始的食物也相应的保存到一个数组中，再从这个数组中把食物删除

小蛇

小蛇就是一个对象
属性：每个身体都有宽、高、方向
属性：身体分三个部分，每个部分都是一个对象，每个部分都有横纵坐标，背景颜色
方法：小蛇要想显示在地图上，先删除之前的小蛇，然后再初始化小蛇（小蛇要移动）
移动思路：把小蛇的头的坐标给小蛇第一部分的身体，第一部分的身体的坐标给下一个部分身体小蛇的头，需要单独的设置：方向





Title

//自调用函数--食物
(function(){
varelements=[];//用来保存每个小方块元素
//创建小方块对象，需要先构造函数小方块有宽高颜色横纵坐标属性
functionFood(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（即小方块）
vardiv=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);
};

//私有的函数---删除食物
functionremove(){
for(vari=0;i0;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;
}

//判断有没有吃到食物
//获取小蛇的头和食物的坐标一致
varheadX=this.body[0].x*this.width;
varheadY=this.body[0].y*this.height;
//判断小蛇的头和食物的坐标是否相同
if(headX==food.x&&headY==food.y){
//获取小蛇的尾部
varlast=this.body[this.body.length-1];
//把最后一个尾巴复制加到body最后
this.body.push({
x:last.x,
y:last.y,
color:last.color
});
//把食物删除，重新初始化食物
food.init(map);
}
};

//删除小蛇的私有函数
functionremove(){
//获取数组
vari=elements.length-1;
for(;i>=0;i--){
//先从当前的子元素中找到该元素的父即元素，然后在删除这个子元素(i>=0因为包括头部)
varele=elements[i];
//从map地图上删除这个子元素
ele.parentNode.removeChild(ele);
//再删除数组中的每个元素
elements.splice(i,1);
}
}
}

//把Snake暴露给window
window.Snake=Snake;
}());

//自调用函数--游戏对象
(function(){
varthat=null;

//游戏的构造函数
functionGame(map){
this.food=newFood();//食物对象
this.snake=newSnake();//小蛇对象
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
vartimeID=setInterval(function(){
//移动小蛇
this.snake.move(food,map);
//初始化小蛇
this.snake.init(map);
//横坐标的最大值
varmaxX=map.offsetWidth/this.snake.width;
//纵坐标的最大值
varmaxY=map.offsetHeight/this.snake.height;
//小蛇的头部的坐标
varheadX=this.snake.body[0].x;
varheadY=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){
case37:this.snake.direction='left';break;
case38:this.snake.direction='top';break;
case39:this.snake.direction='right';break;
case40:this.snake.direction='bottom';break;
}
}.bind(that),false)
};

window.Game=Game;
}());

//实例化游戏对象
vargm=newGame(document.querySelector('.map'));
//初始化开始游戏
gm.init();


//实例化食物对象
//varfd=newFood();
//varmap=document.querySelector('.map');
//fd.init(map);
////实例化小蛇对象
//varsnake=newSnake();
//snake.init(map);//先在地图上看到小蛇
//setInterval(function(){
//snake.init(map);
//snake.move(fd,map);
//},150);

//snake.init(map);//先在地图上看到小蛇
//snake.move(fd,map);//走一步
//snake.init(map);//初始化--重新画一条小蛇（把之前的小蛇先删除，再把现在得小蛇显示出来）

更多有趣的经典小游戏实现专题，分享给大家：

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏玩不停

java经典小游戏汇总

javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

用JavaScript实现贪吃蛇游戏

热门推荐

随机推荐