在16×16网格html中添加图像创建拼图&；javascript_Javascript_Html

在16×16网格html中添加图像创建拼图&；javascript

javascript html

在16×16网格html中添加图像创建拼图&；javascript,javascript,html,Javascript,Html,我已经试着做了必要的工作，但无法让一张图像看起来像是被分割成16块。这是我的代码到原始的没有图像和工程与数字1-15 <?xmlversion="1.0"encoding="utf-8"?> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  &l

我已经试着做了必要的工作，但无法让一张图像看起来像是被分割成16块。这是我的代码到原始的没有图像和工程与数字1-15

<?xmlversion="1.0"encoding="utf-8"?>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--Exercise12.8:Solution-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Solution12.8</title>
<style type="text/css">
    span{font-size:4em;
    font-weight:bold;
    font-family:helvetica,arial,sans-serif;
    color:blue}
    table{border-collapse:collapse}
    td{border:2px solid gray;
    width:5em}
</style>
<script type="text/javascript">
<!--
    var cells;
    var swapped;

    function setup()
    {
    // create a 2d array of all the cells
        cells = new Array(
          [ document.getElementById("cell00"),
            document.getElementById("cell01"),
            document.getElementById("cell02"),
            document.getElementById("cell03") ],
          [ document.getElementById("cell10"),
            document.getElementById("cell11"),
            document.getElementById("cell12"),
            document.getElementById("cell13") ],
          [ document.getElementById("cell20"),
            document.getElementById("cell21"),
            document.getElementById("cell22"),
            document.getElementById("cell23") ],
          [ document.getElementById("cell30"),
            document.getElementById("cell31"),
            document.getElementById("cell32"),
            document.getElementById("cell33") ] );

        placeNumbers();
    }

        function placeNumbers()
        {
        var numbers = new Array();
        var randomLoc;
        var temp;

        for(var i=0; i < 16;i++)
        numbers[i]= i;

        for(i = 0; i <16;i++)
        {
        randomLoc = Math.floor(Math.random()*15+1);
        temp = numbers[i];
        numbers[i] = numbers[randomLoc];
        numbers[randomLoc] = temp;
        }

        i=0;
        for (var rows=0;rows<4;rows++)
            for(var cols = 0;cols<4;cols++)
            {
                if ( numbers[i] != 0) 
                cells[rows][cols].innerHTML = numbers[i];
                else
                cells[rows][cols].innerHTML="";

                ++i;
                }
                }

                function doClick(row,col)
                {
                var top = row-1;
                var bottom = row + 1;
                var left = col - 1;
                var right = col + 1;

                swapped = false;

                if (top != -1 && cells[top][col].innerHTML=="")
                swap(cells[row][col], cells[top][col]);
                else if ( right != 4 &&
                cells[row][right].innerHTML =="")
                swap(cells[row][col],cells[row][right]);
                else if (bottom != 4 &&
                cells[bottom][col].innerHTML == "")
                swap (cells[row][col],cells[bottom][col]);
                else if ( left != -1 && 
                cells[row][left].innerHTML=="")
                swap(cells[row][col],cells[row][left]);
                else
                alert("An Illegal move has been made.  Please click on a number nearest the blank space");

                checkWin();
                }

                function swap(firstCell,secondCell)
                {
                swapped = true;
                secondCell.innerHTML=firstCell.innerHTML;
                firstCell.innerHTML="";
                }

                function checkWin()
                {
                    var win = true;

                    for (var i = 0 ; i < 4; i++)
                        for (var j = 0; j < 4; j++)
                            if (!(cells[i][j].innerHTML == i*4 + j + 1))
                                if (!(i == 3 && j == 3))
                                    win = false;
                        if (win)
                            if ( window.prompt( "Would you like to play again?", "yes") )
                                placeNumbers();
                            else
                            alert ("Game Over. Thank you for playing");
                 }
                //-->
                </script>
                </head>
                <body onload="setup()">
                <table>
                <tr>
                    <td> <span onclick = "doClick(0,0)"id="cell00"/></td>
                    <td> <span onclick = "doClick(0,1)"id="cell01"/></td>
                    <td> <span onclick = "doClick(0,2)"id="cell02"/></td>
                    <td> <span onclick = "doClick(0,3)"id="cell03"/></td>
                </tr>
                <tr>
                    <td> <span onclick = "doClick(1,0)"id="cell10"/></td>
                    <td> <span onclick = "doClick(1,1)"id="cell11"/></td>
                    <td> <span onclick = "doClick(1,2)"id="cell12"/></td>
                    <td> <span onclick = "doClick(1,3)"id="cell13"/></td>
                </tr>
                <tr>
                    <td> <span onclick = "doClick(2,0)"id="cell20"/></td>
                    <td> <span onclick = "doClick(2,1)"id="cell21"/></td>
                    <td> <span onclick = "doClick(2,2)"id="cell22"/></td>
                    <td> <span onclick = "doClick(2,3)"id="cell23"/></td>
                </tr>
                <tr>
                    <td> <span onclick = "doClick(3,0)"id="cell30"/></td>
                    <td> <span onclick = "doClick(3,1)"id="cell31"/></td>
                    <td> <span onclick = "doClick(3,2)"id="cell32"/></td>
                    <td> <span onclick = "doClick(3,3)"id="cell33"/></td>
                </tr>
                </table>
            </body>
</html>


解决方案12.8
span{字体大小：4em；
字体大小：粗体；
字体系列：helvetica、arial、无衬线字体；
颜色：蓝色}
表{边框折叠：折叠}
td{边框：2px实心灰色；
宽度：5em}

现在我正在尝试的图像这里是代码，但我不能让它工作

<html>
<head>
    <title>12.9</title>

<style type = "text/css">
    table{border-collapse:collapse}
    td{border:1px solid gray;}

