用DIV模拟游戏画面范围,食物,以及贪吃蛇。限定食物出现的时机(为随机出现。俺不能超出画面范围。限定贪吃蛇游走范围)限定游戏规则:
1,贪吃蛇,超出画面范围游戏结束。
2,贪吃蛇,撞到自己游戏结束。
<script>
class Map{
constructor(){
// 设定贪吃蛇游走的范围。
this.w = 1000;
this.h = 500;
this.c = "#999";
this.createEle();
}
createEle(){
// 引入贪吃蛇游走的范围用DIV
this.mapEle = document.createElement("div");
this.mapEle.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};margin:0 auto;position:relative;border:solid 10px black;`;
document.body.appendChild(this.mapEle);
}
}
class Food{
constructor(){
// 设定贪吃蛇要吃的食物样式
this.w = 20;
this.h = 20;
this.c = "red";
this.x = 0;
this.y = 0;
this.createEle();
}
createEle(){
// 引入食物的引入食物的样式及食物出现的范围。
this.foodEle = document.createElement("div");
this.foodEle.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};position:absolute;left:${this.x * this.w}px;top:${this.y * this.h}px;`;
m.mapEle.appendChild(this.foodEle);
}
// 实物出现是随机的位置
randomPos(){
this.x = random(0,(m.w-this.w) / this.w);
this.y = random(0,(m.h-this.h) / this.h);
this.foodEle.style.left = this.x * this.w + "px";
this.foodEle.style.top = this.y * this.h + "px";
}
}
class Snake{
// 贪吃蛇的样式设定。
constructor(){
this.w = 20;
this.h = 20;
this.body = [{
ele:null,
x:4,
y:3,
c:randomColor()
},{
ele:null,
x:3,
y:3,
c:randomColor()
},{
ele:null,
x:2,
y:3,
c:randomColor()
}];
this.d = "right";
this.createEle();
}
// 引入贪吃蛇,并循环得到。贪吃蛇最初每个部位(也就是组成贪吃蛇所有DIV)
createEle(){
for(var i=0;i<this.body.length;i++){
if(!this.body[i].ele){
this.body[i].ele = document.createElement("div");
m.mapEle.appendChild(this.body[i].ele);
}
// 贪吃蛇游走的范围设定。
this.body[i].ele.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.body[i].c};position:absolute;left:${this.body[i].x * this.w}px;top:${this.body[i].y * this.h}px;`;
}
this.body[0].ele.innerHTML = "0";
setTimeout(()=>{
this.move();
},300);
}
move(){
// 循环得到每一个元素的坐标。并且设定游戏规则。
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;
}
switch(this.d){
case "left":
this.body[0].x -= 1;
break;
case "right":
this.body[0].x += 1;
break;
case "top":
this.body[0].y -= 1;
break;
case "bottom":
this.body[0].y += 1;
break;
}
if(this.body[0].x < 0 || this.body[0].y < 0 || this.body[0].x > ((m.w-this.w) / this.w) || this.body[0].y > ((m.h-this.h) / this.h)){
alert("游戏结束!超出游走范围");
return;
}
if(this.body[0].x === f.x && this.body[0].y === f.y){
this.body.push({
ele:null,
x:this.body[this.body.length-1].x,
y:this.body[this.body.length-1].y,
c:randomColor()
})
f.randomPos();
}
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("游戏结束!吃到自己");
return;
}
}
this.createEle();
}
direct(type){
绑定键盘上下左右键,并且不能直上直下,直左直右。
switch(type){
case 37:
if(this.d === "right") break;
this.d = "left";
break;
case 38:
if(this.d === "bottom") break;
this.d = "top";
break;
case 39:
if(this.d === "left") break;
this.d = "right";
break;
case 40:
if(this.d === "top") break;
this.d = "bottom";
break;
}
}
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b)
}
function randomColor(){
return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
}
var m = new Map();
var f = new Food();
f.randomPos();
var s = new Snake();
document.onkeydown = function(eve){
var e = eve || window.event;
var code = e.keyCode || e.which;
s.direct(code);
}