欢迎光临
我们一直在努力
当前位置：456主机测评 > 源码分享 > 正文

javascript小游戏源码

2023-03-08 分类：源码分享 阅读(204) 评论(0)
javascript小游戏源码

这是一个非常简单的小游戏，用鼠标点击方格堵住红色的方格，不让它逃出整个表格的边缘，就赢了，否则就game over了。 下面为源码，可以分析分析分析学习学习，哈哈。 这是一个非常简单的小游戏，用鼠标点击方格堵住红色的方格，不让它逃出整个表格的边缘，就赢了，否则就game over了。 下面为源码，可以分析分析分析学习学习，哈哈下面为源码，可以分析分析分析学习学习，哈哈下面为源码。

这是一个非常简单的小游戏，用鼠标点击方格堵住红色的方格，不让它逃出整个表格的边缘，就赢了，否则就game over了。

下面为源码，可以分析分析分析学习学习，哈哈。

 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 <title>wujinjian</title>
 5 <script type="text/javascript">
 6 //11 个单元格,每个单元格的大小就 等于 地图的大小(mapWH)/mapsize
 7  var mapSize=11; 
 8 //地图的大小
 9  var mapWH=440; 
 10 //记录对方的ID
 11  var computerID; 
 12 //这个方向是否可走
 13  var isPath=true; 
 14 //记录四方位上距离对方的距离
 15  var up=0;
 16 var left=0;
 17 var right=0;
 18 var down=0;
 19 //障碍物的最多个数(可重叠)
 20  var za=3;
 21 
 22 window.onerror=function()
 23 {
 24 alert("异常！点击确定重新开始");
 25 window.location.href=window.location.href;
 26 };
 27 
 28 function createMap()
 29 {
 30 var x=Math.round(Math.random()*(mapSize-1)); //行
 31  var y=Math.round(Math.random()*(mapSize-1)); //列
 32  
 33 if(x==0)
 34 x=x+1;
 35 else if(x==(mapSize-1))
 36 x=x-1;
 37 if(y==0)
 38 y=y+1;
 39 else if(y==(mapSize-1))
 40 y=y-1;
 41 
 42 //var x=7;
 43  //var y=2;
 44  
 45 computerID=x+"_"+y;
 46 
 47 var tabobj=document.createElement("table");
 48 tabobj.style.width=mapWH+"px";
 49 tabobj.style.height=mapWH+"px";
 50 
 51 tabobj.border="1";
 52 
 53 var tbodyobj=document.createElement("tbody");
 54 
 55 for(var i=0;i<mapSize;i++)
 56 {
 57 var trobj=document.createElement("tr");
 58 
 59 for(var j=0;j<mapSize;j++)
 60 {
 61 var tdobj=document.createElement("td");
 62 tdobj.style.border="rgb(128,128,255) solid 1px";
 63 tdobj.id=i+"_"+j
 64 tdobj.onclick=tdClick;
 65 
 66 if(i+"_"+j==computerID)
 67 {
 68 tdobj.style.backgroundColor="red";
 69 }
 70 
 71 var txt=document.createTextNode(" ");
 72 tdobj.appendChild(txt);
 73 
 74 trobj.appendChild(tdobj);
 75 }
 76 
 77 tbodyobj.appendChild(trobj);
 78 }
 79 
 80 tabobj.appendChild(tbodyobj);
 81 
 82 document.getElementById("map_div").appendChild(tabobj);
 83 
 84 //默认随机障碍物
 85  for(var i=0;i<za;i++)
 86 {
 87 var _id=Math.round(Math.random()*(mapSize-1)) +"_"+ Math.round(Math.random()*(mapSize-1));
 88 if(document.getElementById(_id).style.backgroundColor=="")
 89 document.getElementById(_id).style.backgroundColor="gray";
 90 }
 91 
 92 for(var i=0;i<mapSize;i++)
 93 {
 94 document.getElementById(i+"_"+(mapSize-1)).style.border="rgb(223,223,223) solid 1px";
 95 document.getElementById((mapSize-1)+"_"+i).style.border="rgb(223,223,223) solid 1px";
 96 document.getElementById(i+"_0").style.border="rgb(223,223,223) solid 1px";
 97 document.getElementById("0_"+i).style.border="rgb(223,223,223) solid 1px";
 98 }
 99 }
100 
101 function tdClick()
102 {
103 if(this.style.backgroundColor=="")
104 {
105 this.style.backgroundColor="gray";
106 
107 up=0;
108 left=0;
109 right=0;
110 down=0;
111 
112 computerXZ();
113 } 
114 }
115 
116 function computerXZ()
117 {
118 var xy=computerID.split("_");
119 var x=xy[0]-0;
120 var y=xy[1]-0;
121 
122 //中心位置
123  var mid=(mapSize-1)/2;
124 
125 //左上角
126  if(x<=mid && y<=mid) 
127 { 
128 //向上
129  if(x<=y)
130 {
131 //向上不通,向左走 //false 表示是判断,true 表示行走
132  if(!computerUp(x,y,false)) 
133 {
134 //向左不通，向右走
135  if(!computerLeft(x,y,false))
136 {
137 //向右不通，向下走
138  if(!computerRight(x,y,false))
139 {
140 //向下不通，向下走(往最长的方向走)
141  if(!computerDown(x,y,false))
142 {
143 
144 direction(up,left,right,down,x,y)
145 }
146 }
147 } 
148 } 
149 }
150 else //向左
151  {
152 if(!computerLeft(x,y,false))
153 {
154 if(!computerUp(x,y,false))
155 {
156 if(!computerDown(x,y,false))
157 {
158 if(!computerRight(x,y,false))
159 {
160 direction(up,left,right,down,x,y)
161 }
162 }
163 } 
164 } 
165 }
166 }
167 //右上角
168  else if(x<=mid && y>=mid)
169 {
170 if(x<=(mapSize-1-y)) //向上
171  {
172 if(!computerUp(x,y,false)) 
173 {
174 if(!computerRight(x,y,false))
175 {
176 if(!computerLeft(x,y,false))
177 {
178 if(!computerDown(x,y,false))
179 {
180 direction(up,left,right,down,x,y)
181 }
182 }
183 } 
184 } 
185 }
186 else //向右
187  {
188 if(!computerRight(x,y,false))
189 {
190 if(!computerUp(x,y,false))
191 {
192 if(!computerDown(x,y,false))
193 {
194 if(!computerLeft(x,y,false))
195 {
196 direction(up,left,right,down,x,y)
197 }
198 }
199 } 
200 } 
201 }
202 }
203 //右下角
204  else if(x>=mid && y>=mid)
205 {
206 if(x>=y) //向下
207  {
208 if(!computerDown(x,y,false)) 
209 {
210 if(!computerRight(x,y,false))
211 {
212 if(!computerLeft(x,y,false))
213 {
214 if(!computerUp(x,y,false))
215 {
216 direction(up,left,right,down,x,y)
217 }
218 }
219 } 
220 } 
221 }
222 else //向右
223  {
224 if(!computerRight(x,y,false))
225 {
226 if(!computerDown(x,y,false))
227 {
228 if(!computerUp(x,y,false))
229 {
230 if(!computerLeft(x,y,false))
231 {
232 direction(up,left,right,down,x,y)
233 }
234 }
235 } 
236 } 
237 }
238 }
239 //左下角
240  else if(x>=mid && y<=mid)
241 {
242 if((mapSize-1-x)<=y) //向下
243  {
244 if(!computerDown(x,y,false)) 
245 {
246 if(!computerLeft(x,y,false))
247 {
248 if(!computerRight(x,y,false))
249 {
250 if(!computerUp(x,y,false))
251 {
252 direction(up,left,right,down,x,y)
253 }
254 }
255 } 
256 } 
257 }
258 else //向左
259  {
260 if(!computerLeft(x,y,false))
261 {
262 if(!computerDown(x,y,false))
263 {
264 if(!computerUp(x,y,false))
265 {
266 if(!computerRight(x,y,false))
267 {
268 direction(up,left,right,down,x,y) 
269 }
270 }
271 } 
272 } 
273 }
274 }
275 
276 }
277 
278 function direction(up,left,right,down,_x,_y)
279 {
280 if(up==0 && left==0 && right==0 && down==0)
281 {
282 alert("恭喜你，赢了！");
283 window.location.href=window.location.href;
284 }
285 else
286 {
287 var arrayDirection=new Array(up,left,right,down);
288 
289 arrayDirection.sort(function(x,y){return y-x;})
290 
291 //对方 往 离自己(对方)最远的那个障碍物走
292  if(up==arrayDirection[0])
293 computerUp(_x,_y,true); 
294 else if(down==arrayDirection[0])
295 computerDown(_x,_y,true); 
296 else if(left==arrayDirection[0])
297 computerLeft(_x,_y,true); 
298 else if(right==arrayDirection[0])
299 computerRight(_x,_y,true); 
300 }
301 }
302 
303 //判断是否输了
304  function isDeath()
305 {
306 for(var i=0;i<mapSize;i++)
307 {
308 if(document.getElementById(i+"_"+(mapSize-1)).style.backgroundColor=="red" ||
309 document.getElementById((mapSize-1)+"_"+i).style.backgroundColor=="red" ||
310 document.getElementById(i+"_0").style.backgroundColor=="red" ||
311 document.getElementById("0_"+i).style.backgroundColor=="red" )
312 {
313 alert("想抓我，没门！");
314 window.location.href=window.location.href;
315 }
316 }
317 }
318 
319 function computerUp(x,y,mode)//向上走
320  {
321 for(var i=x-1;i>=0;i--)
322 {
323 if(document.getElementById(i+"_"+y).style.backgroundColor=="")
324 {
325 isPath=true;
326 up++;
327 }
328 else
329 {
330 isPath=false;
331 break;
332 }
333 }
334 
335 if(isPath || mode)
336 {
337 document.getElementById(computerID).style.backgroundColor="";
338 document.getElementById((x-1)+"_"+y).style.backgroundColor="red";
339 computerID=(x-1)+"_"+y;
340 
341 isDeath();
342 
343 return true;
344 }
345 
346 return false;
347 }
348 
349 function computerLeft(x,y,mode)//向左走
350  {
351 for(var i=y-1;i>=0;i--)
352 {
353 if(document.getElementById(x+"_"+i).style.backgroundColor=="")
354 {
355 isPath=true;
356 left++;
357 }
358 else
359 {
360 isPath=false;
361 break;
362 }
363 }
364 
365 if(isPath || mode)
366 {
367 document.getElementById(computerID).style.backgroundColor="";
368 document.getElementById(x+"_"+(y-1)).style.backgroundColor="red";
369 computerID=x+"_"+(y-1);
370 
371 isDeath();
372 
373 return true
374 }
375 return false;
376 }
377 
378 function computerRight(x,y,mode)//向右走
379  {
380 for(var i=y+1;i<mapSize;i++)
381 {
382 if(document.getElementById(x+"_"+i).style.backgroundColor=="")
383 {
384 isPath=true;
385 right++;
386 }
387 else
388 {
389 isPath=false;
390 break;
391 }
392 }
393 
394 if(isPath || mode)
395 {
396 document.getElementById(computerID).style.backgroundColor="";
397 document.getElementById(x+"_"+(y+1)).style.backgroundColor="red";
398 computerID=x+"_"+(y+1);
399 
400 isDeath();
401 
402 return true
403 }
404 return false;
405 }
406 
407 function computerDown(x,y,mode)//向下走
408  {
409 for(var i=x+1;i<mapSize;i++)
410 {
411 if(document.getElementById(i+"_"+y).style.backgroundColor=="")
412 {
413 isPath=true;
414 down++;
415 }
416 else
417 {
418 isPath=false;
419 break;
420 }
421 }
422 
423 if(isPath || mode)
424 {
425 document.getElementById(computerID).style.backgroundColor="";
426 document.getElementById((x+1)+"_"+y).style.backgroundColor="red";
427 computerID=(x+1)+"_"+y;
428 
429 isDeath();
430 
431 return true;
432 }
433 
434 return false;
435 }
436 </script>
437 </head>
438 <body onload="createMap();" style="font-size:10pt">
439 <form id="form1">
440 <center>
441 <br><br><br>
442 <div id="map_div"></div>
443 <br>
444 *&nbsp;游戏规则：别让红色方块跑到表格的边界上您就赢了，也就是说要将红色方框圈住。
445 </center>
446 </form>
447 </body>
448 </html>

