java 脚本游戏/我想通过单击更改一个数字我应该怎么办？

问题描述

<!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] 
        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 do 的底部？

解决方法

一些说明：

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

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

var gameon; 
var gameArray = [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)";
}

gambling javascript

java 脚本游戏/我想通过单击更改一个数字我应该怎么办？

问题描述

解决方法

相关问答