jQuery拼图小游戏
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拼图小游戏的更多相关文章
- jQuery实现拼图小游戏
小熊维尼拼图 2017-07-23 ...
- 在HTML页面中有jQuery实现实现拼图小游戏
1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:
- JavaScript版拼图小游戏
慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...
- 使用NGUI实现拖拽功能(拼图小游戏)
上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...
- 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- swift 拼图小游戏
依据这位朋友的拼图小游戏改编 http://tangchaolizi.blog.51cto.com/3126463/1571616 改编主要地方是: 原本着我仁兄的代码时支持拖动小图块来移动的,我參照 ...
- 教你用Python自制拼图小游戏,一起来制作吧
摘要: 本文主要为大家详细介绍了python实现拼图小游戏,文中还有示例代码介绍,感兴趣的小伙伴们可以参考一下. 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Pyt ...
- 打造专属自己的html5拼图小游戏
最近公司刚好有个活动是要做一版 html5的拼图小游戏,于是自己心血来潮,自己先实现了一把,也算是尝尝鲜了.下面就把大体的思路介绍一下,希望大家都可以做出一款属于自己的拼图小游戏,必须是更炫酷,更好玩 ...
- 拼图小游戏之计算后样式与CSS动画的冲突
先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...
随机推荐
- Hello Django
首先安装Django: 1.cmd界面,输入"pip3 install django" 2.输入"django-admin help",如下图表示安装成功 ...
- 利用JavaScriptSerializer转json实用方法
项目中经常碰到需要输出的是json数据,使用JavaScriptSerializer转换,以前老的方法如下. JavaScriptSerializer jss = new JavaScriptSeri ...
- PAT1091:Acute Stroke
1091. Acute Stroke (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue One impo ...
- java并发之DelayQueue实际运用示例
在学习Java 多线程并发开发过程中,了解到DelayQueue类的主要作用:是一个无界的BlockingQueue,用于放置实现了Delayed接口的对象,其中的对象只能在其到期时才能从队列中取走. ...
- springboot整合shiro后报java.lang.ClassCastExcepting异常
最近搭一个springboot的框架,整合了shiro和redis,由于平常习惯用热部署,所以自然的引入了热部署的包,但是引入后报如下错误: 没错,这个问题害我搞了一天,后来删除热部署,项目正常的跑飞 ...
- WPF MVVM UI分离之《交互与数据分离》
在我们使用WPF过程中,不可避免并且超级喜欢使用MVVM框架. 那么,使用MVVM的出发点是视觉与业务逻辑分离,即UI与数据分离 诸如下面的问题: 删除操作,假如需要先执行一部分数据的处理,然后删除界 ...
- Spring 数据处理框架的演变
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 定量分析的成败在很大程度上取决于采集,存储和处理数据的能力.若能及时地向业务决策者提供深刻并可靠的数据解读,大数据项目就会有更多机会取得成功 ...
- 任务调度--spring下的任务调度quartz
之前写过Timer实现任务调度,这篇文章用来写一下在spring下使用quartz实现任务调度,直接上代码: 定义任务对象: package com; /** * 1. 定义任务对象 * * @aut ...
- [python]多线程模块thread与threading
Python通过两个标准库(thread, threading)提供了对多线程的支持 thread模块 import time import thread def runner(arg): for i ...
- GitHub 系列之「向GitHub 提交代码」
1.SSH 你拥有了一个 GitHub 账号之后,就可以自由的 clone 或者下载其他项目,也可以创建自己的项目,但是你没法提交代码.仔细想想也知道,肯定不可能随意就能提交代码的,如果随意可以提交代 ...