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插件之validation插件
Mar 29 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jquery简易手风琴插件的封装
Oct 13 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
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php获取图片信息的方法详解
2015/12/10 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python程序退出方式小结
2017/12/09 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Python内置加密模块用法解析
2019/11/25 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
军训的自我鉴定
2013/12/10 职场文书
初中音乐教学反思
2014/01/12 职场文书
农民工创业典型事迹
2014/01/25 职场文书
挂科检讨书范文
2014/02/20 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
信用卡收入证明范本
2015/06/12 职场文书
大学生读书笔记大全
2015/07/01 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis