经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery实现扫雷小游戏
来源:jb51  时间:2022/5/9 14:22:22  对本文有异议

本文实例为大家分享了jQuery实现扫雷小游戏的具体代码,供大家参考,具体内容如下

扫雷小游戏实现思路:

设计为9*9简单面板,每次随机生成10颗雷,然后计算每颗雷周围八个位置上每个位置应该标记的数字(该数字表示此位置周围八个位置上存在雷的数量),基本原理大致如此。交互问题以简单的方式实现即可。

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  5.  
  6. <style>
  7. ?? ?td{
  8. ?? ??? ?border:1px solid #ccc;
  9. ?? ??? ?width:70px;
  10. ?? ??? ?height:70px;
  11. ?? ?}
  12. </style>
  13. </head>
  14. <body>
  15. <table style="border:1px solid #2e6377;background-color:#789dc3;text-align:center;margin-top:60px;margin-left:60px;" border="1px">
  16. ?? ?<tr>
  17. ?? ??? ?<td weizhi="1-9"></td>
  18. ?? ??? ?<td weizhi="2-9"></td>
  19. ?? ??? ?<td weizhi="3-9"></td>
  20. ?? ??? ?<td weizhi="4-9"></td>
  21. ?? ??? ?<td weizhi="5-9"></td>
  22. ?? ??? ?<td weizhi="6-9"></td>
  23. ?? ??? ?<td weizhi="7-9"></td>
  24. ?? ??? ?<td weizhi="8-9"></td>
  25. ?? ??? ?<td weizhi="9-9"></td>
  26. ?? ?</tr>
  27. ?? ?<tr>
  28. ?? ??? ?<td weizhi="1-8"></td>
  29. ?? ??? ?<td weizhi="2-8"></td>
  30. ?? ??? ?<td weizhi="3-8"></td>
  31. ?? ??? ?<td weizhi="4-8"></td>
  32. ?? ??? ?<td weizhi="5-8"></td>
  33. ?? ??? ?<td weizhi="6-8"></td>
  34. ?? ??? ?<td weizhi="7-8"></td>
  35. ?? ??? ?<td weizhi="8-8"></td>
  36. ?? ??? ?<td weizhi="9-8"></td>
  37. ?? ?</tr>
  38. ?? ?<tr>
  39. ?? ??? ?<td weizhi="1-7"></td>
  40. ?? ??? ?<td weizhi="2-7"></td>
  41. ?? ??? ?<td weizhi="3-7"></td>
  42. ?? ??? ?<td weizhi="4-7"></td>
  43. ?? ??? ?<td weizhi="5-7"></td>
  44. ?? ??? ?<td weizhi="6-7"></td>
  45. ?? ??? ?<td weizhi="7-7"></td>
  46. ?? ??? ?<td weizhi="8-7"></td>
  47. ?? ??? ?<td weizhi="9-7"></td>
  48. ?? ?</tr>
  49. ?? ?<tr>
  50. ?? ??? ?<td weizhi="1-6"></td>
  51. ?? ??? ?<td weizhi="2-6"></td>
  52. ?? ??? ?<td weizhi="3-6"></td>
  53. ?? ??? ?<td weizhi="4-6"></td>
  54. ?? ??? ?<td weizhi="5-6"></td>
  55. ?? ??? ?<td weizhi="6-6"></td>
  56. ?? ??? ?<td weizhi="7-6"></td>
  57. ?? ??? ?<td weizhi="8-6"></td>
  58. ?? ??? ?<td weizhi="9-6"></td>
  59. ?? ?</tr>
  60. ?? ?<tr>
  61. ?? ??? ?<td weizhi="1-5"></td>
  62. ?? ??? ?<td weizhi="2-5"></td>
  63. ?? ??? ?<td weizhi="3-5"></td>
  64. ?? ??? ?<td weizhi="4-5"></td>
  65. ?? ??? ?<td weizhi="5-5"></td>
  66. ?? ??? ?<td weizhi="6-5"></td>
  67. ?? ??? ?<td weizhi="7-5"></td>
  68. ?? ??? ?<td weizhi="8-5"></td>
  69. ?? ??? ?<td weizhi="9-5"></td>
  70. ?? ?</tr>
  71. ?? ?<tr>
  72. ?? ??? ?<td weizhi="1-4"></td>
  73. ?? ??? ?<td weizhi="2-4"></td>
  74. ?? ??? ?<td weizhi="3-4"></td>
  75. ?? ??? ?<td weizhi="4-4"></td>
  76. ?? ??? ?<td weizhi="5-4"></td>
  77. ?? ??? ?<td weizhi="6-4"></td>
  78. ?? ??? ?<td weizhi="7-4"></td>
  79. ?? ??? ?<td weizhi="8-4"></td>
  80. ?? ??? ?<td weizhi="9-4"></td>
  81. ?? ?</tr>
  82. ?? ?<tr>
  83. ?? ??? ?<td weizhi="1-3"></td>
  84. ?? ??? ?<td weizhi="2-3"></td>
  85. ?? ??? ?<td weizhi="3-3"></td>
  86. ?? ??? ?<td weizhi="4-3"></td>
  87. ?? ??? ?<td weizhi="5-3"></td>
  88. ?? ??? ?<td weizhi="6-3"></td>
  89. ?? ??? ?<td weizhi="7-3"></td>
  90. ?? ??? ?<td weizhi="8-3"></td>
  91. ?? ??? ?<td weizhi="9-3"></td>
  92. ?? ?</tr>
  93. ?? ?<tr>
  94. ?? ??? ?<td weizhi="1-2"></td>
  95. ?? ??? ?<td weizhi="2-2"></td>
  96. ?? ??? ?<td weizhi="3-2"></td>
  97. ?? ??? ?<td weizhi="4-2"></td>
  98. ?? ??? ?<td weizhi="5-2"></td>
  99. ?? ??? ?<td weizhi="6-2"></td>
  100. ?? ??? ?<td weizhi="7-2"></td>
  101. ?? ??? ?<td weizhi="8-2"></td>
  102. ?? ??? ?<td weizhi="9-2"></td>
  103. ?? ?</tr>
  104. ?? ?<tr>
  105. ?? ??? ?<td weizhi="1-1"></td>
  106. ?? ??? ?<td weizhi="2-1"></td>
  107. ?? ??? ?<td weizhi="3-1"></td>
  108. ?? ??? ?<td weizhi="4-1"></td>
  109. ?? ??? ?<td weizhi="5-1"></td>
  110. ?? ??? ?<td weizhi="6-1"></td>
  111. ?? ??? ?<td weizhi="7-1"></td>
  112. ?? ??? ?<td weizhi="8-1"></td>
  113. ?? ??? ?<td weizhi="9-1"></td>
  114. ?? ?</tr>
  115. </table>
  116. <div style="width:500px;height:200px;margin-left:60px;margin-top:20px;text-align:center;color:red;display:none;" id="tips"><h1>哦,NO!,你挖中了炸弹!</h1></div>
  117. <!--JS部分-->
  118. <script>
  119. $(document).ready(function(){
  120. ?? ?var radom_weizhi=new Array();
  121. ?? ?var leiqu_weizhi=radom_lei();
  122. ?? ?var eight_arr=new Array();
  123. ?? ?$.each(leiqu_weizhi,function(k,v){
  124. ?? ??? ?//$('td[weizhi="'+v+'"]').css({'background-color':'red'});
  125. ?? ??? ?$('td[weizhi="'+v+'"]').html('<b>炸弹</b>');
  126. ?? ??? ?$('td[weizhi="'+v+'"]').attr('type','TNT');
  127. ?? ??? ?//隐藏
  128. ?? ??? ?$('td[weizhi="'+v+'"] b').css('display','none');
  129. ?? ??? ?//该雷区周围的八个位置标记数字
  130. ?? ??? ?//---获取每个雷区周围的八个位置
  131. ?? ??? ?var xy_arr=v.split('-');
  132. ?? ??? ?var x=xy_arr[0],y=xy_arr[1];
  133. ?? ??? ?//获取每个雷区周围的八个位置
  134. ?? ??? ?eight_arr.push(getEightPosition(v,leiqu_weizhi));
  135. ?? ?})
  136. ?? ?//console.log(eight_arr);
  137. ?? ?//编号区域
  138. ?? ?//---写入一个一维数组,并去除重复值
  139. ?? ?var zhouwei_arr=new Array();
  140. ?? ?$.each(eight_arr,function(k,v){
  141. ?? ??? ?$.each(v,function(kk,vv){
  142. ?? ??? ??? ?if($.inArray(vv,zhouwei_arr)==-1){
  143. ?? ??? ??? ??? ?zhouwei_arr.push(vv);
  144. ?? ??? ??? ?}
  145. ?? ??? ?})
  146. ?? ?})
  147. ?? ?//console.log(zhouwei_arr);
  148. ?? ?$.each(zhouwei_arr,function(k,v){
  149. ?? ??? ?//编号去用绿色表示
  150. ?? ??? ?//$('td[weizhi="'+v+'"]').css('background-color','#9ce6d9');
  151. ?? ??? ?$('td[weizhi="'+v+'"]').attr('type','NUMBER');
  152. ?? ?})
  153. ?? ?//编号区域标记数字
  154. ?? ?signLeiNumber(zhouwei_arr,leiqu_weizhi);
  155. ?? ?//空白区域
  156. ?? ?$("td").each(function(){
  157. ?? ??? ?if($.inArray($(this).attr('weizhi'),zhouwei_arr)==-1){
  158. ?? ??? ??? ?if($.inArray($(this).attr('weizhi'),leiqu_weizhi)==-1){
  159. ?? ??? ??? ??? ?//空位置
  160. ?? ??? ??? ??? ?//$(this).css('background-color','white');
  161. ?? ??? ??? ??? ?$(this).attr('type','BLANK');
  162. ?? ??? ??? ?}
  163. ?? ??? ?}
  164. ?? ?})
  165. ?? ?//遮罩棋盘
  166. ?? ?$('td').css('background-color','#6ad0ef');
  167. })
  168. //事件
  169. $(document).ready(function(){
  170. ?? ?$('td').click(function(){
  171. ?? ??? ?console.log($(this).attr('type'));
  172. ?? ??? ?if($(this).attr('type')=='BLANK'){
  173. ?? ??? ??? ?//空白区域
  174. ?? ??? ??? ?$('td[type="BLANK"').css('background-color','white');
  175. ?? ??? ?}
  176. ?? ??? ?if($(this).attr('type')=='NUMBER'){
  177. ?? ??? ??? ?$(this).css('background-color','#9ce6d9');
  178. ?? ??? ??? ?$(this).find('b').css('display','block');
  179. ?? ??? ?}
  180. ?? ??? ?if($(this).attr('type')=='TNT'){
  181. ?? ??? ??? ?$(this).css('background-color','red');
  182. ?? ??? ??? ?$(this).find('b').css('display','block');
  183. ?? ??? ??? ?$('td[type="TNT"]').each(function(){
  184. ?? ??? ??? ??? ?$(this).find('b').css('display','block');
  185. ?? ??? ??? ??? ?$(this).css('background-color','red');
  186. ?? ??? ??? ?})
  187. ?? ??? ??? ?$('td[type="NUMBER"]').each(function(){
  188. ?? ??? ??? ??? ?$(this).css('background-color','#9ce6d9');
  189. ?? ??? ??? ??? ?$(this).find('b').css('display','block');
  190. ?? ??? ??? ?})
  191. ?? ??? ??? ?$('#tips').css('display','block');
  192. ?? ??? ?}
  193. ?? ??? ?
  194. ?? ?})
  195. })
  196. //编号区域标记数字
  197. function signLeiNumber(zhouwei_arr,leiqu_weizhi){
  198. ?? ?$.each(zhouwei_arr,function(k,v){
  199. ?? ??? ?zhouWeiLeiNumber(v,leiqu_weizhi);
  200. ?? ?})
  201. }
  202. //获取每个编号区块的八个周边位置的雷的数量,并做出标记
  203. function zhouWeiLeiNumber(v,leiqu_weizhi)
  204. {
  205. ?? ?var xy_arr=v.split('-'),eight_position_arr=new Array();
  206. ?? ?var x=xy_arr[0],y=xy_arr[1];
  207. ?? ?//---左上角
  208. ?? ?var x1=x-1,y1=parseInt(y)+1;
  209. ?? ?eight_position_arr=getPosition(x1,y1,eight_position_arr);
  210. ?? ?//---正上方
  211. ?? ?var x2=x,y2=parseInt(y)+1;
  212. ?? ?eight_position_arr=getPosition(x2,y2,eight_position_arr);
  213. ?? ?//---右上角
  214. ?? ?var x3=parseInt(x)+1,y3=parseInt(y)+1;
  215. ?? ?eight_position_arr=getPosition(x3,y3,eight_position_arr);
  216. ?? ?//---右边一个
  217. ?? ?var x4=parseInt(x)+1,y4=y;
  218. ?? ?eight_position_arr=getPosition(x4,y4,eight_position_arr);
  219. ?? ?//---右下角
  220. ?? ?var x5=parseInt(x)+1,y5=y-1;
  221. ?? ?eight_position_arr=getPosition(x5,y5,eight_position_arr);
  222. ?? ?//---正下方
  223. ?? ?var x6=x,y6=y-1;
  224. ?? ?eight_position_arr=getPosition(x6,y6,eight_position_arr);
  225. ?? ?//---左下角
  226. ?? ?var x7=x-1,y7=y-1;
  227. ?? ?eight_position_arr=getPosition(x7,y7,eight_position_arr);
  228. ?? ?//---左边一个
  229. ?? ?var x8=x-1,y8=y;
  230. ?? ?eight_position_arr=getPosition(x8,y8,eight_position_arr);
  231. ?? ?var num_lei=0;
  232. ?? ?$.each(eight_position_arr,function(kk,vv){
  233. ?? ??? ?if($.inArray(vv,leiqu_weizhi)>-1){
  234. ?? ??? ??? ?num_lei++;
  235. ?? ??? ?}
  236. ?? ?})
  237. ?? ?$('td[weizhi="'+v+'"]').html('<b>'+num_lei+'</b>');
  238. ?? ?//隐藏
  239. ?? ?$('td[weizhi="'+v+'"] b').css('display','none');
  240. }
  241. //不在边界之外
  242. function getPosition(x,y,arr)
  243. {
  244. ?? ?if((x>=1 && x<=9) && (y>=1 && y<=9)){
  245. ?? ??? ?arr.push(x+'-'+y);
  246. ?? ?}
  247. ?? ?return arr;
  248. }
  249. //获取每个雷区周围的八个位置
  250. function getEightPosition(v,leiqu_weizhi){
  251. ?? ?var xy_arr=v.split('-'),eight_position_arr=new Array();
  252. ?? ?var x=xy_arr[0],y=xy_arr[1];
  253. ?? ?//从该雷区的左上角位置开始找
  254. ?? ?//---左上角
  255. ?? ?var x1=x-1,y1=parseInt(y)+1;
  256. ?? ?eight_position_arr=checkPosition(x1,y1,eight_position_arr,leiqu_weizhi);
  257. ?? ?//---正上方
  258. ?? ?var x2=x,y2=parseInt(y)+1;
  259. ?? ?eight_position_arr=checkPosition(x2,y2,eight_position_arr,leiqu_weizhi);
  260. ?? ?//---右上角
  261. ?? ?var x3=parseInt(x)+1,y3=parseInt(y)+1;
  262. ?? ?eight_position_arr=checkPosition(x3,y3,eight_position_arr,leiqu_weizhi);
  263. ?? ?//---右边一个
  264. ?? ?var x4=parseInt(x)+1,y4=y;
  265. ?? ?eight_position_arr=checkPosition(x4,y4,eight_position_arr,leiqu_weizhi);
  266. ?? ?//---右下角
  267. ?? ?var x5=parseInt(x)+1,y5=y-1;
  268. ?? ?eight_position_arr=checkPosition(x5,y5,eight_position_arr,leiqu_weizhi);
  269. ?? ?//---正下方
  270. ?? ?var x6=x,y6=y-1;
  271. ?? ?eight_position_arr=checkPosition(x6,y6,eight_position_arr,leiqu_weizhi);
  272. ?? ?//---左下角
  273. ?? ?var x7=x-1,y7=y-1;
  274. ?? ?eight_position_arr=checkPosition(x7,y7,eight_position_arr,leiqu_weizhi);
  275. ?? ?//---左边一个
  276. ?? ?var x8=x-1,y8=y;
  277. ?? ?eight_position_arr=checkPosition(x8,y8,eight_position_arr,leiqu_weizhi);
  278. ?? ?
  279. ?? ?return eight_position_arr;
  280. }
  281.  
  282. //不在边界之外且不在任何雷区的位置上
  283. function checkPosition(x,y,arr,leiqu_weizhi)
  284. {
  285. ?? ?if((x>=1 && x<=9) && (y>=1 && y<=9)){
  286. ?? ??? ?if($.inArray((x+'-'+y).toString(),leiqu_weizhi)==-1){
  287. ?? ??? ??? ?//不在任何雷区的位置上
  288. ?? ??? ??? ?arr.push(x+'-'+y);
  289. ?? ??? ?}
  290. ?? ?}
  291. ?? ?return arr;
  292. }
  293. //随机生成10个雷
  294. function radom_lei(){
  295. ?? ?var leiqu_x=new Array(),leiqu_y=new Array(),leiqu_weizhi=new Array();
  296. ?? ?for(var a=1;a<=10;a++){
  297. ?? ??? ?var radom_num_x=(10*Math.random()).toString().substring(0,1);
  298. ?? ??? ?if(radom_num_x==0){
  299. ?? ??? ??? ?if(leiqu_x.length==0){
  300. ?? ??? ??? ??? ?radom_num_x=1;
  301. ?? ??? ??? ?}else{
  302. ?? ??? ??? ??? ?radom_num_x=leiqu_x.length;
  303. ?? ??? ??? ?}
  304. ?? ??? ?}
  305. ?? ??? ?leiqu_x.push(radom_num_x);
  306. ?? ??? ?//console.log(leiqu_x);
  307. ?? ??? ?var radom_num_y=(10*Math.random()).toString().substring(0,1);
  308. ?? ??? ?if(radom_num_y==0){
  309. ?? ??? ??? ?if(leiqu_y.length==0){
  310. ?? ??? ??? ??? ?radom_num_y=1;
  311. ?? ??? ??? ?}else{
  312. ?? ??? ??? ??? ?radom_num_y=leiqu_y.length;
  313. ?? ??? ??? ?}
  314. ?? ??? ?}
  315. ?? ??? ?leiqu_y.push(radom_num_y);
  316. ?? ??? ?//console.log(leiqu_y);
  317. ?? ??? ?//写入位置数据
  318. ?? ??? ?leiqu_weizhi.push(radom_num_x+'-'+radom_num_y);
  319. ?? ??? ?//console.log(leiqu_weizhi);
  320. ?? ?}
  321. ?? ?return leiqu_weizhi;
  322. }
  323. </script>
  324. </body>
  325. </html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号