由于缺少原始图像的某些部分,因此难以解决移相器滑动难题 [英] Difficult to solve the phaser sliding puzzle as some parts of the original image is missing

查看:99
本文介绍了由于缺少原始图像的某些部分,因此难以解决移相器滑动难题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试创建移相器示例游戏滑动拼图

Im trying to create the phaser examples game sliding puzzle

此处演示了实时示例

但是在输出游戏中,原始图像的某些部分丢失了.因此很难解决这个难题. 我怀疑将图像切成碎片的算法不正确.
件的代码是,

But in the output game, some parts of the original image is missing. So it is difficult to solve the puzzle. I am suspecting the algorithm of cutting the image to pieces is not correct.
The code for pieces is ,

function prepareBoard() {

    var piecesIndex = 0,
        i, j,
        piece;

    BOARD_COLS = Math.floor(game.world.width / PIECE_WIDTH);
    BOARD_ROWS = Math.floor(game.world.height / PIECE_HEIGHT);

    piecesAmount = BOARD_COLS * BOARD_ROWS;

    shuffledIndexArray = createShuffledIndexArray();

    piecesGroup = game.add.group();

    for (i = 0; i < BOARD_ROWS; i++)
    {
        for (j = 0; j < BOARD_COLS; j++)
        {
            if (shuffledIndexArray[piecesIndex]) {
                piece = piecesGroup.create(j * PIECE_WIDTH, i * PIECE_HEIGHT, "background", shuffledIndexArray[piecesIndex]);
            }
            else { //initial position of black piece
                piece = piecesGroup.create(j * PIECE_WIDTH, i * PIECE_HEIGHT);
                piece.black = true;
            }
            piece.name = 'piece' + i.toString() + 'x' + j.toString();
            piece.currentIndex = piecesIndex;
            piece.destIndex = shuffledIndexArray[piecesIndex];
            piece.inputEnabled = true;
            piece.events.onInputDown.add(selectPiece, this);
            piece.posX = j;
            piece.posY = i;
            piecesIndex++;
        }
    }

}

function createShuffledIndexArray() {

    var indexArray = [];

    for (var i = 0; i < piecesAmount; i++)
    {
        indexArray.push(i);
    }

    return shuffle(indexArray);

}

function shuffle(array) {

    var counter = array.length,
        temp,
        index;

    while (counter > 0)
    {
        index = Math.floor(Math.random() * counter);

        counter--;

        temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }

    return array;
    
}

请任何人有任何想法?请分享任何算法以正确地切块.

Please anyone have any idea ? Please share any algorithm to correctly cut the pieces.

先谢谢了 iijb

推荐答案

这是经典的 15puzzle ,因为传统上它具有4x4网格,缺少1个图块(4x4-1 = 15个图块).但是难题实际上可以是任何网格大小(4x3、5x4、6x6等).

This is the classic 15puzzle because it traditionally has a 4x4 grid with 1 tile missing (4x4-1=15 tiles). However the puzzle can practically be any grid size (4x3, 5x4, 6x6 etc).

您正在使用.destIndex属性来跟踪其位置,但是您可以为每个图块赋予编号索引.我认为这样比较容易,因为在订购所有图块时,难题便得到解决,并且也将有助于解决可求解算法.

You're using a .destIndex property to keep track of their position, but you could just give each tile a numbered index. I think that way it's easier because when all the tiles are ordered the puzzle is solved and it would also help the check-if-solvable-algorithm.

使用此类滑动拼图游戏,有两点需要考虑,这有些棘手,特别是第二点:

With these kind of sliding tile puzzles, there are two things to consider which are a little tricky, especially the 2nd point:

  1. 总是缺少一个图块,因为那是玩家可以用来将图块滑入其中的空白点.最常见的是,丢失的图块是图像的右下图块.
  1. There is always one tile missing because that is the empty spot that the player can use to slide tiles into. Most commonly, the missing tile is the bottom-right tile of the image.

在您的算法中,空白图块始终是图像的左上图块. 这是不寻常的,玩家可能不会想到,但是从理论上讲,这并不重要,您可以通过这种方式做出可行的难题.然后,您可以在代码中按值1(对于零索引可能为0)跟踪空图块,因为它是第一个图块.

In your algorithm the blank tile is always the top-left tile of the image. This is unusual and players might not expect that, however in theory it doesn't really matter and you could make a workable puzzle that way. You then keep track of the empty tile in code by value 1 (or maybe 0 for zero-indexed) because it's the first tile.

  1. 某些配置是无法解决的,即,并非所有随机加扰的瓷砖情况都可以通过在周围滑动瓷砖来解决.
  1. Some configurations are unsolvable, i.e. not every random scrambled tiles situation can be solved by sliding the tiles around.

解决难题所需的反转次数(开关)为偶数而不是奇数时,谜题是可以解决的.所以算对数,更大的对 在较小的一个(= 1个倒置)的前面.例如,在一个3x3拼图中,缺少右下图块:

A puzzle is solvable when the number of inversions (switches) needed to solve it is an even number, not odd. So count the number of pairs where a bigger number is in front of a smaller one (=one inversions). For example in a 3x3 puzzle with the bottom-right tile missing:

5 3 4
2 6 1
8 7

在数组中看起来像这样[5,3,4,2,6,1,8,7,9],所以计数成对的5-3、5-4、5-2、5-1, 3-2 3-1、4-2 4-1、2-1、6-1、8-7.这等于11对,因此需要11个反转.这不是偶数,因此此配置无法解决.顺便说一句,丢失的图块内部具有最大可能的数字,在这种情况下为9.

In array it looks like this [5,3,4,2,6,1,8,7,9], so count pairs which are 5-3, 5-4, 5-2, 5-1, 3-2 3-1, 4-2 4-1, 2-1, 6-1, 8-7. This equals 11 pairs, so 11 inversions are needed. This is not an even number, thus this configuration is unsolvable. Btw note that the missing tile has internally the highest possible number, which is 9 in this case.

您可以使用此方法检测无法解决的难题.要使其再次可解决,您需要做的就是切换任意两个图块,例如,顶部的前两个图块(在示例中为5和3).当所需的开关数量为偶数时,它已经可以解决了,您无需执行任何操作.

You can use this method to detect a unsolvable puzzle. All you need to do to make it solvable again is switch any two tiles, so for example the top first two tiles (so 5 and 3 in the example). When the number of switches needed is an even number, it's already solvable and you don't need to do anything.

我做了类似的益智游戏,您可以在此处查看源代码以了解其工作原理:

I've made similar puzzle games, you can see the source code here to see how it works:

Photoscramble v2(下载包含Delphi的源文件)
Photoscramble v1(下载包括BlitzBasic源)

Photoscramble v2 (download incl Delphi source)
Photoscramble v1 (download incl BlitzBasic source)

这篇关于由于缺少原始图像的某些部分,因此难以解决移相器滑动难题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