这个贪吃蛇我是用面向对象做的，有关于面向对象知识的请看我另一篇文章
先看效果
完整代码
css代码我就不放了
html代码：
js代码：
function game() {
this.map=document.querySelector(’.map’)
this.span=document.querySelector(‘body>p>span’)
this.span1=document.querySelector(’.end span’)
this.start=document.querySelector(’.start’)
this.end=document.querySelector(’.end’)
this.ok=document.querySelector(’.ok’)
var that=this
//地图的宽高
this.mpcw=this.map.clientWidth //不带边框
this.mpch=this.map.clientHeight //不带边框
//点击方向键改变方向
document.οnkeydοwn=function(e){
var cod=e.keyCode
//w:87 a:65 s:83 d:68 ↑:38 ←:37 ↓:40 →:39
if(cod87 || cod38 ){
if(that.fx!=‘down’){
that.fx=‘up’
}
}else if(cod65 ||cod37){
if(that.fx!=‘right’){
that.fx=‘left’
}
}else if(cod83 || cod40){
if(that.fx!=‘up’){
that.fx=‘down’
}
}else if(cod68 || cod39){
if(that.fx!=‘left’){
that.fx=‘right’
}
}
}
//开始游戏
this.sta()
//游戏结束
this.ok.οnclick=function(){
that.en()
}
}
//开始游戏
game.prototype.sta=function(){
//初始化蛇
this.reset()
this.bd=[]
var that=this
this.start.style.display=‘block’
this.start.οnclick=function(){
that.start.style.display=‘none’
//创建食物
that.food()
//创建蛇
that.snake()
//蛇的移动
that.timer=setInterval(()=>{
that.fun()
},70)
}
}
//初始化
game.prototype.reset=function(){
this.arr=[
{x:this.mpcw/2, y:this.mpch/2},
{x:this.mpcw/2, y:this.mpch/2+10},
{x:this.mpcw/2, y:this.mpch/2+20},
]
this.fx=‘up’
this.timer=null
//分数
this.sp=0
this.span.innerText=this.sp
}
//设置样式
game.prototype.setStyle= function (elm,obj) {
for(var attr in obj){
elm.style[attr]=obj[attr];
}
}
//获取随机数
game.prototype.getRandom= function (a,b) {
var max=Math.max(a,b)
var min=Math.min(a,b)
return Math.round(Math.random()*(max-min)+min)
}
//创建食物
game.prototype.food=function(){
this.l=Math.round(this.getRandom(0,this.mpcw-10)/10)*10
this.t=Math.round(this.getRandom(0,this.mpch-10)/10)*10
this.fd=document.createElement(‘div’)
this.setStyle(this.fd,{
width:‘10px’,
height:‘10px’,
borderRadius:‘50%’,
background:‘green’,
position:‘absolute’,
left:this.l+‘px’,
top:this.t+‘px’,
})
this.map.appendChild(this.fd)
}
//创建蛇
game.prototype.snake=function(){
if(this.bd.length!=0){
for(var i=0;i<this.bd.length;i++){
this.map.removeChild(this.bd[i])
}
this.bd=[]
}
for(var i=0;i<this.arr.length;i++){
var div=document.createElement(‘div’)
this.setStyle(div,{
width:‘10px’,
height:‘10px’,
borderRadius:‘50%’,
background:‘black’,
position:‘absolute’,
left:this.arr[i].x+‘px’,
top:this.arr[i].y+‘px’,
})
if(i0){
div.style.background=‘red’
}
this.map.appendChild(div)
this.bd.push(div)
}
}
//蛇的移动
game.prototype.fun=function(){
for(var i=this.arr.length-1;i>0;i–){
this.arr[i].x=this.arr[i-1].x
this.arr[i].y=this.arr[i-1].y
}
switch(this.fx){
case ‘up’:this.arr[0].y-=10;
break;
case ‘down’:this.arr[0].y+=10;
break;
case ‘left’:this.arr[0].x-=10;
break;
case ‘right’:this.arr[0].x+=10;
break;
}
//位置变后重新创建蛇
this.snake()
//吃到食物
this.eat()
//死亡判断
this.die()
}
//吃到食物
game.prototype.eat=function(){
if(this.arr[0].xthis.l && this.arr[0].ythis.t){
this.map.removeChild(this.fd)
this.food()
this.sp+=1
this.span.innerText=this.sp
this.arr.push({x:this.arr[this.arr.length-1].x, y:this.arr[this.arr.length-1].y})
}
}
//死亡判断
game.prototype.die=function(){
//撞墙
if(this.arr[0].x<0 || this.arr[0].x>this.mpcw-this.fd.offsetWidth || this.arr[0].y<0 || this.arr[0].y>this.mpch-this.fd.offsetHeight){
this.died()
}
//撞身体
for(var i=1;i<this.arr.length;i++){
if(this.arr[0].xthis.arr[i].x && this.arr[0].y==this.arr[i].y){
this.died()
}
}
}
//死亡函数
game.prototype.died=function(){
clearInterval(this.timer)
this.end.style.display=‘block’
this.span1.innerText=this.sp
this.span1.style.color=‘red’
}
//游戏结束
game.prototype.en=function(){
this.end.style.display=‘none’
this.reset()
this.map.removeChild(this.fd)
this.start.style.display=‘block’
for(var i=0;i<this.bd.length;i++){
this.map.removeChild(this.bd[i])
}
this.bd=[]
}
var a=new game()
讲解一下这段代码
定义一个构造函数，然后new它
首先获取需要操作的标签
在两个不相关的函数之间不能互相访问局部变量，所以可以把变量添加为对象的属性
因为在事件函数里 this 指向的是事件源，所以要在外面定义一个变量that，将 this 赋值给 that ，然后在事件函数里就可以用 that 来进行相关操作
定义一个变量，根据按的方向键变为对应的值
还要判断不能掉头，如果是向左走就不能按右方向键
接下来实现各项功能，实现功能一般是给构造函数的原型添加方法，这样new出来的对象也可以调用，而且不会被其他全局变量覆盖
获取随机数和设置样式
首先添加一个获取随机数和设置样式的方法，为了后面写代码更方便
初始化
添加一个初始化的方法，蛇的位置，长度，方向还有分数等等
创建食物
食物是随机出现在地图上的，可以用到上面获取随机数和设置样式的方法，不能超出地图
创建蛇的身体
可以用初始化里的数组来创建身体，数组里面有几个对象身体就有几节，对象里放身体的坐标，初始化坐标在地图中间，代表蛇在地图中间出生
遍历数组创建身体
蛇的移动
蛇的移动就是改变身体的坐标，然后重新创建一个身体，并把之前的身体移除
将第二节身体的坐标给第三节，第一节的给第二节，第一节的坐标再加上一节身体的长度，就完成了移动
判断方向决定第一节的坐标变化
因为重新创建蛇后要移除上一条蛇，所以要在创建蛇的方法里改成先移除蛇，再创建蛇
然后给蛇的移动方法放进一个定时器里，每隔多久调用一次，这样就能“移动”了
吃到食物
吃到食物就是判断蛇头的坐标和食物坐标一样
吃到食物后，要移除食物，然后创建一个新的食物，并给创建身体的数组添加一个对象，坐标是蛇尾的坐标，这样下次创建身体就增加了一节
判断死亡
撞墙和撞身体会死，就是判断蛇头的坐标有没有超出地图，有没有和身体的坐标相同
死亡后要干什么也添加一个方法
要清除定时器等等
判断死亡条件成立就调用这个方法
因为吃食物和判断死亡都是在蛇的移动里的，所以把它们放进移动方法里去调用
这样各项功能就差不多完成了，然后定义一个点击开始按钮的方法，把这些功能放进去
然后点击游戏结束按钮也添加一个方法，打扫战场，移除蛇和食物，初始化什么的
在构造函数里面调用开始和结束就行了
点击方向键改变方向也可以定义成一个方法然后在这调用
然后代码整体就是这样
有不足的地方欢迎大佬指出来，一起交流交流！！
