Question

我目前正在制作一款基于文字的游戏。我想要做的是做一个文本输入，可以用来回答提示（像Zork）。我不希望提示对话框出现，因为1）它们可能会让用户烦恼，2）当它们出现时，它们会冻结网页直到它们被回答。我个人没有听说过如何让这项工作成功，所以如果有人可以帮助我，那就太棒了。

以下是游戏的一小部分，其中包括3个提示：

<!DOCTYPE html>
<head>
<style>
#game {
    width:1100
}
body {background-color:black}
p {color:white}
</style>
</head>
<body>
<div id="game">
<script type="text/javascript">
    window.onload = function() {
        var seed = prompt("What kind of potato do you want to be? A RUSSET POTATO, RED POTATO, or SWEET POTATO?")
        switch(seed) {
            case 'RUSSET POTATO' :
                var para = document.createElement("p");
                var node = document.createTextNode("Hot diggity! You became a Russet Potato!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'RED POTATO' :
                var para = document.createElement("p");
                var node = document.createTextNode("Greetings comrade! Welcome to the potatoes of Soviet Socialist Republics!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'SWEET POTATO' :
                var para = document.createElement("p");
                var node = document.createTextNode("Hey there sweet thing! You're such a Sweet Potato!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            default:
                var para = document.createElement("p");
                var node = document.createTextNode("Make sure you are spelling your answers correctly and typing them in all caps!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
                //Revert to prompt
        }

        var soil = prompt("What type of soil will you be planted in? PODZOL, STUTTGART, RED, AKADAMA, or CLAY?");
        switch(soil) {
            case 'PODZOL' :
                var para = document.createElement("p");
                var node = document.createTextNode("There are many minerals, but the acid is ruining the shell of your seed! You die an agonizing and slow death.");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
                //link to lose page
            break;
            case 'STUTTGART' :
                var para = document.createElement("p");
                var node = document.createTextNode("Your seed is nice and cozy in its new home. Happy growing!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'RED' :
                var para = document.createElement("p");
                var node = document.createTextNode("Good choice comrade, but communism isn't always the best choice. Getting water will be a bit difficult.");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'AKADAMA' :
                var para = document.createElement("p");
                var node = document.createTextNode("It will be a bit difficult to grown roots, but you are a tough little seed! Hope you can grow well!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'CLAY' :
                var para = document.createElement("p");
                var node = document.createTextNode("A hard rain comes in and your potato drowns.");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
                //link to lose page
            break;
            default:
                var para = document.createElement("p");
                var node = document.createTextNode("Make sure you are spelling your answers correctly and typing them in all caps!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
                //Revert to prompt
        }

        var power = prompt("What do you wish to do now? SPROUT TUBERS, add DISEASE CONTROL, or THICKEN SKIN?");
        switch(power) {
            case 'SPROUT TUBERS' :
                var para = document.createElement("p");
                var node = document.createTextNode("You will surely grow happily with this decison!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'DISEASE CONTROL' :
                var para = document.createElement("p");
                var node = document.createTextNode("Your growth won't be as plentiful, but you won't face as much risk from disease now!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            case 'THICKEN SKIN' :
                var para = document.createElement("p");
                var node = document.createTextNode("You are a very self-concious potato. You desire a thick skin to avoid being bullied by your fellow potatoes. Don't worry, you will be their supreme leader eventually! I assure you!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
            break;
            default:
                var para = document.createElement("p");
                var node = document.createTextNode("Make sure you are spelling your answers correctly and typing them in all caps!");
                para.appendChild(node);

                var element = document.getElementById("game");
                element.appendChild(para);
        }

    }
</script>
</div>
</body>
</html>

提前谢谢大家！这是我第一次尝试编码，即使看起来相当简单，也是非常简单的经验。

Answer 1

输入元素在这里可以正常工作。

<input id="theInputBox" type="text>

这将在屏幕上放置一个用户可以输入的输入框。

要检查输入框中的文字，请执行document.getElementById('theInputBox').value

祝贺您第一次尝试编码！我认为制作游戏是学习编码的好方法。

需要使用文本输入来回答提示而不是对话框

1 个答案: