首页 > 代码库 > Day9--------gameSnack

Day9--------gameSnack

2024-08-05 00:08:39   223人阅读

 //----------使用了键码事件完成操纵贪吃蛇，并使用边界来判定墙壁和吃到食物，除了上下左右均为暂停游戏
 //-----未完成-----没有自身碰撞，限制回头游动，长度可能有限制，结束需要按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>

 

Day9--------gameSnack


联系
我们