Question

所以我试图制作一个滑块拼图。如果我能够交换图片，我可以随机化表格并进行正确的交换。我不能为我的生活弄清楚为什么我不能交换这些图片，我不知道该怎么做。我已经被困了一段时间，并尝试了不同的方法。

拼图应该如何操作是当点击空白拼贴附近的任何拼贴（将是黑色图片）时，只要它们与空白拼贴相邻，它们就会交换位置。

所以只有那些瓷砖可以互换而不能互换。最终这个难题将被解决。

<html>

<script>

picArray = [
    "faceassingment6_01.png",
    "faceassingment6_02.png",
    "faceassingment6_03.png",
    "faceassingment6_04.png",
    "faceassingment6_05.png",
    "faceassingment6_06.png",
    "faceassingment6_07.png",
    "faceassingment6_08.png",
    "backtile.png"
]
sramArray = []
function scramblePic()
{
    var seven = 7
        for (i = 0; i < 9; ++i)
        {
            r = Math.floor(Math.random() * picArray.length)
            x = picArray[r]

            sramArray.push(x)
            picArray.splice(r , 1)

            document.getElementById(i).src = sramArray[i]
        }
}

function moveTile(x)
{
    blankVal = document.getElementById("8").src
    var blankCount = 0;
    var cols = 3

    for (i = 0; i < 9; ++i)
    {
            if (sramArray[i] == "backtile.png")
            {
                temp = sramArray[i]
                sramArray[i] = sramArray[blankCount]
                sramArray[blankCount] = temp
                break;

            }
            else
            {
                blankCount++
            }
    }

    if ((((x == blankCount - 1) || (x == blankCount + 1)) && ((Math.floor(x/cols)) == (Math.floor(blankCount/cols)))) || (x == blankCount + cols) || (x == blankCount - cols))
  {
                temp = document.images[x].src
                document.images[x].src = sramArray[blankCount]
                // = temp

    }
}

</script>
<head>
    <title> test </title>

</head>
    <body bgcolor="gray" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload = "scramblePic()">

            <table id="Table_01" width="600" height="600" border="0" cellpadding="0" cellspacing="0" align = "center">
                <tr>
                    <td>
                        <img src="faceassingment6_01.png" width="200" height="200" alt="" id = "0" onclick = "moveTile(0)"></td>
                    <td>
                        <img src="faceassingment6_02.png" width="200" height="200" alt="" id = "1" onclick = "moveTile(1)"></td>
                    <td>
                        <img src="faceassingment6_03.png" width="200" height="200" alt="" id = "2" onclick = "moveTile(2)"></td>
                </tr>
                <tr>
                    <td>
                        <img src="faceassingment6_04.png" width="200" height="200" alt="" id = "3" onclick = "moveTile(3)"></td>
                    <td>
                        <img src="faceassingment6_05.png" width="200" height="200" alt="" id = "4" onclick = "moveTile(4)"></td>
                    <td>
                        <img src="faceassingment6_06.png" width="200" height="200" alt="" id = "5" onclick = "moveTile(5)"></td>
                </tr>
                <tr>
                    <td>
                        <img src="faceassingment6_07.png" width="200" height="200" alt="" id = "6" onclick = "moveTile(6)"></td>
                    <td>
                        <img src="faceassingment6_08.png" width="200" height="200" alt="" id = "7" onclick = "moveTile(7)"></td>
                    <td>
            <img src = "backtile.png" width = "200" height = "200" alt = "" id = "8" onclick = "moveTile(8)" >
          </td>
                </tr>
            </table>


</body>
</html>

Answer 1

所以我想出了问题所在。这只是我试图找到空白图片的方式以及我如何交换它们。这是正确的功能代码：

function moveTile(x)
{
    var blankCount = 0;
    var cols = 3
    var count = 0

    while (sramArray[count] != "backtile.png")
    {
        ++blankCount
        ++count
    }

    if ((((x == blankCount - 1) || (x == blankCount + 1)) && ((Math.floor(x/cols)) == (Math.floor(blankCount/cols)))) || (x == blankCount + cols) || (x == blankCount - cols))
  {
            temp = document.images[x].src
            document.images[x].src = document.images[blankCount].src
            document.images[blankCount].src = temp

            holdVal = sramArray[x]
        sramArray[x] = sramArray[blankCount]
        sramArray[blankCount] = holdVal

            blankCount = 0
            count = 0

            checkPuzzle()
    }
}

Javascript Slidng拼图不起作用

1 个答案: