jQuery实现数字华容道小游戏(实例代码)
2020-05-09 04:06
2076 查看
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>数字华容道</title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> *{ padding: 0px; margin: 0px; } #btns>button{ width: 100px; height: 30px; border: none; background:#0082df; color:white; } #content{ text-align: center; margin: 0 auto; } #grid{ border: 1px solid #0082df; width: 300px; margin: 20px auto; height: 300px; } #grid>div{ float: left; width: 33%; background: gray; height: 33%; margin-bottom:1px; margin-right :1px; } .num{ background:#0082df; width: 99%; height: 99%; color:white; font-size: 30px; font-weight: bold; line-height:99px; } </style> </head> <body> <div id="content"> <h1>步数<span id="count">0</span></h1> <div id="grid"> </div> <div id="btns"> <button>重新开始</button> </div> </div> <script type="text/javascript"> var arr = []; var count=0; $('button').click(function(){ count=0; $('#count').html(count); arr=[]; load(); }); function load(){ for(var i=0;arr.length<8;i++){ var num = Math.ceil(Math.random()*8) if(arr.indexOf(num)==-1){ arr.push(num) } } arr.push(""); rander(); } load(); function rander(){ var html=""; for(var i=0;i<arr.length;i++){ if(arr[i]==""){ html+="<div></div>"; }else{ html+="<div><div οnclick='toMove(this)' class='num'>"+arr[i]+"</div></div>"; } } $('#grid').html(html); } function toMove(obj){ var value=Number($(obj).text()); var index=arr.indexOf(value); if(arr[index+3]==""){ arr[index]=arr[index+3]; arr[index+3]=value; count++; rander(); } if(arr[index-3]==""){ arr[index]=arr[index-3]; arr[index-3]=value; count++; rander(); } if(arr[index+1]==""){ arr[index]=arr[index+1]; arr[index+1]=value; count++; rander(); } if(arr[index-1]==""){ arr[index]=arr[index-1]; arr[index-1]=value; count++; rander(); } $('#count').html(count); if(endGame()){ alert("成功"); } }; function endGame(){ arr[arr.indexOf("")]=9; for(var i=0;i<arr.length-2;i++){ if(arr[arr.length-1]==9){ if(arr[i]>arr[i+1]){ arr[arr.indexOf(9)]=""; return false; } }else{ arr[arr.indexOf(9)]=""; return false; } } arr[arr.indexOf(9)]=""; return true; } </script> </body> </html>
总结
以上所述是小编给大家介绍的jQuery实现数字华容道小游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- 基于jquery的设置页面文本框 只能输入数字的实现代码
- 纯JavaScript 实现flappy bird小游戏实例代码
- jQuery实现table中的tr上下移动并保持序号不变的实例代码
- jQuery 选择器项目实例分析及实现代码
- jQuery实现拖动调整表格单元格大小的代码实例
- javascript实现的猜数小游戏完整实例代码
- Android 实现扫雷小游戏实例代码
- jQuery实现表头固定效果的实例代码
- jQuery实现图片信息的浮动显示实例代码
- jQuery仅用3行代码实现的显示与隐藏功能完整实例
- Android自定义View实现带数字的进度条实例代码
- jQuery实现点击弹出背景变暗遮罩效果实例代码
- jquery 实现回车登录详解及实例代码
- java 实现判断回文数字的实例代码
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
- asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- jquery实现的滚动新闻(多个实例代码)
- 基于jQuery实现仿51job城市选择功能实例代码
- jQuery轻松实现表格的隔行变色和点击行变色的实例代码