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

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>

 

Day9--------gameSnack