用一个2D的HTML游戏来描述HTML/CSS和javascript的一些游戏基本开发技巧玩拼图游戏赢华为手机 。
简介
这篇文章为那些想要在网上开始游戏开发的初学者，提供一些简单的方法，并且他们不需要使用任何重量级的工具玩拼图游戏赢华为手机 。本文提供一个简化的步骤使用Html/Css 和Javascript来开发2D游戏。在这里，我将展示如何创建一个图形游戏，一个你可以拖放交换图像部分和重新安排图形部分形成完整的图像的游戏（就是拼图游戏啦，英文真是冗长）。
玩拼图游戏赢华为手机 你可以在这里玩在线的游戏：
规则
游戏规则很简单玩拼图游戏赢华为手机 。你只需要拖动和交换破碎图片的位置，你需要用一种交换方式来形成正确的图像。正确的图像设置在右侧，供大家参考。
这个游戏的屏幕看起来像是这样：
Image Puzzle
图片拼图：解决
关于代码
为了理解它，我们可以把代码分成3个部分：Html, Css 和 Javascript玩拼图游戏赢华为手机 。HTML部分包含简单的标记，以形成游戏的布局。Css提供响应设计，Javascript部分则包含了游戏的主要逻辑。小游戏的重要步骤如下：
分散图片
为了使图像看起来像是碎成了16个不同的部分，16个li元素被用于在ul中，每个li元素的显示属性已经被设置为inline-block，这样它看起来像是一个网格玩拼图游戏赢华为手机 。每一个li的背景图像已被设置为只显示1/16的图像，并且背景图片的位置已被相应地设置。data-value属性被分配给每个li元素，便于找出每一个的索引。
对应的代码如下所示：
for (var i = 0; i < 16; i++) {
var xpos = (33.33 * (i % 4)) + '%';
var ypos = (33.33 * Math.floor(i / 4)) + '%';
var li = $('
').css({ 'background-image': 'url(' + image.src + ')', 'background-position': xpos + ' ' + ypos });
在这里你可以看到破碎的效果是使用简单的背景图像和背景的位置实现的玩拼图游戏赢华为手机 。破碎的图片被设置后，随机化方法用于将碎片随机呈现。在游戏中，用户需要重新安排每一部分形成完整的图像。
拖放块
为了让每一个碎片可拖动，我们使用了jQuery的draggable特性玩拼图游戏赢华为手机 。
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);
正如你在上面的代码片段中看到的，每次移动后，isSorted被调用，以检查是否残局已排序玩拼图游戏赢华为手机 。检查每一块的排序是否是根据li元素的data-value属性排列的。
设置样式
我尽可能的使用了简单的CSS玩拼图游戏赢华为手机 。所使用的CSS支持响应设计，您可以在您的平板电脑或手机玩这个游戏。
浏览器兼容性
此游戏不支持低于 IE8的浏览器
它应该适用于大多数最新的浏览器玩拼图游戏赢华为手机 。我已经在IE11和谷歌Chrome浏览器进行了测试。
转自：
