店面设计费用,西青seo,wordpress 文件上传大小,最近韩国免费观看视频闲来无事#xff0c;在网上闲逛的时候开到有人说百度蛇年的贪吃蛇logo小游戏不错#xff0c;于是乎就自己仿照写了一个。#xff08;注#xff1a;所有素材都来自百度#xff09; 效果图 用到的图片 1 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional…闲来无事在网上闲逛的时候开到有人说百度蛇年的贪吃蛇logo小游戏不错于是乎就自己仿照写了一个。注所有素材都来自百度 效果图 用到的图片 1 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd2 html xmlnshttp://www.w3.org/1999/xhtml3 head4 meta http-equivContent-Type contenttext/html; charsetutf-8 /5 title无标题文档/title6 7 style typetext/css8 #div_stage {width:1015px; height:342px; background:url(images/stagebg.jpg) no-repeat; margin:10px auto; position:relative;}9 #main {width:570px; height:240px; position:absolute; left:200px; top:50px;}10 #main div {width: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(M111, M120, M210, M221, SizingMethodauto expand);20 21 /* IE6 and 7 */ 22 filter: progid:DXImageTransform.Microsoft.Matrix(23 M111,24 M120,25 M210,26 M221,27 SizingMethodauto 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, M121.2246063538223773e-16, M21-1.2246063538223773e-16, M22-1, SizingMethodauto expand);38 39 /* IE6 and 7 */ 40 filter: progid:DXImageTransform.Microsoft.Matrix(41 M11-1,42 M121.2246063538223773e-16,43 M21-1.2246063538223773e-16,44 M22-1,45 SizingMethodauto 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, M211, M22-1.836909530733566e-16, SizingMethodauto expand);55 56 /* IE6 and 7 */ 57 filter: progid:DXImageTransform.Microsoft.Matrix(58 M11-1.836909530733566e-16,59 M12-1,60 M211,61 M22-1.836909530733566e-16,62 SizingMethodauto 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(M116.123031769111886e-17, M121, M21-1, M226.123031769111886e-17, SizingMethodauto expand);73 74 /* IE6 and 7 */ 75 filter: progid:DXImageTransform.Microsoft.Matrix(76 M116.123031769111886e-17,77 M121,78 M21-1,79 M226.123031769111886e-17,80 SizingMethodauto expand);81 82 }83 84 85 86 /style87 88 script typetext/javascript89 window.οnlοadfunction(){90 var oDivdocument.getElementById(main);//蛇移动的范围91 var H8,L19,asnake[],//蛇数组92 aeat[],//吃的数组93 fxl,//蛇出始移动方向94 eatNum0;//吃的从第几行开始95 96 for(var i0;i5;i){97 98 var snDivdocument.createElement(div);99 snDiv.style.backgroundurl(images/snakei.png);
100 asnake[i]{r:0,l:3i,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.leftobj.l*30px;
108 obj.div.style.topobj.r*30px;
109 if(obj.typeeat){
110 obj.div.className;
111 }else{
112
113 obj.div.classNameobj.d;
114 }
115 }
116
117
118 var timersetInterval(function(){
119
120 //蛇吃东西
121 if(asnake[0].raeat[0].rasnake[0].laeat[0].l){
122
123 asnake.splice(asnake.length-3,0,aeat[0]);
124 aeat.shift();
125 if(aeat.length0){
126
127 createEat();
128 }
129
130 }
131
132
133 for(var iasnake.length-1;i0;i--){ //移动蛇的身体
134
135 asnake[i].rasnake[i-1].r;
136 asnake[i].lasnake[i-1].l;
137 asnake[i].dasnake[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].l0||asnake[0].r0){
157
158 alert(失败);
159 clearInterval(timer);
160 return;
161 }
162 if(asnake[0].l18||asnake[0].r7){
163 alert(失败);
164 clearInterval(timer);
165 return;
166
167 }
168 //检查是否吃到不按顺序的吃的
169 for(var i1;iaeat.length;i){
170
171 if(asnake[0].raeat[i].rasnake[0].laeat[i].l){
172
173 alert(失败);
174 clearInterval(timer);
175 return;
176
177 }
178 }
179 //检查蛇是否撞到自身
180 for(var ii;iasnake.length;i){
181
182 if(asnake[0].rasnake[i]asnake[0].lasnake[i].l){
183 alert(失败);
184 clearInterval(timer);
185 return;
186
187 }
188
189 }
190
191 for(var i0;iasnake.length;i){
192
193 setPos(asnake[i]);
194 }
195
196 },500);
197
198 document.οnkeydοwnfunction(ev){//鼠标控制蛇的爬行方向
199
200 var ewindow.event||ev;
201 switch(e.keyCode)
202 {
203 case 37: //←
204 if(asnake[0].dr){break;}
205 fxl;
206 asnake[0].dl;
207 break;
208 case 38: //↑
209 if(asnake[0].db){break;}
210 fxt;
211 asnake[0].dt;
212 break;
213 case 39: //→
214 if(asnake[0].dl){break;}
215 fxr;
216 asnake[0].dr;
217 break;
218 case 40: //↓
219 if(asnake[0].dt){break;}
220 fxb;
221 asnake[0].db;
222 break;
223 }
224
225 }
226
227 function createEat(){
228
229 while(aeat.length4){
230 var xparseInt(Math.random()*L);
231 var yparseInt(Math.random()*H);
232 var currtrue;
233 for(var i0;iasnake.length;i){//判断吃的与蛇是否重叠
234
235 if(xasnake[i].lyasnake[i].r){
236
237 currfalse;
238
239 }
240
241 }
242 for(var i0;iaeat.length;i){ //判断吃的与吃的是否重叠
243
244 if(xaeat[i].lyaeat[i].r){
245
246 currfalse;
247
248 }
249
250 }
251 if(curr){
252 var newEatdocument.createElement(div);
253 newEat.style.backgroundurl(images/iconBg.jpg) -aeat.length*30px -eatNum*30px;
254 oDiv.appendChild(newEat);
255 aeat.push({r:y,l:x,div:newEat,type:eat});
256
257 }
258
259 }
260
261 for(var i0;iaeat.length;i){//把所有吃的放在容器的不同位置
262
263 setPos(aeat[i]);
264
265 }
266
267
268 eatNumeatNum1;
269
270 }
271
272
273 createEat();//执行吃的函数
274
275 }
276
277 /script
278 /head
279 body
280
281 div iddiv_stage
282 div idmain
283 /div
284 /div
285
286 /body
287 /html View Code 转载于:https://www.cnblogs.com/chaoming/archive/2013/06/03/3115582.html
