jQuery实现拼图游戏

最新推荐文章于 2021-08-15 20:20:00 发布
最新推荐文章于 2021-08-15 20:20:00 发布
阅读量321 收藏 1
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/zhrujia/p/9493746.html
版权

 

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{padding:0px;margin:0px;}
.mytable
{
width: 300px;
border:1px solid #aaccff;
}
.mytable td{text-align:center;}
.mytable td img{border:none;height:150px;width:150px;}
.mytable td img.cur{border:1px dotted red;}
.box{border:1px solid #aaccff;padding:10px;margin:5px 3px;line-height:25px;}
</style>
<script src="Script/jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function () {


        $("td").click(function () {
               var tdid = $(this).prop("id");//获取当前选中的ID
                if ((parseInt(tdid) + 3)<10 && $("td[id=" + (parseInt(tdid) + 3) + "]").children().length == 0) {

               $(this).find("img").appendTo($("td[id=" + (parseInt(tdid) + 3) + "]"));//上移

               }
                else if ((parseInt(tdid) - 3) > 0 && $("td[id=" + (parseInt(tdid) - 3) + "]").children().length == 0) {

                 $(this).find("img").appendTo($("td[id=" + (parseInt(tdid) - 3) + "]"));//下移

              }
               else if ((parseInt(tdid) % 3) != 1 && $("td[id=" + (parseInt(tdid) - 1) + "]").children().length == 0) {

                      $(this).find("img").appendTo($("td[id=" + (parseInt(tdid) - 1) + "]"));//左移

               }
                else if ((parseInt(tdid) %3)!=0 && $("td[id=" + (parseInt(tdid) + 1) + "]").children().length == 0) {

                     $(this).find("img").appendTo($("td[id=" + (parseInt(tdid) + 1) + "]"));//右移

               }

           });
      })
</script>
</head>
<body style="font-size:12px;">
<div class="box">
<span style="color:Red;font-weight:bold;"></span>请使用JQuery完成拼图功能。<br />
只要求能够实现每一幅小图能够正确变动位置即可。
</div>
<div id="temp"></div>
<div class="box">

<table id="table1" class="mytable">
<tr>
<td id="1">
<img src="Files/01.gif" /></td>
<td id="2">
<img src="Files/02.gif" /></td>
<td id="3">
<img src="Files/03.gif" /></td>
</tr>
<tr>
<td id="4">
<img src="Files/04.gif" /></td>
<td id="5">
<img src="Files/05.gif" /></td>
<td id="6">
<img src="Files/06.gif" /></td>
</tr>
<tr>
<td id="7">
<img src="Files/07.gif" /></td>
<td id="8">
<img src="Files/08.gif" /></td>
<td id="9"></td>
</tr>
</table>

</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/zhrujia/p/9493746.html

