迅速的背景变化，迅速回答

rapid background change upon prompt answer

本文关键字：背景 变化      更新时间：2023-09-26

我是JS的新手，我正在做一个简单的颜色猜谜游戏。到目前为止，一切都符合标准。

我唯一的问题是，我不能弄清楚如何使它，使背景立即改变用户输入(在提示点击[确定]后)。到目前为止，使用下面的代码，背景只有在点击[OK]后才会改变，我很确定这是可能的，因为我的教授在讲座中展示了一个例子，他在猜测正确的颜色后，背景颜色就会改变!

另外，如果有专业人士能给我一些改进我的代码的建议，那就太好了。我有一种感觉，它是混乱的，太复杂了，比它想要达到的效果。

PS:我知道js逻辑应该在页面中分开，但我的教授坚持我们用内联脚本做这个练习!

谢谢!

<body onload="doGame()">
    <script>
        var myBody = document.getElementsByTagName("body")[0];
        var target;
        var answer;
        var guessInputText;
        var guessInput;
        var finished = false;
        var guessAmount = 0;
        var colors = ['Salmon', 'Tomato', 'Moccasin', 'Peru', 'Olive', 'Teal', 'Navy', 'Thistle', 'Beige', 'Gray'];
        var colorsSorted = colors.sort();
        var colorsSortedString = colors.join(', ');
        function doGame() {
            var randomColorNum = Math.random() * 10;
            var randomColorNumInt = Math.floor(randomColorNum);
            target = colors[randomColorNumInt + 1];
            answer = target.charAt(0).toLowerCase() + target.slice(1).toLowerCase(); //makes sure answer is in lowercase
            alert("The answer is " + target + " or " + answer); //for debugging
            while(!finished) {
                guessInputText = prompt('I am thinking of one of these colors:'n'n' +
                                        colorsSortedString + ''n'n' +
                                        'What color am I thinking of?');
                guessInput = guessInputText.charAt(0).toLowerCase() + guessInputText.slice(1).toLowerCase(); //converts whatever input into lowercase
                guessAmount += 1;
                finished = checkGuess(); //checks to see if user input is correct
            }
        }
        function checkGuess() {
            if ((colors.indexOf(guessInputText.charAt(0).toUpperCase() + guessInputText.slice(1).toLowerCase()) > -1) == false) {
                alert("Sorry, I don't recognize your color.'n'n" +
                        "Please try again!");
                return false;
            }
            if (guessInput > answer) {
                alert("Sorry, Your guess is incorrect!'n'n" +
                        "Hint: Your color is alphabetically higher than mine.'n'n" +
                        "Please try again!");
                return false;
            }
            if (guessInput < answer) {
                alert("Sorry, Your guess is incorrect!'n'n" +
                        "Hint: Your color is alphabetically lower than mine.'n'n" +
                        "Please try again!");
                return false;
            }
                myBody.style.background = answer;
                alert("Congratulations! You have guessed the color!'n'n" +
                        "It took you " + guessAmount + " guesses to finish the game!'n'n" +
                        "You can see the color in the background.");
                return true;
    }
    </script>
</body>

如果你想在[OK]显示之前修改背景，你只需要移动这一行

myBody.style.background = answer;

但. .测试你的代码片段，当我在猜测颜色提示上按下OK后，背景就改变了。

那你到底想要什么?你能给我们举个例子吗?

相关文章：