</style>
<script type= "text/javascript">
    <--
    var cells;
    var swapped;

    function setup()
    {
        //create a 2d array of cells
        cells = new Array (
        [ document.getElementById("cell00"),
          document.getElementById("cell01"),
          document.getElementById("cell02"),
          document.getElementById("cell03")],
        [ document.getElementById("cell10"),
          document.getElementById("cell11"),
          document.getElementById("cell12"),
          document.getElementById("cell13")],
        [ document.getElementById("cell20"),
          document.getElementById("cell21"),
          document.getElementById("cell22"),
          document.getElementById("cell23")],
        [ document.getElementById("cell30"),
          document.getElementById("cell31"),
          document.getElementById("cell32"),
          document.getElementById("cell33") ] );

        placeNumbers();
    }

    function placeNumbers()
    {
        var numbers = new Array();
        var randomLoc;
        var temp;

        for (i= 0; i < 16; i++)
        numbers[i] = i + "9.gif";

        for (i=0; i<16; i++)
        {
            randomLoc = Math.floor( Math.random() * 15 + 1 );
            temp = numbers[i];
            numbers[i] = numbers[randomLoc];
            numbers[randomLoc] = temp;
        }

        i = 0;
        for (var rows = 0; rows < 4; rows++)
            for ( vars cols = 0; cols < 4; cols++;)
            {
            if (numbers [i] != "9.gif")
                {
                cells[rows][cols].src = numbers[i];
                cells[rows][cols].alt = numbers[i];
                }
            else
                {
                cells[rows][cols].style.display = "none";
                cells[rows][cols].alt = "hidden";
                cells[rows][cols].src = "9.gif";
                }

                ++i;
            }
    }

    function doClick( row, col)
    {
        var top = row - 1;
        var bottom = row + 1;
        var left = col - 1;
        var right = col + 1;

        swapped = false;

        if ( top  != -1 && cells[top][col].alt  == "hidden")
            swap (cells[row][col], cells[top][col]);
        else if (right != 4 && 
            cells [row][right].alt == "hidden")
            swap (cells[row][col], cells[row][right] );
        else if (bottom != 4 &&
            cells[bottom][col].alt == "hidden")
            swap(cells[row][col], cells[bottom][col]);
        else if (left != -1 &&
            cells[row][left].alt == "hidden")
            swap( cells[row][col], cells[row][left]);
        else    
            alert( "Illegal Move has been made" );

        checkWin();
    }

    function swap(firstCell, secondCell)
    {
        swapped = true;
        secondCell.src = firstCell.src;
        secondCell.alt = firstCell.alt;
        secondCell.style.display = "inline";
        firstCell.src = "9.gif";
        firstCell.alt = "hidden";
        firstCell.style.display = "none";
    }

    function checkWin()
    {
        var win = true;

        for(var i = 0; i<4; i++)
            for (var j = 0; j<4; j++)
                if (!(cells[i][j].src == i*4 + j + 1 + "9.gif"))
                    if (!(i == 3 && j == 3) ) 
                        win = false;

        if (win)
            if ( window.prompt( "Would you like to play again?", "yes") )
                placeNumbers();
    }
    //-->
</script>
</head>
<body onload = "setup()">
    <table>
        <tr>
            <td><img src = "9.gif" alt = "" onclick = "doClick(0,0)"
                id = "cell00" /></td>
            <td><img src = "9.gif" alt = "" onclick = "doClick(0,1)"
                id = "cell01" /></td>
            <td><img src = "9.gif" alt = "" onclick = "doClick(0,2)"
                id = "cell02" /></td>
            <td><img src = "9.gif" alt = "" onclick = "doClick(0,3)"
                id = "cell03" /></td>
        </tr>
        <tr>
            <td><img src = "9.gif" alt = "" onclick = "doClick(1,0)"
                id = "cell10" /></td>
            <td><img src = "9.gif" alt = "" onclick = "doClick(1,1)"
                id = "cell11" /></td>
            <td><img src = "9.gif" alt = "" onclick = "doClick(1,2)"
                id = "cell12" /></td>
            <td><img src = "9.gif" alt = "" onclick = "doClick(1,3)"
                id = "cell13" /></td>
        </tr>
        <tr>
            <td><img src = "9.gif" alt = "" onclick = "doClick(2,0)"
                id = "cell20" /></td>
            <td><img src = "9.gif" alt = "" onclick = "doClick(2,1)"
                id = "cell21" /></td>
            <td><img src = "9.gif" alt = "" onclick = "doClick(2,2)"
                id = "cell22" /></td>
            <td><img src = "9.gif" alt = "" onclick = "doClick(2,3)"
                id = "cell23" /></td>
        </tr>
        <tr>
            <td><img src = "9.gif" alt = "" onclick = "doClick(3,0)"
                id = "cell30" /></td>
            <td><img src = "9.gif" alt = "" onclick = "doClick(3,1)"
                id = "cell31" /></td>
            <td><img src = "9.gif" alt = "" onclick = "doClick(3,2)"
                id = "cell32" /></td>
            <td><img src = "9.gif" alt = "" onclick = "doClick(3,3)"
                id = "cell33" /></td>
        </tr>
    </table>
</body>
</html>


12.9
表{边框折叠：折叠}
td{边框：1px实心灰色；}
当你说你不能让它工作时，你能具体说明你的意思吗？运行代码时会发生什么，这与您期望的有什么不同？你收到任何错误信息吗？没有错误代码我应该只有一个单独的图像分成15块，我可以在网格中移动。有点像数字拼图。不只是数字，它会有一个图像打开浏览器中的错误控制台，你会看到那里实际上有一条错误消息。它会说SyntaxError:missing；在for循环初始值设定项
（或类似项）之后，指向错误所在的行。