JavaScript实现经典贪吃蛇游戏
作者：fanfan_h
这篇文章主要为大家详细介绍了JavaScript实现经典贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现经典贪吃蛇游戏的具体代码，供大家参考，具体内容如下
主要使用单例模式，所有元素动态创建；
1.创建地图
var Map;
function map(){
this.mapp=null;
this.makemap=function(){
this.mapp=document.createElement ("div");
this.mapp.className ="mymap";
document.body.appendChild(this.mapp );
}
}
2.创建贪吃蛇模型
创建一个集合，存放蛇的前三节，遍历集合，创建蛇的大小和颜色，设置每个小节的宽高为30px;初始化蛇头方向向右
var Snack;
function snack(){
this.snackk=[["red",3,1,null],["pink",2,1,null],["pink",1,1,null]];
this.direct="right";
this.makesnack=function(){
for(var i=0;i<this.snackk.length;i++){
if(this.snackk[i][3]==null){
this.snackk[i][3]=document.createElement ("div");
this.snackk[i][3].className ="eatsnack";
this.snackk[i][3].style.backgroundColor =this.snackk[i][0];
Map.mapp.appendChild(this.snackk[i][3]);
}
this.snackk[i][3].style.left=this.snackk[i][1]*30+"px";
this.snackk[i][3].style.top=this.snackk[i][2]*30+"px";
}
};
3.动态蛇，从后向前遍历存放蛇的每一节的集合snackk，将每小节的属性从后想前传递，并且设置蛇头移动方向，方向改变蛇的左边距和上边距也会跟着改变，再设置一个计时器，每100ms让蛇动起来一次；
this.movesnack=function(){
var long=this.snackk.length-1;
for(var i=long; i>0; i--){
this.snackk[i][1]=this.snackk[i-1][1];
this.snackk[i][2]=this.snackk [i-1][2];
}
switch(this.direct){
case "right": //向右
this.snackk[0][1] +=1;
break;
case "left": //向左
this.snackk[0][1] -=1;
break;
case "down": //向下
this.snackk[0][2] +=1;
break;
case "up": //向上
this.snackk[0][2] -=1;
break;
}
4.创建食物。
在地图上随机产生食物，食物的大小和每一小节蛇的大小一样
var Guoguo;
function guozi(){
this.guoo=null;
this.x;
this.y;
this.makeguozi=function(){
this.x=Math.floor( Math.random() * 30); //0-29
this.y=Math.floor( Math.random() * 20); //0-19
if(this.guoo==null){
this.guoo=document.createElement ("div");
this.guoo.className ="guozi";
Map.mapp.appendChild(this.guoo);
}
this.guoo.style.left=this.x * 30+"px";
this.guoo.style.top =this.y * 30+"px";
}
}
5.设置键盘事件，上下左右键控制蛇头的变化方向
document.body.onkeyup=function(e){
// console.log(e);
switch(e.keyCode){
case 37: //左
if(Snack.direct!="right"){
Snack.direct ="left";
}
break;
case 39:// 右
if(Snack.direct!="left"){
Snack.direct ="right";
}
break;
case 38: //上
if(Snack.direct!="down"){
Snack.direct ="up";
}
break;
case 40: //下
if(Snack.direct!="up"){
Snack.direct ="down";
}
break;
case 87:
if (Snack.direct != "down") {
Snack.direct = "up";
}
break;
case 65:
if (Snack.direct != "right") {
Snack.direct = "left";
}
break;
case 68:
if (Snack.direct != "left") {
Snack.direct = "right";
}
break;
case 83:
if (Snack.direct != "up") {
Snack.direct = "down";
}
break;
}
};
6.检测蛇头和食物的位置，蛇头吃到食物，蛇的长度变长，给snackk集合追加元素，接着在随机创建食物，再检测食物位置，再吃到食物；
if(this.snackk[0][1]==Guoguo.x && this.snackk[0][2]==Guoguo.y ){
this.snackk.push([
"pink",
this.snackk[this.snackk.length-1][1],
this.snackk[this.snackk.length-1][2],
null
]);
Guoguo.makeguozi ();
}
7.设置蛇身可以穿墙而过，如果蛇头的上下左右边距等于0时，改变边距到最大值；
if(this.snackk[0][1]>29){
this.snackk[0][1]=0 ; //从右边穿墙
}
if(this.snackk[0][1]<0){
this.snackk[0][1]=29 ; //从右边穿墙
}
if(this.snackk[0][2]>19){
this.snackk[0][2]=0 ; //从右边穿墙
}
if(this.snackk[0][2]<0){
this.snackk[0][2]=19 ; //从右边穿墙
}
this.makesnack();
this.stopsnack();
};
8.设计游戏结束，贪吃蛇撞在自己的身体就死了，游戏结束，关闭计时器
当蛇头的上边距，左边距等于蛇身体某一块的上编剧和左边距时，游戏结束，弹出游戏结束的提示图片
this.stopsnack=function(){
for(var k=this.snackk.length-1;k>0;k--){
if(this.snackk[0][1]==this.snackk [k][1] && this.snackk[0][2]==this.snackk [k][2]){
clearInterval(time);
var gameover=document.createElement ("div");
gameover.className ="over";
gameover.style.display ="block";
Map.mapp.appendChild (gameover);
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。