基于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 auto;
    border: 1px solid black;
  }
  .in{
    width: 200px;
    height: 200px;
    background-color:red;
    float: left;
    border: 1px solid black;
  }
  .no_see{
    width: 200px;
    height: 200px;
    background-color:white;
    float: left;
    border: 1px solid black;
  }
  .btn{
    width: 50px;
    height: 25px;
    margin: 50px auto;
  }
  .begin{
    width: 50px;
    height: 25px;
  }
</style>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>my game</title>
</head>
<body>
  <div class="out">
    <div class="in"><img src="1.png" alt="" /></div>
    <div class="in"><img src="2.png" alt="" /></div>
    <div class="in"><img src="3.png" alt="" /></div>
    <div class="in"><img src="4.png" alt="" /></div>
    <div class="in"><img src="5.png" alt="" /></div>
    <div class="in"><img src="6.png" alt="" /></div>
    <div class="in"><img src="7.png" alt="" /></div>
    <div class="in"><img src="8.png" alt="" /></div>
    <div class='no_see'></div>
  </div>
</body>
</html>

这里使用div来布局。具体实现就不啰嗦了。文章的重点是js的实现。

实现图片的互换

图片的互换其实就是html中的div互换。当点击图片时,和游戏中的空白图进行交换。

$('.in').click(function(){
  var t = $(this).clone(); //复制当前点击的div
  $('.no_see').before(t); //在空白div的前面插入复制的div
  $(this).before($('.no_see')); //把空白div插入到点击div的前面
  t.before($(this)) //把点击的div插入到复制div的前面
  t.remove(); //移除复制的div
})

这里可能会有疑问。为什么后边要多一步 “把点击的div插入到复制div的前面”。测试过程中,发现clone()不会保留js操作节点。也就是点击的div所拥有的class,不能被继承。所以多这一步是为了点击过的div后面还能再继续点击。

保证只有相邻才能互换

当然,只有在空白div旁边的图片才能与其互换。不然游戏就太简单了。如何实现?下面先使用一种比较笨的方式来实现。

<script>
  $(function(){
    var menu = {
      "1":["2","4"],
      "2":["1","3","5"],
      "3":["2","6"],
      "4":["1","5","7"],
      "5":["2","4","6","8"],
      "6":["3","5","9"],
      "7":["4","8"],
      "8":["5","7","9"],
      "9":["6","8"]
    }
    $('.in').click(function(){
      var click_num = $(this).index()+1;
      var no_see_num = $('.no_see').index()+1;
      var arr = menu[no_see_num];
      if(jQuery.inArray(String(click_num), arr)=='-1'){
        //这里是无法交换位置的逻辑。可以做点什么。
      }else{
        var t = $(this).clone();
        $('.no_see').before(t);
        $(this).before($('.no_see'));
        t.before($(this))
        t.remove();
      }
    })
  })
</script>

是的,这种方法很蠢,但是可以实现。通过数组的方式,先找到空白div,再查看空白div所在位置四周有哪些位置的图片可以与其交换。

当然,九宫格使用这样的方式来实现没有问题,毕竟数组是可列的。但是如果变成16宫格,36宫格呢?先不说要去列数组,还要修改代码。这样就很费劲了。所以我需要通过别的方式,让代码以后扩展更容易。

通过算法保证互换条件

<script>
  $(function(){

    $('.in').click(function(){
      var tmp = false;
      var click_num = $(this).index();
      var no_see_num = $('.no_see').index();

      var click_x = click_num % 3;
      var click_y = Math.floor(click_num / 3);

      var no_see_x = no_see_num % 3;
      var no_see_y = Math.floor(no_see_num / 3);

      if (click_x==no_see_x) { //同一行
        if (click_y==no_see_y+1||click_y==no_see_y-1) {
          tmp = true; //保证相邻
        }
      }else if (click_y==no_see_y) { //同一列
        if (click_x==no_see_x+1||click_x==no_see_x-1) {
          tmp = true; //保证相邻
        }
      }

      if (tmp) {
        var t = $(this).clone();
        t.addClass('bit');
        $('.no_see').before(t);
        $(this).before($('.no_see'));
        t.before($(this))
        t.remove();
      }

    })

  })
</script>

算法看起来会比较乱。简单的说是通过求余和相除取最小整数的方式来计算。

画几个表可能就清楚了。

1.在九宫格下每个图的顺序如下。

2.在九宫格下每个位置求余后的值如下。

3.在九宫格下每个位置除法取最小整数的值如下。

现在看起来应该简单多了。当取余相等时,两个位置在一列上。当除法取最小整数相等时,两个位置在一行上。
但是此时还存在一个问题,在一行或者一列上也有可能中间有间隔。所以采取当取余相等时,用除法的结果+1或者-1。此时就可以判断是否有间隔值了。

最后

到这里,游戏的主体就算写完了。当然,如何想丰富游戏趣味,可以加入计时器、完成所用步骤等等。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2018-11-29

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实现的别踩白块小游戏完整示例