游戏截图：

javascript小游戏源码

  • 海报
海报图正在生成中...
竖版 宽版
赞(0) 打赏
声明：
1、本博客不从事任何主机及服务器租赁业务，不参与任何交易，也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动，信息均摘自网络或来自服务商主动提供；所以对本博客提及的内容不作直接、间接、法定、约定的保证，博客内容也不具备任何参考价值及引导作用，访问者需自行甄别。
2、访问本博客请务必遵守有关互联网的相关法律、规定与规则；不能利用本博客所提及的内容从事任何违法、违规操作；否则造成的一切后果由访问者自行承担。
3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。
4、一旦您访问本博客，即表示您已经知晓并接受了以上声明通告。
文章名称：《javascript小游戏源码》
文章链接：https://www.456zj.com/37743.html
本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。
标签：

相关推荐

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

互动交流中心

Contact：商家投稿、广告投放

QQ交流群：813129754

投稿邮箱：66547997@qq.com

网站建设QQ：2541056232

热门文章

特别推荐

快猫云高防云服务器，美国CTG/成都联通/移动/中国香港/美国高防VPS优惠促销

快猫云怎么样？快猫云服务器好不好？快猫云值不值得购买？快猫云是一家成立于2019年，隶属于快猫网络科技（云南）有限公司运营，是正规持证IDC/ISP/IRCS/CDN/VPN商家，自营有国内雅安高防、浙江BGP企业线路、香港CN2线路、国外服务器产品等，非常适合需要稳定的线路的用户，如游戏、企业建站业务需求和各种负载较高的项目，同时还有自营的高性能、高配置的BGP线路高防物理机。

51IDC自营 香港 日本 美国 机房

51IDC-美国/香港/日本/韩国/高性价比服务器，全球直连CN2/GIA优质精品线路，优惠进行中，欢迎咨询

。51IDC（安畅网络）全球卓越混合云集成服务商，我们在全球运营20+数据中心，也致力于云计算领域的部署和落地能力，接入500+PoP点，并建立广泛的云端生态链接网络，打通跨地域，跨终端，跨生态的连接，为各类业务构建灵活IT架构。

热门标签

fpga(1)pages(2)threadlocalmap(1)sftptest(1)css(3)数独(1)登陆(1)毕业生(1)使用(3)类库(1)smtp(6)url(7)国外(1)盘子(1)加密(3)马里奥(1)电源(1)mp(1)小游戏(12)共享(2)机架式(1)黑客(3)httpsession(1)mike(1)管理员(1)appsession(1)curlopt(6)articles(3)存储(8)resources(3)

网站统计

  • 日志总数：9664
  • 评论总数：4459
  • 标签总数：2363
  • 页面总数：4
  • 分类总数：33
  • 链接总数：0
  • 用户总数：1
  • 最后更新：2023-10-11