Gluttonous Snake.js

Posted 2020-12-19 Smile*^

//面向对象开发
//创建方格
var sw=20, //小方格的宽
sh=20, //小方格的高
tr=30, //行数
td=30; //列数
//蛇的实例
var snake = null,
//食物的实例
food=null,
//游戏的实例
game=null;
// 构造函数
// x 横坐标 y 纵坐标 classname类名
function Square(x,y,classname){
/*
(0,0)-----(0,0)
(20,0)-----(1,0)
(40,0)-----(2,0)
*/
//转化单位
this.x=x*sw;
this.y=y*sh;
// classname 属性
this.class=classname;
//创建div 相当于小方块
this.viewContent=document.createElement(‘div‘);
//给div添加类名
this.viewContent.className=this.class;
//获取方块父级元素
this.parent=document.getElementById(‘snakeWarp‘);
}
//创建方块Dom
Square.prototype.create=function(){
//使小方块绝对定位
this.viewContent.style.position=‘absolute‘;
this.viewContent.style.width=sw+‘px‘;
this.viewContent.style.height=sh+‘px‘;
this.viewContent.style.left=this.x+‘px‘;
this.viewContent.style.top=this.y+‘px‘;
this.parent.appendChild(this.viewContent);
};
//删除小方格
Square.prototype.remove=function(){
this.parent.removeChild(this.viewContent);
};

//蛇
function Snake(){
// 存储蛇头
this.head=null;
// 存储蛇尾
this.tail=null;
//储存蛇身上的每一个方块的位置
this.pos=[];
//储存蛇走的方向
this.directionNum={
//x坐标轴
left:{
x:-1,
y:0
},
right:{
x:1,
y:0
},
//y坐标轴
up:{
x:0,
y:-1
},
down:{
x:0,
y:1
},

}
}
//蛇的初始化 init
Snake.prototype.init=function(){
//创建蛇头
var snakeHead=new Square(2,0,‘snakeHead‘);
snakeHead.create();
//存储舌头信息
this.head=snakeHead;
//把蛇头位置存起来
this.pos.push([2,0]);


//创建蛇身体1
var snakeBody1 = new Square(1,0,‘snakeBody‘);
snakeBody1.create();
//把蛇身体1位置存起来
this.pos.push([1,0]);

//创建蛇身体2
var snakeBody2 = new Square(0,0,‘snakeBody‘);
snakeBody2.create();
//将蛇尾信息存储起来
this.tail=snakeBody2;
this.pos.push([0,0]);

//形成链表关系
//null表示没有
snakeHead.last=null;
snakeHead.next=snakeBody1;

snakeBody1.last=snakeHead;
snakeBody1.next=snakeBody2;

snakeBody2.last=snakeBody1;
snakeBody2.next=null;

//给蛇添加一条属性，用来表示蛇走的方向
this.direction=this.directionNum.right; //默认向右走

};

//这个方法用来获取蛇头的下一个位置对应的元素，要根据元素做不同的事情
Snake.prototype.getNextPos=function(){
var nextPos=[
this.head.x/sw+this.direction.x,
this.head.y/sw+this.direction.y
]

//下一个点是自己，代表撞到自己，游戏结束
var selfCollied=false;
// forEach 对数组中的数进行遍历
this.pos.forEach(function(value){
if(value[0]==nextPos[0]&&value[1]==nextPos[1]){
//如果数组下面的两个数据都相等，就说下一个点在蛇身上可以找到，撞到自己了
selfCollied=true;
}
});
if(selfCollied){
console.log(‘撞到自己了‘);
this.startegies.die.call(this);
return;
}

// 下一个点是围墙 游戏结束
if(nextPos[0]<0||nextPos[1]<0||nextPos[0]>td-1||nextPos[1]>tr-1){
console.log(‘撞墙了‘)
this.startegies.die.call(this);
return;
}

// 下一个点是食物 吃
if(food&&food.pos[0]==nextPos[0]&&food.pos[1]==nextPos[1]){
//如果这个条件成立说明现在蛇头要走的下一个点是食物那个点
this.startegies.eat.call(this);
return;
}

// 下一个点什么都不是 走
this.startegies.move.call(this);

};

