百度新年贪吃蛇效果

闲来无事，在网上闲逛的时候开到有人说百度蛇年的贪吃蛇logo小游戏不错，于是乎就自己仿照写了一个。（注：所有素材都来自百度）
效果图
用到的图片
  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>无标题文档</title>
  6 
  7 <style type="text/css">
  8 #div_stage {1015px; height:342px; background:url(images/stagebg.jpg) no-repeat; margin:10px auto; position:relative;}
  9 #main {570px; height:240px; position:absolute; left:200px; top:50px;}
 10 #main div {30px; height:30px; position:absolute;}
 11 
 12 
 13 #main .l {
 14     -webkit-transform:rotate(0deg);
 15     -moz-transform:rotate(0deg);
 16     -o-transform:rotate(0deg);
 17     transform:rotate(0deg); 
 18     /* IE8+ - must be on one line, unfortunately */ 
 19    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
 20    
 21    /* IE6 and 7 */ 
 22    filter: progid:DXImageTransform.Microsoft.Matrix(
 23             M11=1,
 24             M12=0,
 25             M21=0,
 26             M22=1,
 27             SizingMethod='auto expand');
 28 
 29 
 30 }
 31 #main .r {
 32     -webkit-transform:rotate(180deg);
 33     -moz-transform:rotate(180deg);
 34     -o-transform:rotate(180deg);
 35     transform:rotate(180deg);
 36 /* IE8+ - must be on one line, unfortunately */ 
 37    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246063538223773e-16, M21=-1.2246063538223773e-16, M22=-1, SizingMethod='auto expand')";
 38    
 39    /* IE6 and 7 */ 
 40    filter: progid:DXImageTransform.Microsoft.Matrix(
 41             M11=-1,
 42             M12=1.2246063538223773e-16,
 43             M21=-1.2246063538223773e-16,
 44             M22=-1,
 45             SizingMethod='auto expand');
 46 
 47 }
 48 #main .t {
 49     -webkit-transform:rotate(90deg);
 50     -moz-transform:rotate(90deg);
 51     -o-transform:rotate(90deg);
 52     transform:rotate(90deg);
 53 /* IE8+ - must be on one line, unfortunately */ 
 54    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1.836909530733566e-16, M12=-1, M21=1, M22=-1.836909530733566e-16, SizingMethod='auto expand')";
 55    
 56    /* IE6 and 7 */ 
 57    filter: progid:DXImageTransform.Microsoft.Matrix(
 58             M11=-1.836909530733566e-16,
 59             M12=-1,
 60             M21=1,
 61             M22=-1.836909530733566e-16,
 62             SizingMethod='auto expand');
 63 
 64 
 65 }
 66 #main .b {
 67     -webkit-transform:rotate(270deg);
 68     -moz-transform:rotate(270deg);
 69     -o-transform:rotate(270deg);
 70     transform:rotate(270deg);
 71  /* IE8+ - must be on one line, unfortunately */ 
 72    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, SizingMethod='auto expand')";
 73    
 74    /* IE6 and 7 */ 
 75    filter: progid:DXImageTransform.Microsoft.Matrix(
 76             M11=6.123031769111886e-17,
 77             M12=1,
 78             M21=-1,
 79             M22=6.123031769111886e-17,
 80             SizingMethod='auto expand');
 81 
 82 }
 83 
 84 
 85 
 86 </style>
 87 
 88 <script type="text/javascript">
 89 window.onload=function(){
 90     var oDiv=document.getElementById("main");//蛇移动的范围
 91     var H=8,L=19,asnake=[],//蛇数组
 92      aeat=[],//吃的数组
 93      fx="l",//蛇出始移动方向
 94      eatNum=0;//吃的从第几行开始
 95     
 96    for(var i=0;i<5;i++){
 97 
 98         var snDiv=document.createElement("div");
 99         snDiv.style.background="url(images/snake"+i+".png)";
100         asnake[i]={r:0,l:3+i,div:snDiv, d: 'l',type:"snake"}; //r初始行，l初始列，d初始移动方向
101         oDiv.appendChild(snDiv);
102         setPos(asnake[i]);
103    }
104     
105     function setPos(obj){//设置蛇每一接的位置
106     
107         obj.div.style.left=obj.l*30+"px";
108         obj.div.style.top=obj.r*30+"px";
109         if(obj.type=="eat"){
110             obj.div.className="";
111         }else{
112             
113             obj.div.className=obj.d;    
114         }
115     }
116     
117     
118     var timer=setInterval(function(){
119         
120         //蛇吃东西
121         if(asnake[0].r==aeat[0].r&&asnake[0].l==aeat[0].l){
122             
123              asnake.splice(asnake.length-3,0,aeat[0]);
124              aeat.shift();    
125             if(aeat.length==0){
126             
127                  createEat();    
128             }
129 
130         }
131         
132         
133         for(var i=asnake.length-1;i>0;i--){ //移动蛇的身体
134         
135             asnake[i].r=asnake[i-1].r;
136             asnake[i].l=asnake[i-1].l;
137             asnake[i].d=asnake[i-1].d;
138 
139         }
140         switch(fx){ //移动蛇头
141           case "l":
142             asnake[0].l--;
143             break;
144           case "r":
145             asnake[0].l++;
146             break;
147           case "t":
148             asnake[0].r--;
149             break;
150           case "b":
151             asnake[0].r++;
152             break;
153 
154         }
155         //检查蛇是否撞墙
156         if(asnake[0].l<0||asnake[0].r<0){
157             
158             alert("失败！");
159             clearInterval(timer);
160             return;    
161         }
162         if(asnake[0].l>18||asnake[0].r>7){
163             alert("失败！");
164             clearInterval(timer);
165             return;    
166             
167         }
168         //检查是否吃到不按顺序的吃的
169         for(var i=1;i<aeat.length;i++){
170             
171               if(asnake[0].r==aeat[i].r&&asnake[0].l==aeat[i].l){
172                  
173                   alert("失败！");
174                   clearInterval(timer);
175                   return;    
176                
177              }    
178         }
179         //检查蛇是否撞到自身
180         for(var i=i;i<asnake.length;i++){
181             
182             if(asnake[0].r==asnake[i]&&asnake[0].l==asnake[i].l){
183                   alert("失败！");
184                   clearInterval(timer);
185                   return;    
186                     
187             }    
188             
189         }
190 
191         for(var i=0;i<asnake.length;i++){
192             
193             setPos(asnake[i]);
194         }
195 
196     },500);
197     
198       document.onkeydown=function(ev){//鼠标控制蛇的爬行方向
199         
200         var e=window.event||ev;
201         switch(e.keyCode)
202         {
203             case 37:        //←
204                 if(asnake[0].d=="r"){break;}
205                 fx='l';
206                 asnake[0].d='l';
207                 break;
208             case 38:        //↑
209                 if(asnake[0].d=="b"){break;}
210                 fx='t';
211                 asnake[0].d='t';
212                 break;
213             case 39:        //→
214                 if(asnake[0].d=="l"){break;}
215                 fx='r';
216                 asnake[0].d='r';
217                 break;
218             case 40:        //↓
219                 if(asnake[0].d=="t"){break;}
220                 fx='b';
221                 asnake[0].d='b';
222                 break;
223         }
224         
225     }    
226     
227 function  createEat(){
228     
229     while(aeat.length<4){
230           var x=parseInt(Math.random()*L);
231           var y=parseInt(Math.random()*H);
232           var curr=true;
233           for(var i=0;i<asnake.length;i++){//判断吃的与蛇是否重叠
234             
235               if(x==asnake[i].l&&y==asnake[i].r){
236                   
237                   curr=false;
238                  
239                }  
240       
241           }
242           for(var i=0;i<aeat.length;i++){  //判断吃的与吃的是否重叠
243             
244               if(x==aeat[i].l&&y==aeat[i].r){
245                   
246                   curr=false;
247                  
248                }  
249       
250           }
251           if(curr){
252              var newEat=document.createElement("div");
253              newEat.style.background="url(images/iconBg.jpg) -"+aeat.length*30+"px -"+eatNum*30+"px";
254              oDiv.appendChild(newEat);  
255              aeat.push({r:y,l:x,div:newEat,type:"eat"});
256                 
257          }
258 
259     }
260     
261     for(var i=0;i<aeat.length;i++){//把所有吃的放在容器的不同位置
262         
263             setPos(aeat[i]);
264         
265     }
266     
267     
268     eatNum=eatNum+1;
269     
270 }
271     
272     
273 createEat();//执行吃的函数
274     
275 }
276 
277 </script>
278 </head>
279 <body>
280 
281 <div id="div_stage">
282     <div id="main">
283     </div>
284 </div>
285 
286 </body>
287 </html>
View Code