- <script type="text/javascript">
- var snake={
- st:500,//速度初始为0.5秒移动一次,数值越小速度越快!
- num:0,
- start:function(){//初始化,建立外围DIV框架,键盘事件,食物或蛇的初始数量和位置
- div=document.createElement('div');
- div.style.CSSText="position:absolute;margin:0;padding:0;left:300px;top:20px;width:400px;height:400px;border:1px solid #000;";
- div.id='kj';
- div1=document.createElement('div');
- div1.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:430px;width:400px;height:100px;";
- document.body.appendChild(div);
- document.body.appendChild(div1);
- div1.innerhtml='键盘上↑↓←→代表方向控制,小键盘上0加速,1减速,空格暂停!';
- document.onkeydown=function(e){snake.dir(e||window.event);}
- this.createshe(0,200);
- this.createshe(20,200);
- this.createfood();
- },
- pause:function(){//游戏暂停
- clearTimeout(this.tt);
- },
- createfood:function(){//产生选区内的一个随机坐标的食物(SPAN标签)!
- this.x=Math.round(Math.random()*19)*20;
- this.y=Math.round(Math.random()*19)*20;
- this.p=document.getElementsByTagName("p");//获得所有蛇对象
- while(this.checkbody(this.x,this.y))
- {//进行循环判断,让随即生成的食物位置不能和蛇的位置重合,重合就重刷随机数!
- this.x=Math.round(Math.random()*19)*20;
- this.y=Math.round(Math.random()*19)*20;
- }
- this.food=document.createElement("span");
- this.food.style.cssText="position:absolute;width:20px;height:20px;background:green;border:1px solid #ccc;";
- this.food.style.left=this.x+"px";
- this.food.style.top=this.y+"px";
- document.getElementById('kj').appendChild(this.food);
- },
- createshe:function(a,b){//用P标签创建蛇!
- var sna=document.createElement("p");
- sna.style.cssText="position:absolute;margin:0;padding:0;width:20px;height:20px;background:red;border:1px solid #ccc;";
- sna.style.left=parseInt(a)+"px";
- sna.style.top=parseInt(b)+"px";
- this.x1=parseInt(a);
- this.y1=parseInt(b);
- document.getElementById('kj').appendChild(sna);
- },
- dir:function(e){//方向控制
- var edir;
- if(typeof(this.tt)!='undefined'){clearTimeout(this.tt);}//防止方向键多次键入导致速度不断增加!
- if(typeof(direction)!='undefined')
- {edir=Math.abs(direction-e.keyCode)==2?direction:e.keyCode;}//反向无效!
- else
- {edir=e.keyCode;}
- switch(edir)
- {
- case 37:this.gox = -20;this.goy=0; direction=37; this.move(); break;//左
- case 39:this.gox = 20; this.goy=0; direction=39; this.move(); break;//右
- case 38:this.gox = 0; this.goy=-20;direction=38; this.move(); break;//上
- case 40:this.gox = 0; this.goy=20; direction=40; this.move(); break;//下
- case 32:this.pause(); break;//暂停
- case 96:this.st=this.st-100;this.move();break;//加速
- case 97:this.st=this.st+100;this.move();break;//减速
- }
- },
- move:function(){//响应键盘进行移动的事件
- w=this.x1+this.gox;//每吃一次食物获得一次坐标
- h=this.y1+this.goy;
- if(w<0||w>=400||h<0||h>=400||this.checkbody(w,h))//进行边界检测和自身的碰撞检测
- {
- clearTimeout(this.tt);
- alert("Game over!吃了"+this.num+"个食物!");
- window.location.reload();//游戏结束重新刷新页面!
- }
- if(this.x1==this.x&&this.y1==this.y)
- {//判断蛇头是否遇到食物的位置,如果是就移除食物,重新生成,否则就是删除最开始建立的蛇,也就是蛇尾!
- document.getElementById('kj').removeChild(this.food);
- this.num++;
- this.createfood();
- }
- else
- {
- document.getElementById('kj').removeChild(this.p[0]);
- }
- this.createshe(w,h);
- this.tt=setTimeout("snake.move()",this.st);
- },
- checkbody:function(a,b){//检查蛇是否碰到自身的方法
- this.p=document.getElementsByTagName("p");
- for(var i=0,j=this.p.length;i<j;i++)
- {
- if(this.p[i].style.left==a+"px"&&this.p[i].style.top==b+"px")return true;
- }
- }
- }
- window.onload=function(){
- snake.start();
- }
- </script>
- //该片段来自于http://www.codesnippet.cn/detail/040120131282.html
来源: http://www.codesnippet.cn/detail/040120131282.html