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

2024-12-15 10:28:54

<!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制作拼图小游戏

源代码思路分析: [一]如何生成图片网格,我想到两种方法: (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实现简易的天天爱消除小游戏

今天分享一枚小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定时器有额外的意思,本来我以为它就是简单的一个延时动画,其实他是在等待另外一个函数执行完毕.-_-||.最后还是很高兴能写出来,也改进了一些源
jQuery网页版打砖块小游戏源码分享

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

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

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

<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>数字华容道</title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> *{
纯JavaScript 实现flappy bird小游戏实例代码

前言: <flappy bird>是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红.2014年2月,<Flappy Bird>被开发者本人从苹果及谷歌应用商店撤下.2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式.游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍. 正文: 接下来就是一步一步来实现它步骤1:页面布局,这儿就不多说了,页面内容如下:
Python实现Pig Latin小游戏实例代码

前言: 本文研究的主要是Python实现pig Latin小游戏的简单代码,具体介绍如下. Pig Latin是一个语言游戏. 步骤: 1.让用户输入一个英文单词 2.确保用户输入一个有效单词 3.将单词转换成Pig Latin 4.显示转换结果一.Input 函数:raw_input()用于输出一个字符串并等待键盘输入某字符串,最后以Enter(或Return)结束输入 original = raw_input("Enter a word:") print original 上述中
Android数字华容道小游戏开发

目的上周新一期的最强大脑出来了,虽然上季被称为最强黑幕,不过呢.我决定还是看看= =.它里面第一关是叫做数字华容道.说白了,就是和拼图差不多.一开始我准备下一个玩玩的.结果没搜到.所以决定写了一个.最后效果差不多是这样: 思路以及实现首先,我们应该考虑如何去实现这个效果.细想一下,其实和之前的2048有点像,但是又不是完全一直.于是,便又折腾了一波.这次布局和内容项参考之前2048的,下面放上代码: 自定义一个frame layout,我们先绘制里面的数字: private void ini
Android 实现扫雷小游戏实例代码

Android 实现扫雷小游戏实例最近学习Android 应用编程,抽空做个小应用,大家熟悉的扫雷应用,练手用, 以下是实现代码: MainActivity 类 public class MainActivity extends Activity implements OnClickListener, OnLongClickListener { // 最外层布局 LinearLayout textviews; LinearLayout buttons; int[][] map = new in
C++实现产生随机数和相应的猜拳小游戏实例代码

一.简介 c++中,产生随机数的通用方法就是调用 srand()和 rand() 函数. Rand 单纯的rand()会返回一个0至RAND_MAX之间的随机数值,而RAND_MAX的值与int位数有关,最小是32767.不过rand()是一次性的,因为系统默认的随机数种子为1,只要随机数种子不变,其生成的随机数序列就不会改变. 其实,对于rand()的范围,我们是可以进行人为设定的,只需要在宏定义中定义一个random(int x)函数,就可以生成范围为0至x的随机数值.当然,也可以定义为r
iOS 动画实战之钓鱼小游戏实例代码

前言最近写了一款钓鱼小游戏,自己平时也没做过游戏,本来以为这种游戏要用cocos2d什么的实现,后来发现其实动画就可以实现很棒的效果,先看看效果图. 思维导图首先我们看下思维导图,本游戏主要分为4大块,其中鱼的实现最为复杂思维导图项目结构准备工作首先将需要的图准备好,这个鱼其实就是一组图片,图片大小固定,每一帧位置变化,所以看起来是一个上下游动的鱼. 单张图片鱼钩模块摆动动画鱼钩的摆动范围是[M_PI/4.0,-M_PI/4.0] (垂直向下为0度,顺时针为正),这里利用了计
python实现大战外星人小游戏实例代码

主程序 import pygame from pygame.sprite import Group from settings import Settings from game_stats import gameStats from ship import Ship from button import Button import game_functions as gf def run_game(): #初始化背景设置 pygame.init() #创建一个Settings实例,并将其储存在
C/C++仿华容道小游戏

本文实例介绍了C++模仿华容道小游戏实现代码,分享给大家供大家参考,具体内容如下 #include <stdio.h> #include <stdlib.h> #include <time.h> #include <stdbool.h> #define maxnum 16 #define colnum 4 bool numexists(int *numbers, int length, int num); int getnumber(int **number

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

相关推荐

随机推荐