weixin_30853329
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javaScript、jQuery、html实现九宫格拼图游戏（逻辑及源码）
m0_56726855的博客
06-13 4377
最近突然想起来win7自带的拼图小游戏，现在已经玩不到了，于是便想自己实现一个，用了几天闲暇时间，终于捣鼓出来了。游戏使用js和jquery实现。
yq版本——jQuery拼图游戏
QLQ919的博客
06-28 202
拼图游戏js代码： /*重要备注： imgOrigArr 和 imgRanfArr这两个数组分别存放正确顺序排列和乱序排列的碎片信息 数组结构：arr[碎片节点下标] = 碎片显示位置 */ /** * [puzzleGame 向puzzleGame对象中添加属性] * @param {[json格式]} param [图片 路径+名称] * @return [无] */ this.imgCells.eq(from).animate({ ...
jquery 实现拼图小游戏
Richie
03-10 3167
九宫格拼图小游戏是小时候比较常见的小游戏之一。闲着无聊就用js简单写了一个。 游戏的玩法很简单。九宫格中有八个小图片。随机打乱之后，将八张小图片拼接成一个完整的图。 html代码 &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &lt;style&gt; body{ borde...
前端实战:从零到一实现H5拼图小游戏(附源码)
趣谈前端
08-15 2396
环境卫生，从我做起关注并将「趣谈前端」设为星标每天定时分享技术干货/优秀开源/技术思维我去年曾写过一个用H5，Javascript，css3实现的拼拼乐小游戏，技术栈采用自己封装的类Jqu...
Javascript: 实现拼图游戏
热门推荐
linwh8的博客
10-24 1万+
注：本人网页项目github：linwh8需求规格： 1.UI(10分)： UI与效果图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI(可以使用其他图片)； 2.正常移动(20分)： 点击空白旁边的图块，图块移动空白处。点击其他图块，不会移动； 3.图块图片正常(20分)：无论如何移动 ，每个图块上的图片都保持不变； 4.拼图结束(10分): 当拼回原图时，提示用户游戏获
jQuery实现网页拼图游戏
10-17
主要为大家详细介绍了jQuery实现网页拼图游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery益智拼图游戏
12-02
本篇文章将深入探讨“jQuery益智拼图游戏”，通过解析其背后的开发原理和实现细节，帮助读者理解如何利用jQuery技术制作出猫咪拼图游戏网页版。 首先，我们需要了解jQuery的基础。jQuery简化了DOM操作、事件处理、...
jquery实现的美女拼图游戏实例
10-24
《jQuery实现的美女拼图游戏详解》 在Web开发领域，jQuery库因其简洁易用的API，成为众多开发者首选的JavaScript库。本篇文章将深入探讨如何利用jQuery来实现一款有趣的美女拼图游戏，同时分析jQuery在操作图片上的...
jQuery人物拼图游戏代码
06-24
【jQuery人物拼图游戏代码】是一款利用JavaScript库jQuery开发的互动式拼图游戏，它具有时间和操作步数的记录功能，增加了游戏的挑战性和趣味性。在这个游戏中，玩家需要将一幅人物图片的多个部分重新组合，形成完整...
jQuery实现拼图
weixin_30254435的博客
08-17 280
<head> <title>jQuery拼图</title> <script src="Scripts/jquery-3.3.1.js" type="text/javascript"></script> <style type="text/css"> *{padding:0px;margin:0...
使用jQuery制作web拼图游戏
12-16
使用jQuery制作web拼图游戏使用jQuery制作web拼图游戏
jquery拖动图片移动拼图小游戏
04-01
jquery拖动图片移动拼图小游戏。使用jquery和javascript编写程序，移动拼图可直接玩耍
jquery小游戏--美女拼图游戏
07-22
jquery小游戏--美女拼图游戏，兼容性好，将一张图拆分成多张图 可以拖动图片
html5 jquery 拼图游戏
weixin_34014277的博客
09-28 111
引用：http://www.douban.com/note/159200656/ 研究方向 jquery html5 css3 &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;豆瓣&lt;/title&gt; &lt;style type="text/css"&gt; bod
jq实现拼图效果
weixin_30341735的博客
11-19 163
https://www.cnblogs.com/12136tyq/p/6737399.html 转载于:https://www.cnblogs.com/NeryXJ/p/9983276.html
jquery动画拼图
weixin_42043592的博客
04-24 212
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;&lt;/head&gt;&lt;script type="text/javascript"
移动端的拼图游戏
weixin_34112900的博客
11-21 304
在大家眼里，做开发都是比较枯燥无味的事情，但是开发不全是枯燥无味的；也很多的乐趣。今天就给大家分享一下移动端的拼图游戏，希望你们在娱乐中学到新的知识。 移 在开始之前，我们首先来总结一下移动端touch事件： touchstart、 touchmove、 touchend、touchcancel,这是我们移动开发最基础的事件，在实际开发中，我们需要进行能力监测，看我们的window是否支持t...
jquery实现拼图轮播淡入淡出
最新发布
12-06
根据提供的引用内容，没有明确说明“拼图轮播淡入淡出”的具体实现方式。以下是一种基于jQuery的图片轮播淡入淡出的实现方式，供参考： ```html <!-- HTML结构 --> ``` ```css /* CSS样式 */ .slider { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值