骰子游戏条件

Question

我的功能match（）无法正常工作...我想我可以存储playerGameOne和playerGameTwo的返回值，以便可以比较playerOne和playerTwo的值，然后进行比较。这似乎不是逻辑，因为我的函数只会生成随机显示消息，而不遵循我在match函数中设置的条件。但是控制台日志显示的值与我滚动显示的值不同。请帮助：

        const max = 8
        const para = document.querySelector('p')
        const buttonOne = document.querySelector('button.first')
        const buttonTwo = document.querySelector('button.second')
        const buttons = document.querySelectorAll('button')
        
        let playerOne
        let playerTwo
        let playerPoints = 0
        let x
        let y
        function playerGameOne(){
           let random = Math.floor(Math.random()*(max));
            playerOne = (random + 1)
            return playerOne
        }
        
        function playerGameTwo(){
           let random = Math.floor(Math.random()*(max));
            playerTwo = (random + 1)
            return playerTwo
        }
        
        function displayMessageOne(){
            const para = document.createElement('p')
            para.innerText = `Your rolled a ${playerOne} on the dice.`
            document.body.append(para)
        }
        function displayMessageTwo(){
            const para = document.createElement('p')
            para.innerText = `Your rolled a ${playerTwo} on the dice.`
            document.body.append(para)
        }
        function displaySuccessMatchMessage(){
            // if(playerPoints === 5){
            //     para.innerText = "Congratulations! You got 5 points. Play again."
            //     return document.body.append(para)
            // }
            const para = document.createElement('p');
            para.innerText = `You gained a point! You have ${playerPoints}.`
            document.body.append(para)
        }
        function displayFailedMatchMessage(){
            const para = document.createElement('p');
            para.innerText = "Try again."
            document.body.append(para)
        }
       
        function diceOne(){
            playerGameOne();
            displayMessageOne()
        }
        function diceTwo(){
            playerGameTwo();
            displayMessageTwo();
        };
        
       function match(){
            
            playerGameOne();
            playerGameTwo();
            x = playerGameOne(); 
            y = playerGameTwo();
            console.log(x+y) //getting different log values 
            if((x+y) > 8){
                playerPoints+=1;
                displaySuccessMatchMessage();
            }else{
                playerPoints+=0;
                displayFailedMatchMessage()
            } 
            if(playerPoints === 5){
                displaySuccessMatchMessage()
            }
            
        }
    

        buttonOne.addEventListener('click', diceOne)
        buttonTwo.addEventListener('click', diceTwo)
        buttonTwo.addEventListener('click', match)

            h1, div, p{
                text-align: center;
            }
            img{
                width: 200px;
            }

        <h1>
            Click on me: Goal is to get to 5 points.
        </h1>
        <div>
        <button class="first">
            <img class = "firstImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg"> 
        </button>
        <button class="second">
           <img class = "secondImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg"> 
        </button>
        </div>

Answer 1

尝试在您的diceOne和diceTwo函数中设置x和y。

const max = 8
        const para = document.querySelector('p')
        const buttonOne = document.querySelector('button.first')
        const buttonTwo = document.querySelector('button.second')
        const buttons = document.querySelectorAll('button')
        
        let playerOne
        let playerTwo
        let playerPoints = 0
        let x = 0
        let y = 0
        function playerGameOne(){
           let random = Math.floor(Math.random()*(max));
            playerOne = (random + 1)
            return playerOne
        }
        
        function playerGameTwo(){
           let random = Math.floor(Math.random()*(max));
            playerTwo = (random + 1)
            return playerTwo
        }
        
        function displayMessageOne(){
            const para = document.createElement('p')
            para.innerText = `Your rolled a ${playerOne} on the dice.`
            document.body.append(para)
        }
        function displayMessageTwo(){
            const para = document.createElement('p')
            para.innerText = `Your rolled a ${playerTwo} on the dice.`
            document.body.append(para)
        }
        function displaySuccessMatchMessage(){
            // if(playerPoints === 5){
            //     para.innerText = "Congratulations! You got 5 points. Play again."
            //     return document.body.append(para)
            // }
            const para = document.createElement('p');
            para.innerText = `You gained a point! You have ${playerPoints}.`
            document.body.append(para)
        }
        function displayFailedMatchMessage(){
            const para = document.createElement('p');
            para.innerText = "Try again."
            document.body.append(para)
        }
       
        function diceOne(){
            x = playerGameOne(); //update x
            displayMessageOne()
        }
        function diceTwo(){
            y = playerGameTwo(); //update y
            displayMessageTwo();
        };
        
       function match(){
            
            //use functions diceOne and diceTwo to set x and y
            //playerGameOne();
            //playerGameTwo();
            //x = playerGameOne();
            //y = playerGameTwo();
            console.log(x+y) //getting different log values 
            if((x+y) > 8){
                playerPoints+=1;
                displaySuccessMatchMessage();
            }else{
                playerPoints+=0;
                displayFailedMatchMessage()
            } 
            if(playerPoints === 5){
                displaySuccessMatchMessage()
            }
            
        }
    
        //diceOne and diceTwo now set x and y
        buttonOne.addEventListener('click', diceOne) 
        buttonTwo.addEventListener('click', diceTwo)
        buttonTwo.addEventListener('click', match)

h1, div, p{
                text-align: center;
            }
            img{
                width: 200px;
            }

<h1>
            Click on me: Goal is to get to 5 points.
        </h1>
        <div>
        <button class="first">
            <img class = "firstImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg"> 
        </button>
        <button class="second">
           <img class = "secondImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg"> 
        </button>
        </div>