jQuery实现数字华容道小游戏(实例代码)


Posted in jQuery onJanuary 16, 2020

jQuery实现数字华容道小游戏(实例代码)

<!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 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery实现轮播图效果demo
Jan 11 #jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 #jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 #jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 #jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 #jQuery
jQuery操作动画完整实例分析
Jan 10 #jQuery
jQuery操作事件完整实例分析
Jan 10 #jQuery
You might like
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
一段防盗连的PHP代码
2006/12/06 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
php写的简易聊天室代码
2011/06/04 PHP
php验证session无效的解决方法
2014/11/04 PHP
PHP 中常量的知识整理
2017/04/14 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python daemon守护进程实现
2016/08/27 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
Joules美国官网:出色的英国风格
2017/10/30 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
元旦活动感言
2014/03/08 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB