主页 / 网络编程 /

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

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了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实现数字华容道小游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
如果你觉得本文对你有帮助，欢迎网络推广网站推广转载，烦请注明出处，谢谢！

上一篇：vue-cli3 取消eslint校验代码的解决办法 下一篇：js实现点击生成随机div

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by