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实现数字华容道小游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

时间: 2020-01-14

jQuery实现贪吃蛇小游戏(附源码下载)

前言 相信贪吃蛇的游戏大家都玩过.在那个水果机还没有流行,人手一部诺基亚的时代,贪吃蛇是手机中的必备游戏.笔者闲的无聊的时候就拿出手机来玩上几局,挑战一下自己的记录. 后来上大学了,用c语言做过贪吃蛇的游戏,不过主要是通过函数来控制(PS:现在让我看代码都看不懂(⊙﹏⊙)).现在学习前端框架之后,通过jQuery来实现一个贪吃蛇的游戏效果,虽然游戏界面比(bu)较(ren)简(zhi)陋(shi),但是主要学习一下游戏中面向对象和由局部到整体的思想. 设计思想 在开始写代码前首先让我们来构思一下

jQuery实现拼图小游戏(实例讲解)

小熊维尼拼图 jQuery代码实现拼图小游戏,鼠标选中拼块,用上下左右键移动拼块. html代码 <div id="box-div"> <!--走不通时的提示!--> <div id="tips"> <p>\(╯-╰)/ 哎呦,走不通啦!</p> </div> <div id="container"> <div class="row"&g

jQuery制作拼图小游戏

源代码思路分析: [一]如何生成图片网格,我想到两种方法: (1)把这张大图切成16张小图,然后用img标签的src (2)只有一张大图,然后每个元素的背景图用css的background-position进行切割定位,这样就需要16个数组[0,0],[-150,0],[-300,0]..........(我采用这种) [二]图片背景定位数组与布局定位数组 在选择了使用CSS定位切图,就需要生成数据. 需要的css背景 定位数组为:[0,0],[-150,0],[-300,0],[-450,0]

jQuery网页版打砖块小游戏源码分享

这是一款基于jQuery实现网页版打砖块小游戏源码,满满的童年回忆. 为大家分享的jQuery实现网页版打砖块小游戏源码如下 效果演示 源码下载 <!DOCTYPE html> <html lang="en" > <head> <meta charset="gb2312" /> <title>jQuery网页版打砖块小游戏源码</title> <link href="css/ma

jQuery实现简易的天天爱消除小游戏

今天分享一枚小demo:<天天爱消除游戏>,我想大家对这个游戏不陌生吧!?近期挺火的一款手游 妙味的讲师也很喜欢玩这款游戏 ,课余时间就写了个简易版天天的爱消除,除了PC端以外,试试在iPad.iPhone上玩吧~ 涉及知识点:JS.HTML5; 游戏截图: CSS: *{ margin:0; padding:0;} #ul1{ position:relative; margin:20px auto; background:#1b1f2b; overflow:hidden;} #ul1 li{

基于jquery实现九宫格拼图小游戏

九宫格拼图小游戏是小时候比较常见的小游戏之一.闲着无聊就用js简单写了一个. 游戏的玩法很简单.九宫格中有八个小图片.随机打乱之后,将八张小图片拼接成一个完整的图. html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <style> body{ border: 0; } .out{ width: 606px; height: 606px; margin: 0 aut

jQuery编写网页版2048小游戏

大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起来会遇到各种问题.比如,在最后判断游戏是否结束的时候,我写的语句语法是对的,但就是不执行.最后通过对视频源码的分析对比,发现原作者写的一个setTimeout定时器有额外的意思,本来我以为它就是简单的一个延时动画,其实他是在等待另外一个函数执行完毕.-_-||.最后还是很高兴能写出来,也改进了一些源

C语言控制台版2048小游戏

效果不好,见谅,没事就写了一个!!! /** * @author Routh * @main.c * @date 2014, 4, 26 */ #include <stdio.h> #include <stdlib.h> #include <conio.h> #include <windows.h> // console width #define CONSOLE_WIDTH 80 #define BOX_WIDTH 10 int BOX[4][4] = {

javascript版2048小游戏

没有技术含量,只是用来练习代码逻辑的.为了代码结构清晰,我把逻辑控制部分写在全局变量里,用户界面操作封装在UI对象里,大概就这样了.仅供参考.工作时候,我的编码风格有人吐槽太乱了,所以我想试着写一个不是那么乱的东西出来.. 复制代码 代码如下: <HTML> <head> <title>2048 DEMO</title> <meta charset='utf-8' /> <!--  708616 javascript present  ht

原生JavaScript编写canvas版的连连看游戏

本文实例为大家分享了JavaScript编写canvas版的连连看游戏的具体实现代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ /*border: 1px solid #D1D1D1; */ overflow: hidden; pos

使用Javascript写的2048小游戏

最近心血来潮,项目结束了,使用javascript写个小游戏,练练收吧,写的不好还请各位大侠给出批评建议. HTML代码如下 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="2048.css"/> <scri

用Python写一个无界面的2048小游戏

以前游戏2048火的时候,正好用其他的语言编写了一个,现在学习python,正好想起来,便决定用python写一个2048,由于没学过python里面的界面编程,所以写了一个极其简单的无界面2048.游戏2048的原理和实现都不难,正好可以拿来练手,要是不知道这游戏的话,可以去网上查一下,或者下载一个到手机来玩一下,我就不在说其原理.我知道不放图的话大家一点兴趣都没,下面首先放一张游戏成型图,然后我们在来讲如何一步步用最基础的知识来实现. 一.生成4*4的矩阵 游戏的第一步便是生成一个4*4的矩

Java完美实现2048小游戏

完美地模仿了2048游戏,是根据网友的一个2048改的. Block.java import javax.swing.*; import java.awt.*; public class Block extends JLabel { private int value; public Block() { value = 0;//初始化值为0 setFont(new Font("font", Font.PLAIN, 40));//设定字体 setBackground(Color.gray

lua实现的2048小游戏

lua实现的2048小游戏,只要可以运行lua脚本的环境下都可以玩. 复制代码 代码如下: --[[============================================================================= #     FileName: 2048.lua #         Desc: lua console 2048 #       Author: hanxi #        Email: hanxi.info@gmail.com #    

C语言实现2048小游戏

本文实例为大家分享了C语言实现2048小游戏的具体代码,供大家参考,具体内容如下 具有以下特点: 1.linux下完成 2.非堵塞键盘读取 3.随机生成2和4 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #define TTY_PATH "/dev/tty" #define STTY_ON "stty raw -echo -F" #define STTY_O

Android实现2048小游戏

本文实例介绍了Android实现2048小游戏的相关代码,分享给大家供大家参考,具体内容如下 根据界面,主要实现4*4的格子方块比较麻烦,其他的都挺简单的.总体为实现4*4的格子,自定义GridLayout,并在其中添加触摸监听事件,进行一系列的操作,从而实现游戏的逻辑,最后再添加动画效果即可完成. 下面是设计思路: 一.GameView的设计 首先自定义一个类,继承GridLayout,添加两个构造方法 public class GameView extends GridLayout { //