Day9--------gameSnack 

 //----------使用了键码事件完成操纵贪吃蛇，并使用边界来判定墙壁和吃到食物，除了上下左右均为暂停游戏
 //-----未完成-----没有自身碰撞，限制回头游动，长度可能有限制，结束需要按F5重新开始，也没有测试兼容性（360极速为测试浏览器）
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>gameSnack</title>
 6 </head>
 7 <style type="text/css">
 8     .snake{width: 50px;height: 50px;position: absolute;background: red;}
 9     #food{width: 50px;height: 50px;position: absolute;background: red;left: 300px;top: 200px;}
10 </style>
11 <script type="text/javascript">
12 window.onload=function(){
13     var timer=["up","down","left","right"];    
14     oSnake=document.getElementsByClassName('snake');
15     oFood=document.getElementById('food');
16     function clear(keyId){
17         clearInterval(timer[keyId]);
18     }
19     impactTimer=setInterval(function(){
20         if((oSnake[0].offsetTop<=0)||(oSnake[0].offsetLeft<=0)||(oSnake[0].offsetTop>=(document.documentElement.clientHeight-oSnake[0].offsetHeight))||(oSnake[0].offsetLeft>=(document.documentElement.clientWidth-oSnake[0].offsetWidth))) {
21             alert('Game Over');
22             for(impactCount=0;impactCount<4;impactCount++)    clear(impactCount);
23             clearInterval(impactTimer);
24         } 
25         else if((oSnake[0].offsetLeft>=(oFood.offsetLeft-35))&&(oSnake[0].offsetTop>=(oFood.offsetTop-35))&&(oSnake[0].offsetLeft<=(oFood.offsetLeft+35))&&(oSnake[0].offsetTop<=(oFood.offsetTop+35))){
26             oFood.style.left=Math.random()*1300+'px';
27             oFood.style.top=Math.random()*500+'px';
28             oNewBody=document.createElement('div');
29             oNewBody.className='snake';
30             oNewBody.style.display='none';
31             document.body.appendChild(oNewBody);
32             oSnake=document.getElementsByClassName('snake');
33             setInterval(function(){
34                 oSnake[oSnake.length-1].style.display='block';
35                 for(tailCount=oSnake.length-1;tailCount>0;tailCount--){
36                     oSnake[tailCount].style.left=oSnake[tailCount-1].offsetLeft+'px';
37                     oSnake[tailCount].style.top=oSnake[tailCount-1].offsetTop+'px';
38                 }
39             },oSnake.length*50);    
40         }
41     },10);
42     document.onkeydown=function(ev){
43         oEvent=ev||event;    
44         for(count=0;count<4;count++)    clear(count);            
45         switch(oEvent.keyCode){
46             case 37:timer[0]=setInterval(function(){oSnake[0].style.left=oSnake[0].offsetLeft-5+'px';},10);break;
47             case 38:timer[1]=setInterval(function(){oSnake[0].style.top=oSnake[0].offsetTop-5+'px';},10);break;
48             case 39:timer[2]=setInterval(function(){oSnake[0].style.left=oSnake[0].offsetLeft+5+'px';},10);break;
49             case 40:timer[3]=setInterval(function(){oSnake[0].style.top=oSnake[0].offsetTop+5+'px';},10); break;
50             default: break;
51         }    
52     }    
53 }
54 </script>
55 <body>
56     <div id="food"></div>
57     <div class="snake"></div>    
58 </body>
59 </html>

 

posted on 2014-11-28 15:27  fleshy  阅读(481)  评论(0)    收藏  举报

导航