0 
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>겜블링 게임</title>
    <style>
        table {
            border: 1px solid violet;
            border-collapse: collapse;
        }

        td {
            width: 50px;
            height: 50px;
            padding: 0px;
            font: italic 50px consolas, sans-serif;
            color: blue;
            text-align: center;
            background: linen;
        }

        div#msg {
            font: italic 18px consolas, sans-serif;
            color: magenta;
            margin-top: 10px;
        }
    </style>

    <script>
        // to do
        var gameon = true; 
        var gameArray = [0, 0, 0] 
        function gen(event) {
            if (gameon == false) {
                return;
            }

            // generation 0~2 
            // to do
            else if (gameon == true) {
                
                document.getElementById("first").innerHTML = Math.floor(Math.random() * 3);
                gameArray[0] = document.getElementById("first").innerHTML;
                
                document.getElementById("second").innerHTML = Math.floor(Math.random() * 3);
                gameArray[1] = document.getElementById("second").innerHTML;
                
                document.getElementById("third").innerHTML = Math.floor(Math.random() * 3);
                gameArray[2] = document.getElementById("third").innerHTML;
                

                if (gameArray[0] == gameArray[1] && gameArray[1] == gameArray[2]) {
                    document.getElementById("msg").innerHTML = "Success(click here to do again)";
                    gameon = false;
                }

                else {
                    document.getElementById("msg").innerHTML = "fail(click here to do again)";
                }
            
            }
        }

        function reset() {
            for (var i = 0; i < gameArray.length; i++)
                gameArray[i] = 0;

            document.getElementById("first").innerHTML = 0;
            document.getElementById("second").innerHTML = 0;
            document.getElementById("third").innerHTML = 0;

            gameon = true;
        }
    </script>

</head>

<body>
    <h3>갬블링 게임</h3>
    <hr>
    <table>
        <tr>
            <td id="first" onclick="gen(event)">0</td>
            <td id="second" onclick="gen(event)">0</td>
            <td id="third" onclick="gen(event)">0</td>
        </tr>
    </table>
    <div id="msg" onclick="reset()"></div>

</body>

</html>

每个数字变成一个从 0 到 2 的随机数字。如果每个人都得到相同的数字，他们就赢了。我想修改（else if）部分，这样如果我点击一个数字，那个数字就会改变。目前的方法是，当你点击时，所有的数字都会改变。该部分需要在不修改的情况下解决。//我应该怎么做才能只修改 //to 的底部部分？

4

1 回答 1

2

一些备注：

  • 在代码中绑定事件处理程序，而不是在 HTML 中
  • 不要给元素单独id的属性。td而是使用容器元素——tr元素及其子集合。
  • 使用专用功能执行显示
  • 您可以知道点击了event.target.cellIndex哪个数字（0、1 或 2）
  • 条件game == false可以是 just !game，因为我们知道它是一个布尔值
  • 当这个条件失败时，剩下的唯一可能就是那个game == true，所以没有理由用另一个来检查那个if。
  • 我会在页面上添加一个“重置”按钮。单击按钮比单击成功消息更直观。
  • 请注意，如果您从 0-0-0 开始，然后单击一个数字，则生成 0 的概率为 3 分之一，因此所有三个数字都相同。这感觉很奇怪，因为除了“成功”消息之外，用户看不到任何事情发生。
  • innerHTML当您只放置纯文本时不要使用。在这种情况下使用textContentor innerText。
  • 与其document.getElementById一遍又一遍地读取 DOM，不如在页面加载时执行一次，并将脚本放在文档内容下方。

这是建议的代码。确保将此脚本放在您的 HTML 内容下方，就在结束</body>标记之前：

var gameon; 
var gameArray = [0, 0, 0];

var elems = document.querySelectorAll("td");
var elems = document.getElementById("numbers").children;
for (let elem of elems) elem.addEventListener("click", gen);

var msg = document.getElementById("msg");
msg.addEventListener("click", reset);

var resetButton = document.getElementById("reset");
resetButton.addEventListener("click", reset);

reset();

function display() {
    msg.textContent = "";
    for (let i = 0; i < gameArray.length; i++) {
        elems[i].textContent = gameArray[i];
    }
    gameon = true;
}

function gen(event) {
    if (!gameon) {
        return;
    }
    let index = event.target.cellIndex;
    gameArray[index] = Math.floor(Math.random() * 3);
    display();
    gameon = gameArray[0] != gameArray[1] || gameArray[1] != gameArray[2];
    document.getElementById("msg").textContent = 
        gameon ? "fail(click here to do again)" 
               : "Success(click here to do again)";
}

function reset() {
    gameArray.fill(0);
    display();
}
table {
    border: 1px solid violet;
    border-collapse: collapse;
}

td {
    width: 50px;
    height: 50px;
    padding: 0px;
    font: italic 50px consolas, sans-serif;
    color: blue;
    text-align: center;
    background: linen;
}

div#msg {
    font: italic 18px consolas, sans-serif;
    color: magenta;
    margin-top: 10px;
}
<h3>갬블링 게임</h3>
<hr>
<table>
    <tr id="numbers">
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
</table>
<button id="reset">Reset</button>
<div id="msg"> </div>

如果您只能更改else块，则使其：

else {
    let i = event.target.cellIndex;
    gameArray[i] = Math.floor(Math.random() * 3);
    document.getElementById(["first", "second", "third"][i]).textContent = gameArray[i];
    gameon = gameArray[0] != gameArray[1] || gameArray[1] != gameArray[2];
    document.getElementById("msg").textContent = 
        gameon ? "fail(click here to do again)" 
               : "Success(click here to do again)";
}
于 2021-05-26T21:02:14.440 回答