Javascript游戏，连接按钮作为输入答案

【问题标题】：Javascript game, connecting button as inputJavascript游戏，连接按钮作为输入
【发布时间】：2021-01-11 20:38:01
【问题描述】：

我正在创建带有 html/css 用户界面的石头剪刀布。我有 3 个 html 按钮可供选择：

    <div class="options">
        <button class="button rock"><i class="fas fa-hand-rock fa-10x"></i>Rock</button>
        <button class="button paper"><i class="fas fa-toilet-paper fa-10x"></i>Paper</button>
        <button class="button scissor"><i class="fas fa-cut fa-10x"></i>Scissor</button>
    </div>

我的问题是在按钮上连接一个单击事件以作为 playRound 函数中的播放器选择变量输入。有人可以提供有关如何实现此目的的见解。我试图使用事件侦听器在 userPlay 函数中连接它们。提前致谢。

Javascript：

// returns a random computer choice
function computerPlay() {
    options = ['Rock', 'Paper', 'Scissor'];
    return options[Math.floor(Math.random() * options.length)]
}


// should return a user choice
function userPlay() {
    let rock = document.querySelector('.button.rock');
    rock.addEventListener('click', setChoice);

    let paper = document.querySelector('.button.paper');
    paper.addEventListener('click', setChoice)

    let scissor = document.querySelector('.button.scissor');
    scissor.addEventListener('click', setChoice)

    var userChoice;
    function setChoice() {
        userChoice=
    }
    return userChoice
}




function playRound() {


    // defining the starting score
    let playerScore = 0;
    let computerScore = 0;



    // play 5 times per round
    for (let i = 0; i <= 4; i++) {

        computerSelection = computerPlay();
        playerSelection = userPlay()


        // game conditionals
        if (
            (playerSelection === 'Rock' && computerSelection === 'Paper') ||
            (playerSelection === 'Paper' && computerSelection === 'Scissor') ||
            (playerSelection === 'Scissor' && computerSelection === 'Rock')
        ) {
            computerScore++;
            console.log(`Computer: ${computerSelection}  You: ${playerSelection}   You Lost`)
            console.log(`computer: ${computerScore}   You: ${playerScore}`)
        }

        if (
            (playerSelection === 'Paper' && computerSelection === 'Rock') ||
            (playerSelection === 'Scissor' && computerSelection === 'Paper') ||
            (playerSelection === 'Rock' && computerSelection === 'Scissor')
        ) {
            playerScore++;
            console.log(`Computer: ${computerSelection}  You: ${playerSelection}    You Won`)
            console.log(`computer: ${computerScore}   You: ${playerScore}`)
        }


        if (playerSelection === computerSelection) {
            console.log(`Computer: ${computerSelection}  You: ${playerSelection}  Its a tie`);
            console.log(`computer: ${computerScore}   You: ${playerScore}`);
            continue
        }


    }


    // ending score
    if (computerScore > playerScore) {
        console.log('Sorry, you lost')
    }
    if (playerScore > computerScore) {
        console.log('Congrats, you won')
    }
    else {
        'It was a tie game'
    }

}

【问题讨论】：

标签： javascript html

【解决方案1】：

您不希望函数内部发生事件。

考虑像这样在按钮和事件委托上使用数据属性

<button data-shake='rock'>

document.addEventListener('click', function(event) {
    
    if ( event.target.matches('button') ) {
       runFunction(event.target.dataset.shake); // would get 'rock' etc...
    }

});

【讨论】：

【解决方案2】：

您可以使用箭头函数，以便将参数传递给函数。

let rock = document.querySelector('.button.rock');
rock.addEventListener('click', () => {setChoice("scissor")});

let paper = document.querySelector('.button.paper');
paper.addEventListener('click', () => {setChoice("scissor")})

let scissor = document.querySelector('.button.scissor');
scissor.addEventListener('click', () => {setChoice("scissor")})

var userChoice;
function setChoice(userChoice) {
    // ....
}

【讨论】：