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