0

在这种情况下，我想使用两个 div 按钮而不是 om prompt() 。那可能吗？我已经尝试过使用函数，但我没有从函数中获得值。这是我的一些代码。

var gaming = true

var number = Math.floor(Math.random() * 52) + 1;
var nextnumber = Math.floor(Math.random() * 52) + 1;
var rounds = 1
console.log(number)
console.log(nextnumber)


while(gaming) {
var guess = prompt(More or less?");

if (guess === "more") {
    if (number <= nextnumber) {

对不起，我的英语不好！

4

1 回答 1

1

这是一个非常广泛的话题，我真的不应该接近它。但无论如何我都会。

您以前版本的程序基本上是一个控制台应用程序。这一切都是同步的，在继续之前等待用户输入。

不幸的是，这不是网页或 Web 应用程序的工作方式。就其价值而言，这也不是基于 Windows UI 的应用程序的工作方式。添加 UI 后，您就进入了事件驱动的逻辑流。任何事件都可能在任何时候发生，你必须能够处理它。

除此之外，以及你的大量研究和实验，我能帮助你的唯一方法就是用勺子喂你一点。这是一个可以帮助您入门的示例。它并不漂亮，并且有一些错误，但它会让您了解如何进行异步编程。

HTML

<textarea id="console" style="height: 400px; width: 600px}"></textarea>
<div id="more">More</div>
<div id="less">Less</div>

JavaScript

var failed = false;
var number;
var nextNumber = Math.floor(Math.random() * 52) + 1;
var rounds = 1;

function newRound() {
    number = nextNumber;
    nextNumber = Math.floor(Math.random() * 52) + 1;
    document.getElementById("console").innerHTML += "\nYou are in round " + rounds + ". The current number is: " + number + ". Guess More or Less.";
}

function checkFailed() {
    if (failed) {
        var ans = prompt("You lost.  Try again?");
        if (ans == "Yes") {
            rounds = 1;
            document.getElementById("console").innerHTML = "";
           failed = false;
            newRound();
        }
    } 
}

document.getElementById("more").onclick = function() {
    checkFailed();
    if (nextNumber >= number) {
        document.getElementById("console").innerHTML += "\nGood guess!  The next number was " + nextNumber;
        ++rounds;
        newRound();
    } else {
        document.getElementById("console").innerHTML += "\nSorry, you failed.  The next number was " + nextNumber;
        failed = true;
    }
};

document.getElementById("less").onclick = function() {
    checkFailed();
    if (nextNumber <= number) {
        document.getElementById("console").innerHTML += "\nGood guess!  The next number was " + nextNumber;
        ++rounds;
        newRound();
    } else {
        document.getElementById("console").innerHTML += "\nSorry, you failed.  The next number was " + nextNumber;
        failed = true;
    }
};

newRound();

你可以玩它HERE

需要注意的几点：

  • 除了第一个游戏之外，所有游戏玩法newRound都是由用户发起的。用户必须点击游戏才能进行。
  • 其中一些类似于您之前所做的 - 声明变量并设置它们。但是游戏逻辑被移到按钮处理程序中。
  • 我们必须处理用户在丢失后点击按钮的情况。（有比我向您展示的方式更好的方法。
  • 我们不能假设有一个控制台，所以我们伪造了我们自己的。
  • 我们充分利用函数——不仅用于回调，还用于执行日常任务。
  • 通过查找感兴趣的元素并为其事件设置处理程序来注册回调。您可以注册很多活动。
  • 回调实际上可以是更复杂的带参数的函数，但对于这段代码来说不是必需的。
于 2013-10-31T21:56:37.833 回答