在 JavaScript 中提交后如何重置游戏？答案

【问题标题】：How can I reset game after a submission in JavaScript?在 JavaScript 中提交后如何重置游戏？
【发布时间】：2023-02-05 17:09:03
【问题描述】：

我正在尝试在用户提交后重置游戏。我所说的重新启动是指给出一个新的方程式，计算先前的点数，并清除用户提交的内容。

我认为它必须围绕这样一个事实，即游戏仅在单击和输入后启动一次。我想在提交后重新启动游戏，无论它是正确的还是错误的

const equationTag = document.querySelector('div#equation');
const inputBtn = document.querySelector('input.submit-btn');
const incorrectTag = document.querySelector('p#incorrect');
const correctTag = document.querySelector('p#correct');
const counterTag = document.querySelector('div#counter');
let points = 0;

/*
    Takes a min and max value as parameters, and
    returns a randomized integer
*/
function getRandomValue(min, max) {
    let r = Math.floor(Math.random() * (max - min + 1)) + min;
    return r;
}

// Displays multiplcation equation on the user interface
function displayEquation() {
    equationTag.textContent = `${integerOne} x ${integerTwo}=`;
}

// Returns the product of the two integers
function getProduct() {
    return integerOne * integerTwo;
}

let integerOne = getRandomValue(0, 12);
let integerTwo = getRandomValue(0, 12);

/* Event listener grabs user input on click */
inputBtn.addEventListener('click', () => {
    let inputTag = parseFloat(document.querySelector('#num').value);
    evaluateAnswer(inputTag);
})

/* Event listener grabs user input on enter key */
document.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
        let inputTag = parseFloat(document.querySelector('#num').value);
        evaluateAnswer(inputTag);
    }
})

/*
    Takes a integer user input as an argument
    and evalutes if the user is correct so
    the points will be updated
*/
function evaluateAnswer(input) {
    if (input !== getProduct()) {
        subtractPoint();
    } else {
        addPoint();
    }
}

function subtractPoint() {
    if (points <= 0) {
        points = 0;
    } else {
        points -= 1;
    }
    incorrectTag.textContent = ('Incorrect: ' + integerOne + ' x ' + integerTwo + ' = ' + getProduct());
    setPoint();
    console.log('Incorrect new question');
}

// Sets new updated point
function setPoint() {
    counterTag.textContent = points;
}

function addPoint() {
    points += 1;
    correctTag.textContent = ('Correct!');
    setPoint();
}

function resartGame() {
    console.log('reset game');
}

displayEquation();

#counter::before {
    content: 'points';
    position: relative;
    top: -1px;
    color: rgba(0, 0, 0, .2);
    margin: 0 7px 0 -3px;
    font-size: 21px;
}

<!doctype html>
<html>

<head>
    <title>MultiplyMe</title>
    <meta charset="utf-8">
    <!-- <link rel="stylesheet" type="text/css" href="style3.css" media="screen" /> -->
</head>

<body>

    <header>
        <h1 id="title">Multiply Me</h1>
    </header>

    <main>
        <div id="equation"></div>
        <div id="counter">0</div>
        <input type="number" id="num" value="" title="input">

        <input type="submit" class="submit-btn">

        <div id="response">
            <p id="correct"></p>
            <p id="incorrect"></p>
        </div>


    </main>

</body>

<script src="script3.js"></script>

</html>

回答。

现在它只是告诉我我的错误或正确，但游戏不会重新启动。我不确定如何重新启动它，我认为这与我设计它的方式有关。

【问题讨论】：

标签： javascript event-handling logic

【解决方案1】：

你快到了！尝试通过以下步骤接近它：

在 restartGame() 中重置您的 integerOne 和 integerTwo
并在 evaluateAnswer() 中调用 restartGame()

您可以在您的事件处理程序中重置用户输入（见下文），或者创建一个单独的函数来处理它。

const equationTag = document.querySelector('div#equation');
const inputBtn = document.querySelector('input.submit-btn');
const incorrectTag = document.querySelector('p#incorrect');
const correctTag = document.querySelector('p#correct');
const counterTag = document.querySelector('div#counter');
let points = 0;

/*
    Takes a min and max value as parameters, and
    returns a randomized integer
*/
function getRandomValue(min, max) {
    let r = Math.floor(Math.random() * (max - min + 1)) + min;
    return r;
}

// Displays multiplcation equation on the user interface
function displayEquation() {
    equationTag.textContent = `${integerOne} x ${integerTwo}=`;
}

// Returns the product of the two integers
function getProduct() {
    return integerOne * integerTwo;
}

let integerOne = getRandomValue(0, 12);
let integerTwo = getRandomValue(0, 12);

/* Event listener grabs user input on click */
inputBtn.addEventListener('click', (e) => {
    const inputTag = document.querySelector('#num');
    const answer = parseFloat(inputTag.value);
    evaluateAnswer(answer);
    // Set to empty string
    inputTag.value = "";
    inputTag.focus();
})

/* Event listener grabs user input on enter key */
document.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
        const inputTag = document.querySelector('#num');
        const answer = parseFloat(inputTag.value);
        evaluateAnswer(answer);
        // Set to empty string
        inputTag.value = "";
        inputTag.focus();
    }
})

/*
    Takes a integer user input as an argument
    and evalutes if the user is correct so
    the points will be updated
*/
function evaluateAnswer(input) {
    if (input !== getProduct()) {
        subtractPoint();
    } else {
        addPoint();
    }
    restartGame();
}

function subtractPoint() {
    if (points <= 0) {
        points = 0;
    } else {
        points -= 1;
    }
    incorrectTag.textContent = ('Incorrect: ' + integerOne + ' x ' + integerTwo + ' = ' + getProduct());
    setPoint();
    console.log('Incorrect new question');
}

// Sets new updated point
function setPoint() {
    counterTag.textContent = points;
}

function addPoint() {
    points += 1;
    correctTag.textContent = ('Correct!');
    setPoint();
}

function restartGame() {
    console.log('reset game');
    integerOne = getRandomValue(0, 12);
    integerTwo = getRandomValue(0, 12);
    displayEquation();
}

displayEquation();

#counter::before {
    content: 'points';
    position: relative;
    top: -1px;
    color: rgba(0, 0, 0, .2);
    margin: 0 7px 0 -3px;
    font-size: 21px;
}

<!doctype html>
<html>

<head>
    <title>MultiplyMe</title>
    <meta charset="utf-8">
    <!-- <link rel="stylesheet" type="text/css" href="style3.css" media="screen" /> -->
</head>

<body>

    <header>
        <h1 id="title">Multiply Me</h1>
    </header>

    <main>
        <div id="equation"></div>
        <div id="counter">0</div>
        <input type="number" id="num" value="" title="input">

        <input type="submit" class="submit-btn">
        
        <div id="response">
            <p id="correct"></p>
            <p id="incorrect"></p>
        </div>


    </main>

</body>

<script src="script3.js"></script>

</html>

【讨论】：