HTML 5拼图游戏Demo_JS JQuery 拼图游戏的开发例子
2014-08-29 15:53:55 By: shinyuu
简介
本文将讲解使用 HTML 和 CSS 以及 JQuery 开发一款基于浏览器的拼图游戏的方法、并没有使用任何插件
本文提供了一个简单的步骤,开始使用HTML / CSS和JavaScript的2D游戏的开发
我将介绍了如何创建一个 Image 益智游戏,你可以拖放图像块交换、重新安排图像块的位置,最后形成完整的图像
您可以在这里试玩一下:http://gandhisoft.com/ImagePuzzle/puzzle.html
规则
游戏的规则很简单、你只需要拖放破碎的图片块放到你认为对的位置
然后形成一张正确的图像、正确的图像会在右侧,供大家参考
游戏画面:
源代码
为了理解它,我们可以把代码分成3个部分 HTML,CSS和Javascript
HTML部分包含简单的标记,以形成游戏的布局
CSS提供了响应式设计、Javascript部分包含了游戏的主要逻辑
1、打破了图片
把图像分成16个不同的小块,16个 li 元素、每个 li 显示属性设置为inline-block
这样看起来就是一个网格、每个网格的背景图像设置为仅显示与原图像的1/16
代码如下所示:
for (var i = 0; i < 16; i++) { var xpos = (33.33 * (i % 4)) + ´%´; var ypos = (33.33 * Math.floor(i / 4)) + ´%´; var li = $(´<li class="item" data-value="´ + (i) + ´"></li>´) .css({ ´background-image´: ´url(´ + image.src + ´)´, ´background-position´: xpos + ´ ´ + ypos }); }2、拖放图片块
为了让每一个图片块可拖动,我使用了jQuery的可拖动功能
enableSwapping: function (elem) { $(elem).draggable({ snap: ´#droppable´, snapMode: ´outer´, revert: "invalid", helper: "clone" }); $(elem).droppable({ drop: function (event, ui) { var $dragElem = $(ui.draggable).clone() .replaceAll(this); $(this).replaceAll(ui.draggable); currentList = $(´#sortable > li´) .map(function (i, el) { return $(el).attr(´data-value´); }); if (isSorted(currentList)) $(´#actualImageBox´).empty() .html($(´#gameOver´).html()); imagePuzzle.enableSwapping(this); imagePuzzle.enableSwapping($dragElem); } }); }3、当每次拖放被触发的时候、就要判断图片是不是已经被拖放成了和原图一样
最后还是给大家献上源代码链接: http://dwtedx.com/download.html?bdkey=s/1mgC50Vm 密码: 2amd
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)
或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