一款html拼图游戏详解

本文是爱编程原创翻译，转载请看清文末的转载要求，谢谢合作！

游戏介绍

这篇文章是献给web游戏开发者用简单的开发工具开发一款游戏。此文介绍了用html、css、javascript只需简单和几个步骤开发一款2d游戏。在这里，我要呈现给大家如何创建一款拼图游戏，在这个游戏中你可以拖动小图块来拼成完整的大图。

点击这里查看游戏效果。

游戏规则

游戏规则非常简单，你只要拖动被切碎的图片块来组成完整的大图。需要用正确的方法才能最终拼成完整的图片。在游戏中拖动小图片的次数将被统计下来。所以。应该尽量用最少的步骤来完成游戏。正确的图片效果在界面的右侧。

游戏的效果图如下：

关于代码

为了更好理解这些代码，我们把代码分为三部分，html，css和javasctipt。Html代码包括简单标记来布局游戏。Css提供了一系列的感应设计。Javascript部分就是游戏的主要逻辑代码。游戏的主要代码如下：

打碎图片

一张图片被切割成16个小块。把这16个小块放在ul的li标签下。li标签下的is的display属性设为inline-block。每一个Li标签的background –image属性设为这张图片的16分之1部分，背景图的位置按对应的设置好。实现代码如下：

 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
    });

到这一步你可以看到被打碎的图片效果，在右侧有个排序按钮，点击利用生成随机数的方法来随机的排列这些小碎片。在游戏中，用户需要重新排列这些小碎片来完成这张图片。

拖动图片的方法

为了让被打碎的小图片可以被拖动，我们需要引用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代码非常容易理解。

统计移动的次数

统计用户完成的步骤数是游戏设计中最常见的一部分。这款游戏也一样，这里应用了一个简单的步骤。每一次的拖动完成后检查图片是否已经成功完成。如果是游戏结束，如果不是，移动的次数加1。这里我们用了jquery ui来完成移动次数加1。

浏览器兼容性

我没有用任何html5和css3的属性，所以这款游戏可以支持大部分浏览器。这款游戏不能在ie8或更低版本中运行。如果你想让这款游戏兼容ie8，只需要简单的把引用的jquery版本换成1.9版本或更旧生版本。最新的jquery版本不支持这些低版本的浏览器。

引用的代码需运行在最新的浏览器中，已经测试了ie11和google浏览器，可以完美运行。

游戏改进

好了。这篇文章是用简单的代码给开发者介绍这款拼图游戏的开发。在游戏的改进方面我们可以添加一些音乐和一些动画效果使得我们的游戏更加有活力。作为开发者的你，也可想一想改进的方案，比如说加入游戏完成所用的时间统计功能。就到这里吧。祝你玩游戏愉快。

原文链接：http://www.w2bc.com/Article/5898
英文原文：Image Puzzle: A Html Game
翻译作者：爱编程– 拎壶充
[ 转载必须在正文中标注并保留原文链接、译文链接和译者等信息。]