HTML 5拼图游戏Demo_JS JQuery 拼图游戏的开发例子

简介

本文将讲解使用 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