面向对象实现贪吃蛇
<script>
// 地图：
function Map(){
// 提前预置宽高的尺寸
this.w = 800;
this.h = 400;
// 创建元素功能
this.display();
}
Map.prototype.display = function(){
// 创建元素
this.ele = document.createElement("div");
// 批量设置css
this.ele.style.cssText = `width:${this.w}px;height:${this.h}px;background:#ccc;margin:0 auto;position:relative;`;
// 插入页面
document.body.appendChild(this.ele);
}
// 食物：
function Food(){
// 预置尺寸，颜色，位置（格子的位置）
this.w = 20;
this.h = 20;
this.c = '#e9ecf3';
this.x = 0;
this.y = 0;
// 开始创建功能
this.display()
}
Food.prototype = {
constructor:Food,
display:function(){
this.ele = document.createElement("div");
this.ele.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};position:absolute;`;
m.ele.appendChild(this.ele);
// 随机位置
this.randomPos();
},
randomPos:function(){
// 随机的不是像素，而是把地图分成等大小的格子，随机的是格子数
this.x = this.random(0,(m.w - this.w) / this.w);
this.y = this.random(0,(m.h - this.h) / this.h);
// 拿到随机的格子数之后，根据自身宽高，计算真正位置，生效
this.ele.style.left = this.x * this.w + "px";
this.ele.style.top = this.y * this.h + "px";
},
random:function(a,b){
return Math.round(Math.random()*(a-b)+b)
}
}
// 蛇：
class Snake{
constructor(){
this.w = 20;
this.h = 20;
// 因为蛇由多个蛇节组成，每个蛇节都是独立的，所以数据格式如下：
this.body = [{c:"green",x:3,y:2},{c:"yellow",x:2,y:2},{c:"pink",x:1,y:2}];
this.direction = "right";
this.display()
}
display(){
// 有几个蛇节，就创建几个元素
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 = `width:${this.w}px;height:${this.h}px;position:absolute;`;
}
// 只改变位置和颜色
this.body[i].ele.style.background = this.body[i].c;
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";
// console.log(this.body[i].x);
}
// 在循环结束后，可以单独找到任何一个蛇节元素
this.body[0].ele.innerHTML = "0";
// 为了防止死循环，使用延时器延迟每次移动
setTimeout(()=>{
this.move();
},500)
}
move(){
// 从蛇尾巴向前开始操作
for(var i=this.body.length-1;i>0;i--){
this.body[i].x = this.body[i-1].x;
// console.log(this.body[i-1].x);
this.body[i].y = this.body[i-1].y;
}
// 根据方向，设置蛇头的位置
switch(this.direction){
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 > 39 || this.body[0].y > 19){
alert("撞墙了");
return;
}
// 撞到食物
if(this.body[0].x == f.x && this.body[0].y == f.y){
console.log("吃到了");
f.randomPos();
this.body.push({
x:this.body[this.body.length-1].x,
y:this.body[this.body.length-1].y,
c:"blue",
})
}
// 撞自己
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.display();
}
direct(val){
switch(val){
case 37:
this.direction = "left";break;
case 38:
this.direction = "top";break;
case 39:
this.direction = "right";break;
case 40:
this.direction = "bottom";break;
}
}
}
var m = new Map();
var f = new Food();
var s = new Snake();
document.onkeydown = function(eve){
var e = eve || window.event;
var code = e.keyCode | e.which;
s.direct(code);
}
</script>
