jQuery拼图小游戏

最后样式

核心代码部分

<script type="text/javascript" >

  $(function () {

    $("td").click(function () {

      //获取点击的图片的id
      id = parseInt($(this).prop("id"));
  
      //向下
      if (id + 3 < 10 && $("td[id=" + (id + 3) + "]").children().length==0)
      {
        $(this).find("img").appendTo($("td[id=" + (id + 3) + "]"));
      }

      //向上
      if (id - 3 > 0 && $("td[id=" + (id - 3) + "]").children().length == 0) {
        $(this).find("img").appendTo($("td[id=" + (id - 3) + "]"));
      }

      //向左
      if (id % 3 != 1 && $("td[id=" + (id -1) + "]").children().length == 0) {
        $(this).find("img").appendTo($("td[id=" + (id -1) + "]"));
      }

      //向右
      if (id % 3 != 0 && $("td[id=" + (id + 1) + "]").children().length == 0) {
        $(this).find("img").appendTo($("td[id=" + (id + 1) + "]"));
      }
    })
  })
</script>

body部分

jQuery拼图小游戏的更多相关文章

  1. jQuery实现拼图小游戏

    小熊维尼拼图                                                                                    2017-07-23 ...

  2. 在HTML页面中有jQuery实现实现拼图小游戏

    1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:

  3. JavaScript版拼图小游戏

    慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...

  4. 使用NGUI实现拖拽功能(拼图小游戏)

    上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...

  5. 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. swift 拼图小游戏

    依据这位朋友的拼图小游戏改编 http://tangchaolizi.blog.51cto.com/3126463/1571616 改编主要地方是: 原本着我仁兄的代码时支持拖动小图块来移动的,我參照 ...

  7. 教你用Python自制拼图小游戏,一起来制作吧

    摘要: 本文主要为大家详细介绍了python实现拼图小游戏,文中还有示例代码介绍,感兴趣的小伙伴们可以参考一下. 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Pyt ...

  8. 打造专属自己的html5拼图小游戏

    最近公司刚好有个活动是要做一版 html5的拼图小游戏,于是自己心血来潮,自己先实现了一把,也算是尝尝鲜了.下面就把大体的思路介绍一下,希望大家都可以做出一款属于自己的拼图小游戏,必须是更炫酷,更好玩 ...

  9. 拼图小游戏之计算后样式与CSS动画的冲突

    先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...

随机推荐

  1. Binary Search 的递归与迭代实现及STL中的搜索相关内容

    与排序算法不同,搜索算法是比较统一的,常用的搜索除hash外仅有两种,包括不需要排序的线性搜索和需要排序的binary search. 首先介绍一下binary search,其原理很直接,不断地选取 ...

  2. Python零散函数

    1. python json.dumps() json.dump()的区别 注意cat ,是直接输出文件的内容 load和loads都是实现"反序列化",区别在于(以Python为 ...

  3. 一张图搞定OAuth2.0

    1.引言 本篇文章是介绍OAuth2.0中最经典最常用的一种授权模式:授权码模式 非常简单的一件事情,网上一堆神乎其神的讲解,让我不得不写一篇文章来终结它们. 一项新的技术,无非就是了解它是什么,为什 ...

  4. redis两种持久化方法对比分析

    1.前言 最近在项目中使用到Redis做缓存,方便多个业务进程之间共享数据.由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能, ...

  5. Tiny4412之外部中断

    一:外部中断 在之前我们学习按键驱动的时候,我们检测按键有没有按下是通过轮循的方式(也就是我们说的死循环),这样虽然可以检测实现按键,但太浪费系统资源了,不论我们按键中断有没有发生,cpu都要一直进行 ...

  6. 使用 python 处理 nc 数据

    前言 这两天帮一个朋友处理了些 nc 数据,本以为很简单的事情,没想到里面涉及到了很多的细节和坑,无论是"知难行易"还是"知易行难"都不能充分的说明问题,还是& ...

  7. centos7服务器无GUI情况下安装使用Xvfb、selenium、chrome和selenium-server

    最近需要用到selenium浏览器抓取,在windows下对照chrome浏览器开发的代码,在linux服务器上换成phantomjs驱动后,却不能运行了,通过截图发现phantomjs渲染效果和ch ...

  8. mock打桩之EasyMock

    TDD是测试驱动开发(Test-Driven Development)的英文简称,是敏捷开发中的一项核心实践和技术,也是一种设计方法论.TDD的原理是在开发功能代码之前,先编写单元测试用例代码,测试代 ...

  9. switch窗口句柄

    Set<String> windows = browser.getWebDriver().getWindowHandles(); //获得所有窗口句柄 for (String string ...

  10. go语言nsq源码解读七 lookup_protocol_v1.go

    本篇将解读nsqlookup处理tcp请求的核心代码文件lookup_protocol_v1.go. 1234567891011121314151617181920212223242526272829 ...