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

154 阅读 0 评论 102 点赞

我是靠谱客的博主彩色石头，最近开发中收集的这篇文章主要介绍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实现数字华容道小游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对靠谱客网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！