почему моя игра rock, paper работает некорректно

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я изучаю интерфейс, и этот проект для игры rock paper убивает меня, я не получаю никаких ошибок, и логика кажется мне правильной, но я не получаю никакого результата. Я думаю, что мои кнопки неправильные, и, возможно, я, но, честно говоря, понятия не имею, я действительно ценю, если кто-нибудь может мне помочь, я застрял на этом в течение нескольких часов.

 <script>

const score=document.querySelector("score");
const buttons=document.querySelectorAll("buttons");
const computer=document.querySelector("computer");
const player=document.querySelector("player");
const rock=document.getElementById("rock");
const paper=document.getElementById("paper");
const scisscors=document.getElementById("scisscors");


function computerplayer(){
    let computer=Math.floor(Math.random() * 3);
    let random=['rock',"paper",'sisscors']
    if(computer>3){
        return 'rock'
    }
    if(computer<2){
        return 'paper'
    }

    else{
        return 'sisscors'
    }
}

function game(choice,computer){
    if(choice=='rock'amp;amp; computer=='sisscors'){      
        pscore  
        score();
        console.log( 'u win');
    }

    if(choice== 'rock'amp;amp; computer==="rock"){
        console.log("it be a tie")
    }
    if(choice=="rock"amp;amp; computer=="paper"){
        cscore  
        score();
        console.log("u lose");
    }

    if(choice== 'sisscors'amp;amp; computer=='rock'){
        console.log( "u lost")
        cscore  
        score();
    }
    if(choice=='sisscors'amp;amp; computer=='paper'){
        console.log('you win')
        pscore  
        score();
    }
    if(choice=='paper'amp;amp; computer=='rock'){
        console.log("you win")
        pscore  
        score();
    }
    if(choice=='paper'amp;amp; computer=='sisscors'){
        console.log("lost")
        cscore  
        score();
    }
}

function score(){
    if(pscore==3){
        console.log("end game win")
    }
    if(cscore==3){
        console.log("end game loser")
    }
}

buttons.addEventListener('click', function(){
    game('rock')
})
buttons.addEventListener('click', function(){
    game('paper')
})
buttons.addEventListener('click', function(){
    game('sisscors')
})
 
</script>
 

Спасибо

Комментарии:

1. Забавный факт: scissors пишется как «ножницы», а не «сисскоры» или «scissors»

2. для querySelector и querySelectorAll вы пропустили . или #?

Ответ №1:

Прежде всего, этот код не вернет 3 или большее число

 let computer = Math.floor(Math.random() * 3);
 

тогда computerplayer () вернет только ‘paper’ и ‘sisscors’, и вам следует изменить функцию computerplayer ().

Затем вы должны изменить список событий ваших кнопок на эти:

 rock.addEventListener('click', function () {
    game('rock', computerplayer())

})
paper.addEventListener('click', function () {
    game('paper', computerplayer())
})
rock.addEventListener('click', function () {
    game('sisscors', computerplayer())
})

 

Поскольку вам нужно изменить еще много вещей, то я упомянул здесь полный код:

 <script>
    window.addEventListener('load', () => {
        let pscore = 0;
        let cscore = 0;

        const result = document.querySelector(".result");
        const player = document.querySelector(".pscore");
        const computer = document.querySelector(".cscore");

        const rock = document.getElementById("rock");
        const paper = document.getElementById("paper");
        const scissors = document.getElementById("scissors");

        rock.addEventListener('click', function () {
            game('rock', computerplayer())
        })
        paper.addEventListener('click', function () {
            game('paper', computerplayer())
        })
        scissors.addEventListener('click', function () {
            game('scissors', computerplayer())
        })


        function computerplayer() {
            let random = Math.floor(Math.random() * 3);
            if (random == 0)
                return 'rock'
            else if (random == 1)
                return 'paper'
            else if (random == 2)
                return 'scissors'
        }

        function game(choice, computerAction) {
            if (choice == 'rock' amp;amp; computerAction == 'scissors') {
                pscore  
                score();
                console.log('u win');
            } else if (choice == 'rock' amp;amp; computerAction === "rock") {
                console.log("it be a tie")
            } else if (choice == "rock" amp;amp; computerAction == "paper") {
                cscore  
                score();
                console.log("u lose");
            } else if (choice == 'scissors' amp;amp; computerAction == 'rock') {
                console.log("u lost")
                cscore  
                score();
            } else if (choice == 'scissors' amp;amp; computerAction == 'paper') {
                console.log('you win')
                pscore  
                score();
            } else if (choice == 'scissors' amp;amp; computerAction === "scissors") {
                console.log("it be a tie")
            } else if (choice == 'paper' amp;amp; computerAction == 'rock') {
                console.log("you win")
                pscore  
                score();
            } else if (choice == 'paper' amp;amp; computerAction == 'scissors') {
                console.log("lost")
                cscore  
                score();
            } else if (choice == 'paper' amp;amp; computerAction === "paper") {
                console.log("it be a tie")
            }

            function score() {
                console.log(pscore, cscore)
                player.innerHTML = pscore;
                computer.innerHTML = cscore;

                if (pscore == 3) {
                    console.log("end game win")
                    result.innerHTML = 'You won.';
                } else if (cscore == 3) {
                    console.log("end game loser")
                    result.innerHTML = 'Computer won.';
                }

                if (pscore == 3 || cscore == 3) {
                    rock.style.display = 'none';
                    paper.style.display = 'none';
                    scissors.style.display = 'none';
                }
            }
        }
    });
</script>
 
 <body>
    Computer:<span class="cscore"></span>
    <br />
    Player: <span class="pscore"></span><br />
    <br />
    <input type="button" id="rock" value="Rock" />
    <input type="button" id="paper" value="Paper" />
    <input type="button" id="scissors" value="scissors" />
    <span class="result"></span>
</body>