本文实例讲述了jQuery实现的别踩白块小游戏.分享给大家供大家参考,具体如下: 首先引入jquery.js 1.css html, body, .contain { width: 100%; height: 96%; overflow: hidden; background-color: #FFFFCC; } .text-center { text-align: center; } .score { font-size: 25px; color: #CB2D01; margin-top: 20

jQuery编写网页版2048小游戏

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

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

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

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

源代码思路分析: [一]如何生成图片网格,我想到两种方法: (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手速测试小游戏实现思路详解

(-1)写在前面 我用的chrome49,jquery3.0,我得到过399分,信不信由你. (1)设计思路 两个p元素放在div里,每个p元素的高度和宽度都和div一样,当鼠标放在div上时,第一个p向上移动(更改marginTop值),当鼠标离开div上时,第一个p向下移动. (2)知识储备 a. :nth-child #lol p:nth-child(1),当前元素p相对于他的父元素的所有子元素,如果第一个元素是p则匹配成功. #lol :nth-child(1) 相当于#lol *:nt

jQuery实现别踩白块儿网页版小游戏

大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery编写网页版2048小游戏 要简单一点,基本的思路都差不多. 这篇博客并不是详细的讲解,只是大致介绍函数的作用,其中实现的细节注释中有解释,网上的这个源码有点乱,如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴) 思路 这个小游戏可以抽象化分为3层 ◆最底下的一层是基本的样式(可见的) ◆中间的层是最主要的,是一个4x3的二维数组,游戏中我们都是对这个二维数组进行操作(不可见的) ◆最上面

基于javascript实现句子翻牌网页版小游戏

本文实例为大家分享了js实现句子翻牌网页版小游戏,供大家参考,具体内容如下 效果图: 实现思路: 考察打字能力和记忆能力的益智小游戏. 1.会先把一段文字显示 2.一小段时间后显示背面 3.输入框输入文字与文字全部对应显示正面 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>

基于javascript实现泡泡大冒险网页版小游戏

本文实例为大家分享了一个很有趣的网页版游戏,有点类似金山打字游戏的青蛙过河,供大家参考,具体内容如下 效果图: 实现思路: 益智类小游戏,主要练习打字能力,基于jq开发. 1.在输入框输入泡泡对应文字,点击enter提交 2.与泡泡文字相对提示分数 3.可以暂停操作 4.每次泡泡着地会减少血量,减少到0结束游戏 5.每过一段时间会加快泡泡下落速度 具体代码: <html> <head> <meta http-equiv="Content-Type" con

jquery之别踩白块游戏的简单实现

前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被嘲讽了下,现在想起来觉得这游戏实现起来也不难,于是上星期用jquery写了一个别踩白块的小游戏,就像当初学python的时候一样写了一个2048.然后今天正好抽个时间写个博客纪录下,算是对前一段时间学习的总结,没有玩过的可以去下一个原版的来玩一下,游戏很简单,就是从不断下落的方块中点击黑快,如果点击到百块或者有黑块没被点击到,游戏就算结束.游戏实现起来不难,都是一些小知识点.当时写的时候,脑

Javascript别踩白块儿(钢琴块儿)小游戏实现代码

游戏唯一的一个规则,我们只需要不断踩着黑色方块前进即可,这里根据方向键来踩白块 在规定时间内,每走一次分数加100 游戏内的每一排都是一个有四个元素的数组,当正确的踩到黑块前进后,前一个数组内所有的对象样式属性(backgroundColor)赋值给其后一个数组内的对应位置处的对象,便实现了前进的功能,很简单的思想 <!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8&

php实现的网页版剪刀石头布游戏示例

本文实例讲述了php实现的网页版剪刀石头布游戏.分享给大家供大家参考,具体如下: <?php /* * Created on 2016-11-25 * */ if (isset($_POST['sub'])) { $what = $_POST['what']; //需要输入的数组 $my_array = array("剪刀","石头","布"); //获胜规则 $guize = array(array("剪刀",&quo

javascript实现别踩白块儿小游戏程序

最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作. 程序思路:如图:将游戏区域的CSS设置为相对定位.溢出隐藏;两块"游戏板"上分别排布着24块方格,黑色每行随机产生一个,"游戏板"向下滚动并交替显示,将每个操作板的黑块位置存入数组,每次点击时将数组pop出来进行比对(我觉得亮点在这--). 这里是游戏的GitHub地址,大家可以到里点击中

拥有网页版小U盘 ASP.NET实现文件上传与下载功能

今天看到了一篇不错的文章,就拿来一起分享一下吧. 实现的是文件的上传与下载功能. 关于文件上传: 谈及文件上传到网站上,首先我们想到的就是通过什么上传呢?在ASP.NET中,只需要用FileUpload控件即可完成,但是默认上传4M大小的数据,当然了你可以在web.config文件中进行修改,方式如下: <system.web> <httpRuntime executionTimeout="240" maxRequestLength="20480"