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. Hello Django

    首先安装Django: 1.cmd界面,输入"pip3 install django" 2.输入"django-admin help",如下图表示安装成功   ...

  2. 利用JavaScriptSerializer转json实用方法

    项目中经常碰到需要输出的是json数据,使用JavaScriptSerializer转换,以前老的方法如下. JavaScriptSerializer jss = new JavaScriptSeri ...

  3. PAT1091:Acute Stroke

    1091. Acute Stroke (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue One impo ...

  4. java并发之DelayQueue实际运用示例

    在学习Java 多线程并发开发过程中,了解到DelayQueue类的主要作用:是一个无界的BlockingQueue,用于放置实现了Delayed接口的对象,其中的对象只能在其到期时才能从队列中取走. ...

  5. springboot整合shiro后报java.lang.ClassCastExcepting异常

    最近搭一个springboot的框架,整合了shiro和redis,由于平常习惯用热部署,所以自然的引入了热部署的包,但是引入后报如下错误: 没错,这个问题害我搞了一天,后来删除热部署,项目正常的跑飞 ...

  6. WPF MVVM UI分离之《交互与数据分离》

    在我们使用WPF过程中,不可避免并且超级喜欢使用MVVM框架. 那么,使用MVVM的出发点是视觉与业务逻辑分离,即UI与数据分离 诸如下面的问题: 删除操作,假如需要先执行一部分数据的处理,然后删除界 ...

  7. Spring 数据处理框架的演变

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 定量分析的成败在很大程度上取决于采集,存储和处理数据的能力.若能及时地向业务决策者提供深刻并可靠的数据解读,大数据项目就会有更多机会取得成功 ...

  8. 任务调度--spring下的任务调度quartz

    之前写过Timer实现任务调度,这篇文章用来写一下在spring下使用quartz实现任务调度,直接上代码: 定义任务对象: package com; /** * 1. 定义任务对象 * * @aut ...

  9. [python]多线程模块thread与threading

    Python通过两个标准库(thread, threading)提供了对多线程的支持 thread模块 import time import thread def runner(arg): for i ...

  10. GitHub 系列之「向GitHub 提交代码」

    1.SSH 你拥有了一个 GitHub 账号之后,就可以自由的 clone 或者下载其他项目,也可以创建自己的项目,但是你没法提交代码.仔细想想也知道,肯定不可能随意就能提交代码的,如果随意可以提交代 ...