JavaScript石头、布、剪刀游戏逻辑

谢谢你的阅读

我在思考和实现JavaScript的石头、布、剪刀游戏时遇到了一些困难。我的问题是，当我想使用事件侦听器从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)

//1。从用户界面和计算机获取数据
让模型=（函数（）{
//dom字符串：
常量domStrings={
用户输入：“#文本输入”，
提交：“提交”
}
返回{
//A.获取用户输入
getUserInput:function（）{
return document.querySelector（domStrings.userInput）.value；
},
//获取计算机输入
compInput:function（）{
让选项数组=[“石头”、“布”、“剪刀”]；
设randNum=Math.floor（Math.random（）*3）；
console.log（randNum）
返回选项数组[randNum]；
},
//C.公开DOM元素
getDomStrings:function（）{
返回字符串；
}
}
})();
// 2. 用户界面控制器
让UI=（函数（）{
返回{
insertHTML：功能（结果、玩家核心、计算机分数）{
返回`
${结果}

***********

总分：玩家${playerScore}-${computerScore}计算机

`
}
}
})()
// 3. 应用程序控制器
让控制器=（函数（mdl，ui）{
//（从模型导入的domStrings）：
让DOM=mdl.getDomStrings（）；
让用户输入=“剪刀”；
//a.获取用户输入
document.querySelector（DOM.submit）.addEventListener（“单击”，（e）=>{
e、 预防默认值（）；
userInput=mdl.getUserInput（）；
});
//获取计算机输入
让compInput=mdl.compInput（）；
//c.检查玩家是否赢，电脑是否赢，或者是平局
if（userInput==compInput）{
log（“Draw！”）
}否则如果（userInput==“rock”和&compInput==“paper”）{
log（“计算机赢了！”）；
}else if（userInput==“rock”&compInput==“剪刀”）{
console.log（“玩家赢”）；
}else if（userInput==“纸”和compInput==“剪刀”）{
console.log（“计算机获胜”）
}否则如果（userInput==“纸张”&&compInput==“岩石”）{
console.log（“用户赢”）；
}否则如果（userInput==“剪刀”和&compInput==“石头”）{
console.log（“玩家赢”）；
}否则如果（userInput==“rock”和&compInput==“paper”）{
console.log（“计算机赢”）；
}else if（userInput==“剪刀”和compInput==“纸”）{
console.log（“计算机赢”）；
}
//i.更新分数
//二、显示当前分数
})（模型、用户界面）

您需要将

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)