jQuery实现拼图小游戏(实例讲解)
时间:2019-03-30
本文章向大家介绍jQuery实现拼图小游戏(实例讲解),主要包括jQuery实现拼图小游戏(实例讲解)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
小熊维尼拼图
jQuery代码实现拼图小游戏,鼠标选中拼块,用上下左右键移动拼块。
html代码
<div id="box-div"> <!--走不通时的提示!--> <div id="tips"> <p>\(?-?)/ 哎呦,走不通啦!</p> </div> <div id="container"> <div class="row"> <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_01.png" alt="photo1"/></div> <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_02.gif" alt="photo2"/></div> <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_03.gif" alt="photo3"/></div> </div> <div class="row"> <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_04.gif" alt="photo4"/></div> <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_05.gif" alt="photo5"/></div> <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_06.gif" alt="photo6"/></div> </div> <div class="row"> <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_07.gif" alt="photo7"/></div> <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_08.gif" alt="photo8"/></div> <div class="unit"><img src="http://yn321.cn3v.net/images/weini_part_09.gif" alt="photo9"/></div> </div> </div> </div
#box-div { position: relative; width: 508px; height: 631px; margin: 0 auto; } #container { width: 508px; height: 631px; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #d5e0e6; } #container > .row { display: -webkit-box; white-space: nowrap; } #container > .row > .unit { width: 169px; height: 209px; display: inline-block\9;/*兼容IE9/10*/ vertical-align: top\9;/*兼容IE9/10*/ box-sizing: border-box; border: 1px solid rgba(7, 157, 239, 0); } #container > .row > .unit.move { border: 1px solid rgba(7, 157, 239, 1); } #tips { width: 200px; height: 50px; background: rgb(152, 206, 50); position: absolute; z-index: 5; top: -50px; left: calc(50% - 100px); opacity: 0; } #tips > p { margin: 0; line-height: 50px; text-align: center; color: white; } .directions{ width:50%; margin:0 auto; text-align: center; line-height: 30px; color: white; background-color: #a7cbf0; }
jquery代码
$("#container>.row>.unit>img").each(function () { $(this).click(function (event) { event.stopPropagation(); $(".unit").removeClass("move"); $(this).parent(".unit").addClass("move"); }) }); move(".move","#tips"); function move(className,idName) { /* 提示信息 */ function tipsAlert(idName) { $(idName).animate({top: "0", opacity: "1"}, 500); setTimeout(function () { $(idName).animate({top: "-50px", opacity: "0"}, 800); }, 1000) } /* 上下左右按键移动 */ $(document).keydown(function (e) { var code = e.keyCode; if (code > 40 || code < 37) { return false; } var prev = $(className)[0].previousElementSibling;//选中元素前置位元素是否存在,以此判断元素是否还可以左右移动 var next = $(className)[0].nextElementSibling;//选中元素后置位元素是否存在,以此判断元素是否还可以左右移动 var paprev = $(className).parent()[0].previousElementSibling;//选中元素父级前置位元素是否存在,以此判断元素是否还可以上下移动 var panext = $(className).parent()[0].nextElementSibling;//选中元素父级后置位元素是否存在,以此判断元素是否还可以上下移动 var index = $(className).index();//根据选中元素的索引值,来确定上下移动时对换的位置 var movenDiv = $(className).next()[0];//以此确定上下对换元素添加方式 var movepDiv = $(className).prev()[0];//以此确定上下对换元素添加方式 switch (code) { case 37://左 if (prev) { $(className).insertBefore(prev); } else { tipsAlert(idName); } break; case 38://上 if (paprev) { var exchangeTop = $(paprev).children()[index]; $(className).insertBefore(exchangeTop); if (movenDiv) { $(exchangeTop).insertBefore(movenDiv); } else { $(exchangeTop).insertAfter(movepDiv) } } else { tipsAlert(idName); } break; case 39://右 if (next) { $(className).insertAfter(next); } else { tipsAlert(idName) } break; case 40://下 if (panext) { var exchangeBottom = $(panext).children()[index]; $(className).insertBefore(exchangeBottom); if (movenDiv) { $(exchangeBottom).insertBefore(movenDiv); } else { $(exchangeBottom).insertAfter(movepDiv) } } else { tipsAlert(idName); } break; } }); }
以上这篇jQuery实现拼图小游戏(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- js的隐含参数(arguments,callee,caller)使用方法
- Spring Cloud中的负载均衡策略
- Spring Cloud中负载均衡器概览
- 没有event loop的PHP
- RestTemplate的逆袭之路,从发送请求到负载均衡
- limit_area_cirle
- Spring RestTemplate中几种常见的请求方式
- 什么是客户端负载均衡
- jQuery 升级踩坑大全
- Eureka中的核心概念
- Spring Cloud Zuul中异常处理细节
- Spring Cloud Zuul中路由配置细节
- Spring Cloud中的API网关服务Zuul
- MYSQL | 企业整合解决方案之mysql集群搭建-主从配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 政采云趣味题
- LeetCode40|有序数组中的单一元素
- 搭建简易的物联网服务端和客户端-Cortana控制(十七)
- LeetCode39|找树左下角的值
- LeetCode38|根据字符出现频率排序
- 搭建简易的物联网服务端和客户端-Nodejs_PM2(十八)
- spring boot 项目中自动执行 sql 语句
- 搭建简易的物联网服务端和客户端-邮件通知(十九)
- LeetCode37|两颗二叉搜索树中所有元素
- LeetCode45|数组中重复的数据
- 搭建简易的物联网服务端和客户端-网络控制(二十)
- LeetCode44|在每个树行中找最大值
- LeetCode43|最大层内元素和
- 搭建简易的物联网服务端和客户端-Maibu控制(二十一)
- LeetCode42|层数最深叶子节点的和