大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下基于jquery如何实现九宫格拼图小游戏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
站在用户的角度思考问题,与客户深入沟通,找到双清网站设计与双清网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广、域名申请、网站空间、企业邮箱。业务覆盖双清地区。九宫格拼图小游戏是小时候比较常见的小游戏之一。闲着无聊就用js简单写了一个。
游戏的玩法很简单。九宫格中有八个小图片。随机打乱之后,将八张小图片拼接成一个完整的图。
html代码
my game
这里使用div来布局。具体实现就不啰嗦了。文章的重点是js的实现。
实现图片的互换
图片的互换其实就是html中的div互换。当点击图片时,和游戏中的空白图进行交换。
$('.in').click(function(){ var t = $(this).clone(); //复制当前点击的div $('.no_see').before(t); //在空白div的前面插入复制的div $(this).before($('.no_see')); //把空白div插入到点击div的前面 t.before($(this)) //把点击的div插入到复制div的前面 t.remove(); //移除复制的div })
这里可能会有疑问。为什么后边要多一步 “把点击的div插入到复制div的前面”。测试过程中,发现clone()不会保留js操作节点。也就是点击的div所拥有的class,不能被继承。所以多这一步是为了点击过的div后面还能再继续点击。
保证只有相邻才能互换
当然,只有在空白div旁边的图片才能与其互换。不然游戏就太简单了。如何实现?下面先使用一种比较笨的方式来实现。
是的,这种方法很蠢,但是可以实现。通过数组的方式,先找到空白div,再查看空白div所在位置四周有哪些位置的图片可以与其交换。
当然,九宫格使用这样的方式来实现没有问题,毕竟数组是可列的。但是如果变成16宫格,36宫格呢?先不说要去列数组,还要修改代码。这样就很费劲了。所以我需要通过别的方式,让代码以后扩展更容易。
通过算法保证互换条件
算法看起来会比较乱。简单的说是通过求余和相除取最小整数的方式来计算。
画几个表可能就清楚了。
1.在九宫格下每个图的顺序如下。
2.在九宫格下每个位置求余后的值如下。
3.在九宫格下每个位置除法取最小整数的值如下。
现在看起来应该简单多了。当取余相等时,两个位置在一列上。当除法取最小整数相等时,两个位置在一行上。
但是此时还存在一个问题,在一行或者一列上也有可能中间有间隔。所以采取当取余相等时,用除法的结果+1或者-1。此时就可以判断是否有间隔值了。
jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
以上是“基于jquery如何实现九宫格拼图小游戏”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。