前言
这是关于初学者的文章，他们希望通过一些简单的方法开始在网络中开发游戏开发，而不使用任何重型工具。本文提供了一个简单的步骤，开始使用html / css和javascript的2d游戏开发。在这里，我将介绍如何创建一个图像拼图游戏，您可以在其中拖放图像部分进行交换和重新排列零件以形成完整的图像。
你可以在线玩这个游戏：http://www.ikinsoft.com/3ddemo/puzzle/puzzle.html
游戏规则
游戏的规则很简单。你只需要拖放破碎的图像来交换它。您需要以形成正确图像的方式交换它们。将拖放图像部件所需的步骤数。所以，您可能希望考虑并尝试以尽可能最小的步骤进行。右侧提供正确的图像供您参考。
游戏画面如下所示：
游戏画面截图
游戏代码说明
我们将游戏的代码分成3部分：Html，Css和Javascript。Html部分包含形成游戏布局的简单标签。CSS提供了一些响应式设计，Javascript部分包含游戏的主要逻辑。游戏的几个重要步骤如下：
打破图像
对于图像看起来像分为nxn不同的部分，每侧的部件n数量在哪里，nxn li元素已被使用在一个ul。每个的显示属性li已设置为内嵌块，以使其显示为网格。每个背景图像li被设置为仅显示图像的1 /（n×n）部分，并且相应地设置背景图像的位置。data-value属性已被分配给每个li以标识该片段的索引。
代码如下：
打碎图片代码
在这里，您可以看到使用简单background-image和background-position风格实现了破坏的效果。在已经设置了博尔森图像之后，按照正确的顺序，随机化方法用于随机化片段。在游戏中，用户必须重新排列片段以形成完整的图像。
gridSize表示图像需要在每一侧（水平和垂直）分割多少部分。硬编码值400是盒子的大小。请注意，您可能想要摆脱这个硬编码的值。我将在下一次更新中用一个变量来更新。基于gridSize，我将拼图的级别分为3部分：容易，中等和难易。容易3x3格，中4x4和硬5x5。您可以通过更改相应的单选按钮的值，以不同的方式实现相同的方式。
随机断开零件
在设置图像损坏的部分后，如前面代码块的最后一行所示，随机化方法用于随机分割碎片。为此，创建一个小型通用随机化函数来随机化任何jquery元素集合。
随机化方法的实现如下：
随机断开零件代码
在这里，我们只是简单地循环给定选择器的每个子元素，并根据随机数改变其位置。随机数应在0和收集中的元素数之间。
拖放图片碎片
为了使每个碎片拖动，使用了jquery draggable插件。请确保您的页面中包含jquery-ui.js以实现可拖放/可拖放功能。
拖放图片碎片代码
正如您在上述代码片段中可以看到的，每次下降之后，isSorted 都将被调用来检查这些片段是否已被排序。正在根据包含li元素的data-value属性检查每个片段的排序。如果片段被排序，则表示图片已完成。
设置样式
已经使用了一个非常小的css来使其变得简单易懂。所使用的css允许页面响应，您可以在平板电脑或手机中玩游戏。没有使用css的第三方库，以便您可以轻松了解本机css样式。
计数步骤
计数步骤或任何用户操作是任何游戏中最常见的部分。这也是通过一个简单的步骤实现的。在每次下降之后，它检查图像是否形成。如果是，游戏结束，如果没有，则将stepCount 变量递增1.然后，stepCount 使用jquery 更新UI。
计时器
计时器也是大多数游戏的重要组成部分之一。基于读者提供的反馈，已经实现了一个基本的计时器来检查完成拼图所需的秒数。计时器正在游戏开始时启动，tick 每秒钟调用 方法来更新计时器。Tick方法一旦从start方法调用，然后每秒钟调用自身（使用JavaScript SetTimeout）并使用JQuery更新UI中使用的时间。当图片完成时，游戏结束，最后计时，并在使用JQuery的输出中显示。
下面是定时器方法的实现：
计时器代码
请注意，getTime（）方法给出自01/01/1970以来通过的毫秒数。如果您建议更好的方法来计算两个DateTime 在javascript 之间的时间，我将不胜感激。我不想依靠1000毫秒的差距setTimeout()来增加1秒。
级别
根据用户的反馈，游戏中添加了3个难度级别：1.轻松2.中等3.硬。在我们的例子中，选择容易设置3x3矩阵中的难题，4x4矩阵中的中等，硬设置为5x5矩阵。
浏览器兼容性
为了简单起见，我避免使用Html 5或CSS 3，以便它可以在大多数浏览器中使用。由于使用了JQuery版本，此游戏可能不适用于较早的浏览器<IE8。如果您希望在旧版本的旧版本中使用此游戏，您可以将脚本引用替换为较旧的JQuery版本（1.9或更早版本）。最新的JQuery版本不支持旧版浏览器。
上文的示例网址应该在大多数最新的浏览器中运行。已经在IE 11和Google Chrome中测试过。