本文实例为大家分享了js实现简单贪吃蛇效果的具体代码,供大家参考,具体内容如下
上代码之前,先给大家看一下效果:
是不是想说:我能这样玩一天…
话不多说,代码如下:
& lt; script>
类图{
构造函数(){//提前设定将来的地图的样式数据
这一点。w=450;
这一点。h=250;
这一点。c=" # DDD”;//执行创建地图方法
this.createEle ();
}
createEle () {
这一点。mapEle=document.createElement (" div ");
this.mapEle.style。cssText='宽度:$ {this.w} px;高度:$ {this.h} px;背景:$ {this.c};保证金:100 px汽车;位置:相对;边界:固体10 px # AAA;”;
document.body.appendChild (this.mapEle);
}
}
类食物{
构造函数(){//提前设定将来的食物的样式数据
这一点。w=10;
这一点。h=10;
这一点。c=昂焐?
这一点。x=0;
这一点。y=0;//执行创建食物方法
this.createEle ();
}
createEle () {
这一点。foodEle=document.createElement (" div ");
this.foodEle.style。cssText='宽度:$ {this.w} px;高度:$ {this.h} px;背景:$ {this.c};位置:绝对的,左:$ {。x * this.w} px;最高:$ {。y * this.h} px; border - radius: 10 px;
m.mapEle.appendChild (this.foodEle);
}
randomPos () {//随机位置,随机产生的是格子的位置,不是真正的像素
这一点。随机(x=0, (m.w-this.w)/this.w);
这一点。随机(y=0, (m.h-this.h)/this.h);//设置位置时,要换算成像素,然后再生效
this.foodEle.style。离开了= *。w +“px”;
this.foodEle.style。=这。y *。h +“px”;
}
}
类蛇{
构造函数(){//提前设定将来的蛇节的样式数据
这一点。w=10;
这一点。h=10;//因为蛇由多个设计组成,每个蛇节都有自己的独立信息,所以数据结构设计成如下格式
这一点。身体=[{
避署:空,
x: 4,
y: 3,
c: randomColor ()
},{
避署:空,
x: 3,
y: 3,
c: randomColor ()
},{
避署:空,
x: 2,
y: 3,
c: randomColor ()
});//提前设置默认方向
这一点。d=罢贰钡?//开始创建蛇节元素,设置样式
this.createEle ();
}
createEle () {//使用循环多次创建,因为有多个蛇节
我(var=0; i< this.body.length;我+ +){//创建之前,需要判断元素是否已经存在,如果已经存在,不需要创建
如果(! this.body[我].ele) {
this.body[我]。避署=document.createElement (" div ");
m.mapEle.appendChild (this.body[我].ele);
}
this.body[我].ele.style。cssText='宽度:$ {this.w} px;高度:$ {this.h} px;背景:$ {this.body[我]. c};位置:绝对的,左:$ {this.body[我]。x * this.w} px;最高:$ {this.body[我]。y * this.h} px; border - radius: 10 px;
}//延迟之后,开始移动
setTimeout(()=祝辞{
this.move ();
},200);
}
移动(){//从最后一个元素向前找前一个元素的坐标,直到第一个
我对(var=this.body.length-1;i> 0;我(){
this.body[我]。x=this.body(张)方式;
this.body[我]。(张)y=this.body .y;
}//第一个元素根据默认方向,决定想哪走
开关(this.d) {
例“左”:
this.body [0]。x -=1;
打破;
例“正确的”:
this.body [0]。x +=1;
打破;
“顶级”:
this.body [0]。y -=1;
打破;
例“底部”:
this.body [0]。y +=1;
打破;
}//移动过程中,判断是否撞到边界,任意一个边界都不行
如果(this.body [0]。x & lt;0 | | this.body [0]。y & lt;0 | | this.body [0]。x比;((m.w-this.w)/this.w) | | this.body [0]。y比;((m.h-this.h)/this.h)) {
alert("撞墙了”);
返回;
}//移动过程中,判断是否与食物的坐标重复,如果重复
如果(this.body [0]。x===f。x和,this.body [0]。y===f.y) {//给蛇增加一个蛇节
this.body.push ({
避署:空,
x: this.body this.body.length-1以下方式,
y: this.body this.body.length-1 .y,
c: randomColor ()
})//刷新食物的坐标
f.randomPos ();
}//移动过程中,判断蛇头的坐标是否与某个任意一个蛇节的坐标重复
(var i=1; i< this.body.length;我+ +){
如果(this.body [0]。x==this.body[我]。x和,this.body [0]。y==this.body[我].y) {//如果重复,撞到自己,结束程序
alert("撞到自己了”);
返回;
}
}
this.createEle ();
}
直接(类型){
开关(类型){
例37:
如果这一点。d===罢贰?休息;
这一点。d=白蟆?
打破;
例38:
如果这一点。d===暗撞俊?休息;
这一点。d=岸ゼ丁?
打破;
例39:
如果这一点。d===白蟆?休息;
这一点。d=罢贰钡?
打破;
例40:
如果这一点。d===岸ゼ丁?休息;
这一点。d=暗撞俊?
打破;
}
}
}
函数随机(a, b) {
返回Math.round (math . random () * (a - b) + b)
}
函数randomColor () {
返回的rgb(${随机(0255)},${随机(0255)},{随机(0255)})美元的
}
var m=新地图();
var f=新的食品();
f.randomPos ();
var s=新蛇();//当按下键盘时,将按下的键盘的代码值,传给蛇的专属处理方法
文档。onkeydown=函数(夜){
var e=夜| | window.event;
var代码=e。键码| | e.which;
s.direct(代码);
}
& lt;/script>
