jQuery实现拼图小游戏(实操案例)
先看初始效果图：
方法一：
var id = $(this).prop("id"); //得到当前点击的这个td的ID
if (parseInt(id) + 3 < 10 && $("td[id=" + (parseInt(id) + 3) + "]").children().length == 0) { //向下移动
$(this).find("img").appendTo($("td[id=" + (parseInt(id) + 3) + "]"));
}
else if (parseInt(id) % 3 != 0 && $("td[id=" + (parseInt(id) + 1) + "]").children().length == 0) { //向右
$(this).find("img").appendTo($("td[id=" + (parseInt(id) + 1) + "]"));
}
else if (parseInt(id) % 3 != 1 && $("td[id=" + (parseInt(id) - 1) + "]").children().length == 0) { //向左
$(this).find("img").appendTo($("td[id=" + (parseInt(id) - 1) + "]"));
}
else if (parseInt(id) - 3 > 0 && $("td[id=" + (parseInt(id) - 3) + "]").children().length == 0) { //向上
$(this).find("img").appendTo($("td[id=" + (parseInt(id) - 3) + "]"));
}
})；
方法二：
<script type="text/javascript">
$(function () {
var kid = 0;
//获取空元素的id
kid = $("#table1").find("td:empty").prop("id");
$("td").click(function () {
//获取图片所在位置
var id = parseInt($(this).prop("id"));
var RId = parseInt(id) + 1;
var LId = parseInt(id) - 1;
var UId = parseInt(id) - 3;
var DId = parseInt(id) + 3;
if (kid == RId && (id % 3 != 0)) {
$(this).children().remove().appendTo("#" + RId);
kid = id;
}
if (kid == LId && id % 3 != 1) {
$(this).children().remove().appendTo("#" + LId);
kid = id;
}
if (kid == UId && id > 3) {
$(this).children().remove().appendTo("#" + UId);
kid = id;
}
if (kid == DId && id < 7) {
$(this).children().remove().appendTo("#" + DId);
kid = id;
}
});
});
</script>
实现类似拼图小游戏有很多种方法。没看懂的朋友们可以私聊我，
随时为你解答。
jQuery实现拼图小游戏(实操案例)相关推荐
- Java实现拼图小游戏（6）—— 移动图片（键盘监听实操练习）
移动图片 一.前言 二.步骤 1.让我们的类继承KeyListener接口 2.改写initData方法 3.实现向上移动 4.实现向下移动 5.实现向左移动 6.实现向右移动 7.改写initIma ...
- Android案例（1）——美女拼图小游戏
视频地址: Android美女拼图小游戏 实现功能: (1)多个难度 第一关3*3. (2)倒计时 (3)图片切分 (4)图片位置变换 第一步: 在src下创建工具包com.imooc.game.ut ...
- Airtest自动化测试实操案例 | iOS应用篇
前言 上一篇推送我们聊到了Windows应用的实操案例,而今天我们想跟大家聊一聊 iOS设备的实操案例 .因为之前很多同学都反馈说,官方教程里面,绝大多数都是安卓设备的实操,Windows应用和iOS ...
- JavaScript版拼图小游戏
慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...
- Python自学笔记6：实操案例三（十进制转换二、八、十六进制），手机充值，计算能量消耗，预测未来子女身高
Python自学笔记6:实操案例三(十进制转换二.八.十六进制),手机充值,计算能量消耗,预测未来子女身高 杨淑娟老师网课传送门(非广告):https://www.bilibili.com/video ...
- html数字拼图游戏,JavaScript_JS写的数字拼图小游戏代码[学习参考]，复制代码 代码如下:html - phpStudy...
JS写的数字拼图小游戏代码[学习参考] 复制代码 代码如下: 拼图 td.numTd{ width : 20px ; height : 20px ; } div.numDiv{ width : 100 ...
- Python学习笔记7：实操案例四（支付密码的验证，模拟QQ账号登录，商品价格竞猜，星座看运势）
Python学习笔记7:实操案例四(支付密码的验证,模拟QQ账号登录,商品价格竞猜,星座看运势) 1.支付密码的验证: 这个主要就是调用isdigit()函数判断字符串是不是全是数字组成. pwd=i ...
- TikTok广告实操案例数据分析（一）
TikTok作为短视频届的头部平台,在鼓励用户进行原创内容生产(UGC).搭建话题社区和话题造势方面的能力远远超出了APP本身该具备的能力范畴.而话题标签功能(#XXXX)在造势方面发挥着不小的作用- ...
- Python自学笔记9：实操案例六（千年虫，购物流程）
Python自学笔记9:实操案例六(千年虫,购物流程) 网课传送门:第155,156讲,https://www.bilibili.com/video/BV1Sw411Z779?p=155 1.千年虫 ...
最新文章
- KMP算法的详细解释及实现
- python怎么写文件-python头文件怎么写
- 阿里云马劲：保证云产品持续拥有稳定性的实践和思考\n
- contract forward,菜鸟请教一个问题:the difference between forward contract and future contract...
- 新云网站管理系统最新版注入漏洞
- 玻璃质感_现代质感的顶层公寓，玻璃扶手让楼梯整个变透明！
- 局域网传输文件_如何“互传文件”？简单几步，方便快捷
- js书写原生ajax,javascript原生ajax写法
- 计算机中级培训感言,计算机中级培训培训感言
- 从微软官网下载win10镜像.iso文件
- DETR | 基于匈牙利算法的样本分配策略
- Android 绘制简单的折线图
- python 网页制作教程_python如何制作网页
- 电脑无法进入bios
- 京东云主机挂载云硬盘、分区、格式化
- ChatGPT、文心一言、New Bing到底哪个更AI？
- ZOJ Monthly,Feburary 2012 部分题解
- hadoop基础----hadoop实战(七)-----hadoop管理工具---使用Cloudera Manager安装Hadoop---Cloudera Manager和CDH5.8离线安装
- 暴力破解UltraEdit
- 经济师考计算机英语考试,2019考经济师需要考试职称英语和计算机吗？