英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

HTML版十五格滑动拼图制作工具

使用HTML DOM文档元素实现的经典迷你游戏十五格滑动拼图的简单实现，不使用Canvas或第三方库。

在混合图片时，不使用随机替换格子，只通过移动空格进行自然混合，因此可以排除由于随机导致拼图无法拼成的错误。

通过解决拼图，您可以在一次移动中移动一列或一行中的多个方块。您可以为GamePad和键盘设置控制。

引擎代码非常灵活，可进行修改，具有多种设置，并且可以集成到任何网页或网络应用中。

编辑器: https://kirilllive.github.io/Fifteen_puzzle_maker/

演示: https://kirilllive.github.io/Fifteen_puzzle_maker/example.html

结构

要使用它，您需要创建一个ID为“fifteen”的div元素并添加带参数的数组，脚本会自动完成其余操作。脚本非常简单，您可以轻松将此迷你游戏添加到您的网页中。

<html>
    <head>
    </head>
    <body>
        <div id='fifteen'></div> <!--element "fifteen" in which the game will take place-->
        <script>
        var setup={
             puzzle_fifteen:{
                diff:300,           // Number of movements of the slots for shuffling pictures
                size:[512,640],     // Clement size "fifteen" in pixels only
                grid:[3,3],         // The number of squares in the height and width of the picture
                fill:true,          // Stretching the area with the game to fit the element is recommended for fullscreen
                number:true,        // Slot sequence number
                art:{
                    url:"art.jpg",  // Path to the picture (you can use any format of supported browsers, gif-animation and svg)
                    ratio:false     // Enlarge the picture in height or width
                },
                // optional elements
                time:"0.1",         // block move animation time
                style:"border-radius:12px;", // style for puzzle square
                emptySlot:[1],      // Empty square number, defaults to the lower right quadrant.
                keyBoard:true,      // Control using the keys on the keyboard
                gamePad:true        // Control using the joystick on the Gamepad
             }
        }
        </script>
        <script src="fifteen_puzzle.js"></script> <!--path to file engine-->
    </body>
</html>

编辑器 / 演示

您可以上传您的图片，设置参数并生成带有游戏和您图片的 HTML 文件。您可以在您的网站上使用生成的文件或直接在您的设备上使用，或者您可以自己修改它，更改参数，或者编写自己的脚本，在游戏结束后运行。

在线制作器试玩: https://kirilllive.github.io/Fifteen_puzzle_maker/

编辑器功能

• 基于图片尺寸的自动样式适配
• 将图片按比例分割成块
• 生成 / 导出带有游戏的 HTML 文件
• 一次移动多个块
• 拖放上传图片