//需要先选定游戏难度再开始游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box">记分板:0分</div>
<button id="start">开始游戏</button>
<button id="restart">重新开始</button><br>
<button id="easy">简单</button>
<button id="middle">中等</button>
<button id="hard">困难</button>
<script>
var boxObj=document.getElementById('box');
var count=0;
function Map(){
this.w=800;
this.h=400;
this.c="#ccc";
this.init();
}
Map.prototype.init=function(){
this.ele=document.createElement("div");
this.ele.style.cssText=`height:${this.h}px;width:${this.w}px;background:${this.c};
margin:0 auto;position:relative;`
document.body.appendChild(this.ele);
}
function Food(){
this.w=20;
this.h=20;
this.c="red";
this.x=0;
this.y=0;
this.display();
}
Food.prototype.display=function(){
this.ele=document.createElement("div");
this.ele.style.cssText=`height:${this.h}px;width:${this.w}px;background:${this.c};
position:absolute;`
this.ele.style.left=this.randomPos(0,39)*this.w + "px";
this.ele.style.top=this.randomPos(0,19)*this.h + "px";
m.ele.appendChild(this.ele);
}
Food.prototype.randomPos=function(a,b){
return Math.round(Math.random()*(b-a)+a);
}
class Snake{
constructor(){
this.w=20;
this.h=20;
this.body=[{c:'green',x:5,y:3},{c:'green',x:4,y:3},{c:'green',x:3,y:3}]
this.direction='right';
this.speed=this.level();
this.init();
this.move();
}
init(){
for(var i=0;i<this.body.length;i++){
if(!this.body[i].ele){
this.body[i].ele=document.createElement('div');
m.ele.appendChild(this.body[i].ele);
}
this.body[i].ele.style.cssText=`height:${this.h}px;width:${this.w}px;background:${this.body[i].c};
position:absolute;`;
this.body[i].ele.style.left=this.body[i].x*this.w+'px';
this.body[i].ele.style.top=this.body[i].y*this.h+'px';
}
}
move(){
var start=document.getElementById('start');
start.onclick=()=>{
this.restart=document.getElementById('restart');
this.restart.onclick=()=>{
this.restar();
}
this.timer=setInterval(()=>{
this.eat();
for(var i=this.body.length-1;i>0;i--){
this.body[i].x=this.body[i-1].x;
this.body[i].y=this.body[i-1].y;
}
var that=this;
document.onkeydown=function(eve){
var e=eve||window.event;
var code=e.keyCode || e.which;
console.log(that.direction);
if(that.direction=='right' && code==37){
that.direction='right';
}else if(that.direction=='left' && code==39){
that.direction='left';
}else if(that.direction=='top' && code==40){
that.direction='top';
}else if(that.direction=='bottom' && code==38){
that.direction='bottom';
}else{
switch(code){
case 38:
that.direction='top';
break;
case 40:
that.direction='bottom';
break;
case 37:
that.direction='left';
break;
case 39:
that.direction='right'
break;
}}
}
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;
}
var headX=this.body[0].x;
var headY=this.body[0].y;
if(headX<0 || headX >(m.w/s.w)-1){alert('死');clearInterval(this.timer);return;}
if(headY<0 || headY >(m.h/s.h)-1){alert('死');clearInterval(this.timer);return;}
for(var i=1;i<this.body.length;i++){
if(this.body[0].x==this.body[i].x && this.body[0].y==this.body[i].y){
alert("撞自己");
clearInterval(this.timer);
}
}
this.init();
},this.speed)
}
}
eat(){
if(this.body[0].ele.style.left==f.ele.style.left && this.body[0].ele.style.top==f.ele.style.top){
var tx=f.randomPos(0,39);
var ty=f.randomPos(0,19);
for(var i=0;i<this.body.length;++i){
if((tx==this.body[i].x )&& (ty==this.body[i].y)){
tx=f.randomPos(0,39);
ty=f.randomPos(0,19);
console.log(tx);
console.log(ty);
i=0;
}else if(i==this.body.length-1){
f.ele.style.left=tx*f.w + "px";
f.ele.style.top=ty*f.h + "px";
}else{
console.log('ww');
}
}
count++;
boxObj.innerHTML="记分板:"+count+"分";
this.body.push({c:'blue',x:this.body[this.body.length-1].x,y:this.body[this.body.length-1].y});
}
}
level(){
this.easy=document.getElementById('easy');
this.middle=document.getElementById('middle');
this.hard=document.getElementById('hard');
this.easy.onclick=()=>{
this.speed=1000;
}
this.middle.onclick=()=>{
this.speed=300;
}
this.hard.onclick=()=>{
this.speed=100;
}
return this.speed;
}
restar(){
clearInterval(this.timer);
for(var i=0;i<this.body.length;i++)
{this.body[i].ele.remove();}
var s=new Snake();
f.ele.style.left=f.randomPos(0,39)*f.w + "px";
f.ele.style.top=f.randomPos(0,19)*f.h + "px";
}
}
var m=new Map();
var f=new Food();
var s=new Snake();
</script>
</body>
</html>
