图像拼图：HTML游戏

目录

介绍

规则

关于代码

打破图像

随机化破碎的部分

拖放片段

设置样式

计算步骤

计时器

水平

浏览器兼容性

---

• 来自GitHub的JQuery版本
• 来自GitHub的JavaScript版本

介绍

这是一篇针对初学者的文章，他们希望通过一些简单的方法在网络上开始游戏开发，而不需要使用任何繁重的工具。本文提供了使用HTML / CSS和JavaScript开始2D游戏开发的简化步骤。在这里，我将介绍如何创建一个图像拼图游戏，您可以在其中拖放图像部件以交换并重新排列部件以形成完整的图像。现在，我们在GitHub中也为同一个游戏提供了简单的JavaScript版本。

你可以在这里玩在线游戏。

规则

游戏规则很简单。您只需拖放损坏的图像片段即可进行交换。您需要以形成正确图像的方式交换它们。将计算拖放图像部分所采取的步骤数。因此，您可能希望尽可能少地考虑并尝试这样做。右侧提供了正确的图像供您参考。

游戏的屏幕看起来像这样：

关于代码

为了理解它，我们可以将代码分为3部分。HTML，CSS和JavaScript。HTML部分包含形成游戏布局的简单标签。CSS提供了一些响应式设计，JavaScript部分包含了游戏的主要逻辑。一些游戏的重要步骤如下：

打破图像

对于像分解成nxn不同部分的图像，n每边的部件数量，nxn li元素已在ul中使用。每个li的显示属性已设置为内联块，因此它应显示为网格。每个li的背景图像已被设置为仅显示图像的第1 /（n×n个）部分，背景图像的位置也被相应设置。data-value属性分配给每个li，以标识该片段的索引。

相同的代码如下所示：

setImage: function (images, gridSize) {
    console.log(gridSize);
    gridSize = gridSize || 4; // If gridSize is null or not passed, default it as 4.
    console.log(gridSize);
    var percentage = 100 / (gridSize - 1);
    var image = images[Math.floor(Math.random() * images.length)];
    $('#imgTitle').html(image.title);
    $('#actualImage').attr('src', image.src);
    $('#sortable').empty();
    for (var i = 0; i < gridSize * gridSize; i++) {
        var xpos = (percentage * (i % gridSize)) + '%';
        var ypos = (percentage * Math.floor(i / gridSize)) + '%';
        var li = $('<li class="item" data-value="' + (i) + '"></li>').css({
            'background-image': 'url(' + image.src + ')',
            'background-size': (gridSize * 100) + '%',
            'background-position': xpos + ' ' + ypos,
            'width': 400 / gridSize,
            'height': 400 / gridSize
        });
        $('#sortable').append(li);
    }
    $('#sortable').randomize();
}

在这里，您可以看到使用简单background-image和background-position样式实现破碎效果。在设置了破碎的图像之后，以正确的顺序，使用randomize方法使这些碎片随机化。在游戏中，用户必须重新排列碎片以形成完整的图像。   

gridSize表示每边（水平和垂直）需要打破多少部分图像。硬编码值400是盒子的大小。基于此gridSize，我将拼图的级别分为3个部分：简单，中等和困难。简单的是3x3网格，中等的是4x4和困难的是5x5。您可以通过更改相应单选按钮的值以不同方式实现相同的功能。

随机化破碎的部分

设置图像的破碎部分后，如前面代码块的最后一行所示，randomize方法用于随机化碎片。为此，创建一个小的通用randomize函数来随机化任何jquery元素集合。

randomize方法的实现如下：

$.fn.randomize = function (selector) {
    var $elems = selector ? $(this).find(selector) : $(this).children(),
        $parents = $elems.parent();

    $parents.each(function () {
        $(this).children(selector).sort(function () {
            return Math.round(Math.random()) - 0.5;
        }).remove().appendTo(this);
    });
    return this;
};

在这里，我们只是循环遍历给定选择器的每个子元素，并根据随机数改变其位置。随机数应介于0和集合中的元素数之间。

拖放片段

为了使每个片段可拖动，已经使用了jquery draggable。请确保页面中包含jquery-ui.js以实现可拖放功能。

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允许页面响应，您也可以在平板电脑或手机中玩游戏。没有使用CSS的第三方库，因此您可以轻松地理解本机CSS样式。

计算步骤

计算步数或任何用户动作是任何游戏中最常见的部分。在这里，它已经通过一个简单的步骤实现。每次释放(鼠标拖拽)后，它会检查图片是否形成。如果是，游戏结束，如果不是，则增加stepCount 变量1。然后，使用jquery 更新UI中的stepCount 。

计时器

计时器也是大多数游戏的重要组成部分之一。根据读者提供的反馈，已经实现了一个基本计时器来检查完成拼图所需的秒数。计时器在游戏开始时启动，并且每秒调用一次tick 方法来更新计时器。Tick方法一旦从start方法中调用，然后在每秒后（使用JavaScript SetTimeout）递归调用自身，并使用JQuery更新UI中所用的时间。当图片完成时，即游戏结束时，计算最终时间并使用JQuery在输出中显示。

以下是timer方法的实现。

tick: function () {
     var now = new Date().getTime();
     var elapsedTime = parseInt((now - imagePuzzle.startTime) / 1000, 10);
     $('#timerPanel').text(elapsedTime);
     timerFunction = setTimeout(imagePuzzle.tick, 1000);
 }

请注意，该getTime()方法给出了自01/01/1970之后经过的毫秒数。如果您建议更好的方法来计算JavaScript中两个DateTimes 之间的时间，我将不胜感激 。我不想依靠1000毫秒的间隙setTimeout()增加1秒。

水平

根据用户提供的反馈，游戏中增加了3个难度级别：

1. 简单
2. 中等
3. 困难

在我们的例子中，选择简单将拼图设置为3x3矩阵，中等设置为4x4矩阵，困难设置为5x5矩阵。

浏览器兼容性

为了简单起见，我避免使用HTML 5或CSS 3，因此它可以在大多数浏览器中使用。由于使用了最新的JavaScript代码，此游戏可能无法用于旧版浏览器<IE11。如果您希望在较旧的浏览器版本中使用此游戏，则可以简单地将脚本引用替换为较旧的JQuery版本（1.9或更早版本）。最新的JQuery版本不支持旧版浏览器。

附带的示例代码应该适用于大多数最新的浏览器。我在IE 11和谷歌浏览器中测试了它。

 

原文地址：https://www.codeproject.com/Articles/810978/Image-Puzzle-An-HTML-Game