Question

在这种情况下，我想使用两个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) {

抱歉我的英文不好！

Answer 1

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

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

不幸的是，这不是网页或网络应用程序的工作方式。对于它的价值，这也不是基于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之外的所有游戏玩法都是由用户发起的。用户必须点击该游戏才能前进。
其中一些类似于您之前所做的 - 声明变量并设置它们。但游戏玩法逻辑被移入按钮处理程序。
我们必须处理用户在丢失后按下按钮的情况。（有比我向你展示的方式更好的方法。
我们不能假设有一个控制台，所以我们假装自己的。
我们充分利用功能 - 不仅用于回调，还用于执行日常任务。
通过查找感兴趣的元素并为其事件设置处理程序来注册回调。你可以注册很多events。
回调实际上可能是带参数的更复杂的函数，但这段代码没有必要。

Html按钮而不是提示

1 个答案: