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