//处理碰撞后要做的事情
Snake.prototype.startegies={
//format判断要不要删除 如果传了，表示吃
move:function(format){
// 创建新身体（在旧蛇头的位置）
var newBody=new Square(this.head.x/sw,this.head.y/sh,‘snakeBody‘);
// 更新链表关系
newBody.next=this.head.next;
newBody.next.last=newBody;
newBody.last=null;

//干掉旧蛇头
this.head.remove();
//添加新身体
newBody.create();

// 创建新蛇头
var newHead = new Square(this.head.x/sw+this.direction.x,this.head.y/sw+this.direction.y,‘snakeHead‘);
newHead.next=newBody;
newHead.last=null;
newBody.last=newHead;
newHead.create();
// 蛇身上的每一个方块的坐标也需要更新
// 在数组前面插入
this.pos.splice(0,0,[this.head.x/sw+this.direction.x,this.head.y/sw+this.direction.y]);
this.head=newHead; //更新this.head
//如果format为false则需要删除
if(!format){
this.tail.remove();
this.tail=this.tail.last;
//删掉数组最后一个元素
this.pos.pop();
}
},
eat:function(){
this.startegies.move.call(this,true);
createFood();
game.score++;

},
die:function(){
// console.log(‘撕了‘);
game.over();
}
}

snake=new Snake();


//创建食物
function createFood(){
//食物小方块的随机坐标
var x=null;
var y=null;
var include=true;
while(include){
x=Math.round(Math.random()*(td-1));
y=Math.round(Math.random()*(tr-1));
snake.pos.forEach(function(value){
//这个条件表示 当前随机出来的坐标并没有在蛇身上找到
if(x!=value[0]&&y!=value[1]){
include=false;
}
});
}
//生成食物
food=new Square(x,y,‘food‘);
//存储食物的坐标，用于跟蛇头要走的下一个点做对比
food.pos=[x,y];
//解决食物重复出现的问题
var foodDom = document.querySelector(‘.food‘);
if(foodDom){
foodDom.style.left=x*sw+‘px‘;
foodDom.style.top=y*sh+‘px‘;
}else{
food.create();
}

}

//创建游戏逻辑
function Game(){
this.timer=null;
this.score=0;

}
Game.prototype.init=function(){
snake.init();
// snake.getNextPos();
createFood();
document.onkeydown=function(ev){
//用户按下左键的时候，这条蛇不能是正下往右走
if(ev.which==37&&snake.direction!=snake.directionNum.right){
snake.direction=snake.directionNum.left;
}else if(ev.which==38&&snake.direction!=snake.directionNum.down){
snake.direction=snake.directionNum.up;
}else if(ev.which==39&&snake.direction!=snake.directionNum.left){
snake.direction=snake.directionNum.right;
}else if(ev.which==40&&snake.direction!=snake.directionNum.up){
snake.direction=snake.directionNum.down;
}
}
this.start();
}
//开始游戏
Game.prototype.start=function(){
this.timer=setInterval(function(){
snake.getNextPos();
},200)
}
Game.prototype.pause=function(){
clearInterval(this.timer);
}
//游戏结束
Game.prototype.over=function(){
clearInterval(this.timer);
alert(‘你的得分为‘+this.score);
//游戏回到最开始的状态
var snakeWarp=document.getElementById(‘snakeWarp‘);
snakeWarp.innerhtml=‘‘;
//清空之前的
snake=new Snake();
game=new Game();
var startBtnWarp=document.querySelector(‘.starBtn‘);
startBtnWarp.style.display=‘block‘;
}
//开启游戏
game=new Game();
//找到Button
var startBtn = document.querySelector(‘.starBtn Button‘);
startBtn.onclick=function(){
startBtn.parentNode.style.display=‘none‘;
game.init();
}

//暂停
var snakeWarp = document.getElementById(‘snakeWarp‘);
var pauseBtn=document.querySelector(‘.pauseBtn button‘);
snakeWarp.onclick=function(){
game.pause();
pauseBtn.parentNode.style.display=‘block‘;
}
pauseBtn.onclick=function(){
game.start();
pauseBtn.parentNode.style.display=‘none‘;
}