JavaScript Rock，Paper，Scissors 游戏逻辑

Question

我在思考和实现 JavaScript Rock, Paper, Scissors 游戏时遇到了一些困难。我的问题是，当我想使用事件侦听器从 UI 中检索数据时，我无法停止游戏，直到我检索到该数据之后才能继续执行 if-else 语句。

当然欢迎任何形式的批评或反馈。

这是我的代码：

 //1. GETTING DATA FROM THE UI AND THE COMPUTER
let model = (function() {
    
    // dom strings:
    const domStrings = {
        userInput: "#textInput",
        submit: "#submit"
    }
        return {

            // A. Get user input
            getUserInput: function(){

                return document.querySelector(domStrings.userInput).value;
               
            },

            // B. Get computer input
            compInput: function() {
                let optionsArray = ["rock", "paper", "scissors"];
                let randNum = Math.floor(Math.random()* 3);
                console.log(randNum)
                return optionsArray[randNum];
            },

            // C. Make DOM elements public
            getDomStrings: function(){
                return domStrings;
            }
        }
})();

// 2. USER INTERFACE CONTROLLER
let UI = (function(){
    
    return {
        insertHTML: function(outcome, playerScore, computerScore){
            return `
                <div class="text">
                    <p>${outcome}!</p>
                    <p>***********</p>
                    <p>Total scores: Player ${playerScore} - ${computerScore} Computer</p>
                </div>
            `
        }
    }
})()

// 3. APP CONTROLLER
let controller = (function(mdl, ui){
    // (imported domStrings from model):
    let DOM = mdl.getDomStrings();
    let userInput = "scissors";
    

    // a. Get user Input

        document.querySelector(DOM.submit).addEventListener("click", (e) => {
            e.preventDefault();
            userInput = mdl.getUserInput();

        });
    
       
    // b. get computer Input
        let compInput = mdl.compInput();
        
    // c. check whether the player wins, the computer wins or if its a draw
   
            if(userInput === compInput){
                console.log("Draw!")
            } else if(userInput === "rock" && compInput === "paper"){
                console.log("Computer Wins!");
            } else if(userInput === "rock" && compInput === "scissors"){
                console.log("player wins");
            } else if(userInput === "paper" && compInput === "scissors"){
                console.log("computer wins")
            } else if (userInput === "paper" && compInput === "rock"){
                console.log("user wins");
            } else if (userInput === "scissors" && compInput === "rock"){
                console.log("player wins");
            } else if (userInput === "rock" && compInput === "paper"){
                console.log("computer wins");
            } else if (userInput === "scissors" && compInput === "paper"){
                console.log("computer wins");
            }
        
        // i. update score

        // ii. display current score
})(model, UI)

Answer 1

您需要将if 语句放在事件侦听器中。例如：

let controller = (function(mdl, ui){
    // (imported domStrings from model):
    let DOM = mdl.getDomStrings();
    let userInput = "scissors";


    // a. Get user Input

        document.querySelector(DOM.submit).addEventListener("click", (e) => {
            e.preventDefault();
            userInput = mdl.getUserInput();
            getResult();
        });


    // b. get computer Input
        let compInput = mdl.compInput();

    // c. check whether the player wins, the computer wins or if its a draw
        function getResult() {
            if(userInput === compInput){
                console.log("Draw!")
            } else if(userInput === "rock" && compInput === "paper"){
                console.log("Computer Wins!");
            } else if(userInput === "rock" && compInput === "scissors"){
                console.log("player wins");
            } else if(userInput === "paper" && compInput === "scissors"){
                console.log("computer wins")
            } else if (userInput === "paper" && compInput === "rock"){
                console.log("user wins");
            } else if (userInput === "scissors" && compInput === "rock"){
                console.log("player wins");
            } else if (userInput === "rock" && compInput === "paper"){
                console.log("computer wins");
            } else if (userInput === "scissors" && compInput === "paper"){
                console.log("computer wins");
            }
        }
        // i. update score

        // ii. display current score
})(model, UI)