Question

我正在尝试使用随机生成的1到15的数字填充表格，且不重复。我使用的代码只是在所有单元格中始终显示“未定义”。我认为问题出在随机部分，但无法弄清楚为什么会出错。

function setup()
        {
            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")]);
            placeValues(cells);
            
            
        }
        
        function placeValues(cells)
        {
            var numbers = new Array();
            var randomLoc;
            var temp;
            
            for (var 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++;
                            }
                            
                        }
                }
        }

<html>
<head>
<script></script>
</head>
<body onload="setup()">
<div id="content">    
    <p>You can move any number into an empty spot by moving up, down,
    right, or left. Diagonal moves are not allowed. The object is
    to get all the numbers into correct order, from 1 through 15
    with the empty space at the end.</p>
    <table width="60%" align="center">
    <tr>
        <td height="60"><span id="cell00"></span></td>
        <td><span id="cell01"></span></td>
        <td><span id="cell02"></span></td>
        <td><span id="cell03"></span></td>        
        </tr><tr>
        <td height="60"><span id="cell10"></span></td>
        <td><span id="cell11"></span></td>
        <td><span id="cell12"></span></td>
        <td><span id="cell13"></span></td>        
        </tr><tr>
        <td height="60"><span id="cell20"></span></td>
        <td><span id="cell21"></span></td>
        <td><span id="cell22"></span></td>
        <td><span id="cell23"></span></td>        
        </tr><tr>
        <td height="60"><span id="cell30"></span></td>
        <td><span id="cell31"></span></td>
        <td><span id="cell32"></span></td>
        <td><span id="cell33"></span></td>        
        </tr>   
    </table>
    
</div>
</body>

它在所有单元格中显示“未定义”，由于某种原因，它告诉我未填充数字数组或单元格数组的列。你能帮我吗？

Answer 1

有两个问题：

numbers数组从未使用值进行初始化，因此交换无效。
在最终循环中i的增加应该总是发生。

侧面说明：改组算法似乎不是最佳的。看看How to Randomise/Shuffle a JavaScript Array。

function setup()
        {
            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")]);
            placeValues(cells);
            
            
        }
        
        function placeValues(cells)
        {
            var numbers = [...Array(16).keys()]; // Generate array with values 0..15
            var randomLoc;
            var temp;
            
            for (var 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++; // This was misplaced
                        }
                }
        }

<html>
<head>
<script></script>
</head>
<body onload="setup()">
<div id="content">    
    <p>You can move any number into an empty spot by moving up, down,
    right, or left. Diagonal moves are not allowed. The object is
    to get all the numbers into correct order, from 1 through 15
    with the empty space at the end.</p>
    <table width="60%" align="center">
    <tr>
        <td height="60"><span id="cell00"></span></td>
        <td><span id="cell01"></span></td>
        <td><span id="cell02"></span></td>
        <td><span id="cell03"></span></td>        
        </tr><tr>
        <td height="60"><span id="cell10"></span></td>
        <td><span id="cell11"></span></td>
        <td><span id="cell12"></span></td>
        <td><span id="cell13"></span></td>        
        </tr><tr>
        <td height="60"><span id="cell20"></span></td>
        <td><span id="cell21"></span></td>
        <td><span id="cell22"></span></td>
        <td><span id="cell23"></span></td>        
        </tr><tr>
        <td height="60"><span id="cell30"></span></td>
        <td><span id="cell31"></span></td>
        <td><span id="cell32"></span></td>
        <td><span id="cell33"></span></td>        
        </tr>   
    </table>
    
</div>
</body>

用数组填充表，但未定义

1 个答案: