贪吃蛇游戏代码

来源：互联网发布：win格式化mac u盘编辑：程序博客网时间：2024/04/29 06:15
js代码

view source
print?
01<script type="text/javascript">
02var snake={
03           st:500,//速度初始为0.5秒移动一次,数值越小速度越快！
04           num:0,
05      start:function(){//初始化,建立外围DIV框架，键盘事件,食物或蛇的初始数量和位置
06           div=document.createElement('div');
07      div.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:20px;width:400px;height:400px;border:1px solid #000;";
08           div.id='kj';
09           div1=document.createElement('div');
10      div1.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:430px;width:400px;height:100px;";
11           document.body.appendChild(div);
12           document.body.appendChild(div1);
13           div1.innerHTML='键盘上↑↓←→代表方向控制，小键盘上0加速，1减速，空格暂停!';
14           document.onkeydown=function(e){snake.dir(e||window.event);}
15           this.createshe(0,200);
16           this.createshe(20,200);
17           this.createfood();
18          },
19     pause:function(){//游戏暂停
20           clearTimeout(this.tt);
21          },
22createfood:function(){//产生选区内的一个随机坐标的食物(SPAN标签)！
23           this.x=Math.round(Math.random()*19)*20;
24           this.y=Math.round(Math.random()*19)*20;
25           this.p=document.getElementsByTagName("p");//获得所有蛇对象
26            
27           while(this.checkbody(this.x,this.y))
28           {//进行循环判断，让随即生成的食物位置不能和蛇的位置重合，重合就重刷随机数！
29           this.x=Math.round(Math.random()*19)*20;
30           this.y=Math.round(Math.random()*19)*20;
31           }
32           this.food=document.createElement("span");
33           this.food.style.cssText="position:absolute;width:20px;height:20px;background:green;border:1px solid #ccc;";
34           this.food.style.left=this.x+"px";
35           this.food.style.top=this.y+"px";
36           document.getElementById('kj').appendChild(this.food);
37          },
38createshe:function(a,b){//用P标签创建蛇！
39           var sna=document.createElement("p");
40           sna.style.cssText="position:absolute;margin:0;padding:0;width:20px;height:20px;background:red;border:1px solid #ccc;";
41           sna.style.left=parseInt(a)+"px";
42           sna.style.top=parseInt(b)+"px";
43           this.x1=parseInt(a);
44           this.y1=parseInt(b);
45           document.getElementById('kj').appendChild(sna);
46          },
47      dir:function(e){//方向控制
48           var edir;
49           if(typeof(this.tt)!='undefined'){clearTimeout(this.tt);}//防止方向键多次键入导致速度不断增加!
50           if(typeof(direction)!='undefined')
51           {edir=Math.abs(direction-e.keyCode)==2?direction:e.keyCode;}//反向无效！
52           else
53           {edir=e.keyCode;}
54           switch(edir)
55           {
56           case 37:this.gox = -20;this.goy=0;  direction=37; this.move();break;//左
57           case 39:this.gox = 20; this.goy=0;  direction=39; this.move();break;//右
58           case 38:this.gox = 0;  this.goy=-20;direction=38; this.move();break;//上
59           case 40:this.gox = 0;  this.goy=20; direction=40; this.move();break;//下
60           case 32:this.pause(); break;//暂停
61           case 96:this.st=this.st-100;this.move();break;//加速
62           case 97:this.st=this.st+100;this.move();break;//减速
63           }
64          },
65     move:function(){//响应键盘进行移动的事件
66           w=this.x1+this.gox;//每吃一次食物获得一次坐标
67           h=this.y1+this.goy;
68           if(w<0||w>=400||h<0||h>=400||this.checkbody(w,h))//进行边界检测和自身的碰撞检测
69           {
70           clearTimeout(this.tt);
71           alert("Game over!吃了"+this.num+"个食物!");
72           window.location.reload();//游戏结束重新刷新页面！
73           }
74           if(this.x1==this.x&&this.y1==this.y)
75           {//判断蛇头是否遇到食物的位置，如果是就移除食物，重新生成，否则就是删除最开始建立的蛇，也就是蛇尾！
76           document.getElementById('kj').removeChild(this.food);
77           this.num++;
78           this.createfood();
79           }
80           else
81           {
82           document.getElementById('kj').removeChild(this.p[0]);
83           }
84           this.createshe(w,h);
85           this.tt=setTimeout("snake.move()",this.st);
86          },
87 checkbody:function(a,b){//检查蛇是否碰到自身的方法
88           this.p=document.getElementsByTagName("p");
89           for(var i=0,j=this.p.length;i<j;i++)
90           {
91             if(this.p[i].style.left==a+"px"&&this.p[i].style.top==b+"px")returntrue;
92           }
93                         }
94}
95window.onload=function(){
96snake.start();
97}   
98</script>