闲来无事，在网上闲逛的时候开到有人说百度蛇年的贪吃蛇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>