Question

我正在尝试使用click事件作为输入，使用Javascript构建RPS游戏。我可以使用该程序查看Watson的输入并记下输掉的游戏数，但是我无法使用该程序来识别我的输入。我错过了哪些步骤？请查看以下链接以获取包括HTML在内的所有代码。 https://codepen.io/szewah/pen/daMKbK

var rockPaperScissors = ['Rock', 'Paper', 'Scissors'];
//gueses
var computerGuess = rockPaperScissors[Math.floor(Math.random()*rockPaperScissors.length)];
var myGuess = function (input) {
if (input === 'Rock' || input === 'Paper' || input === "Scissors") {
    return input;
    } else {
    console.log('That\'s not a valid choice. Try again.');
    };
};

// results
var wins =0;
var losses = 0;
var ties = 0;

//returns information to the DOM
var userChoiceText = document.getElementById('userchoice-text');
var computerChoiceText = document.getElementById('userchoice-text');
var winsText = document.getElementById('wins-text');
var lossesText = document.getElementById('losses-text');
var tiesText = document.getElementById('ties-text');

//adds event listener
document.getElementById('rock-btn').addEventListener('click', runGame);
document.getElementById('paper-btn').addEventListener('click', runGame);
document.getElementById('scissors-btn').addEventListener('click', runGame);

//function to run after event listener is triggered
function runGame () {
    if ((myGuess === 'Rock' && computerGuess === 'Scissors') ||
    (myGuess === 'Scissors' && computerGuess === 'Paper') ||
    (myGuess === 'Paper' && computerGuess === 'Rock')) {
        wins++;
        console.log('I win!')
    } else if (myGuess === computerGuess) {
        ties++;
        console.log('It\'s a tie!')
    } else {
        losses++;
        console.log('Watson won!')
    }
    userChoiceText.textContent = 'You chose ' + myGuess + '.';
    computerChoiceText.textContent = 'Watson chose ' + computerGuess + '.';
    winsText.textContent = 'Wins: ' + wins + '.';
    tiesText.textContent = 'Ties: ' + ties + '.';
    lossesText.textContent = 'Losses: ' + losses + '.';
};

Answer 1

// array for choices of rock, paper, scissors
var rockPaperScissors = ['Rock', 'Paper', 'Scissors'];

function myGuessFn(input) {
  if (input === 'Rock' || input === 'Paper' || input === 'Scissors') {
    return input;
  } else {
    console.log('That\'s not a valid choice. Try again.');
  };
};

// results
var wins = 0;
var losses = 0;
var ties = 0;

//returns information to the DOM
var userChoiceText = document.getElementById('userchoice-text');
var computerChoiceText = document.getElementById('computerchoice-text');
var winsText = document.getElementById('wins-text');
var lossesText = document.getElementById('losses-text');
var tiesText = document.getElementById('ties-text');

//adds event listener
document.getElementById('rock-btn').addEventListener('click', runGame);
document.getElementById('paper-btn').addEventListener('click', runGame);
document.getElementById('scissors-btn').addEventListener('click', runGame);

//function to run after event listener is triggered
function runGame(event) {
  var myGuess = myGuessFn(event.target.innerHTML);
  var computerGuess = rockPaperScissors[Math.floor(Math.random() * rockPaperScissors.length)];

  if ((myGuess === 'Rock' && computerGuess === 'Scissors') ||
    (myGuess === 'Scissors' && computerGuess === 'Paper') ||
    (myGuess === 'Paper' && computerGuess === 'Rock')) {
    wins++;
    console.log('I win!')
  } else if (myGuess === computerGuess) {
    ties++;
    console.log('It\'s a tie!')
  } else {
    losses++;
    console.log('Watson won!')
  }
  userChoiceText.textContent = 'You chose ' + myGuess + '.';
  computerChoiceText.textContent = 'Watson chose ' + computerGuess + '.';
  winsText.textContent = 'Wins: ' + wins + '.';
  tiesText.textContent = 'Ties: ' + ties + '.';
  lossesText.textContent = 'Losses: ' + losses + '.';
};

#rock-btn,
#paper-btn,
#scissors-btn {
  cursor: pointer;
}

<div class="container">
  <h1>Press Rock Paper Scissors to play</h1>
  <div class="choices">
    <div id="rock-btn">Rock</div>
    <div id="paper-btn">Paper</div>
    <div id="scissors-btn">Scissors</div>
  </div>
  <hr>
  <div class="resultChoice">
    <p id="userchoice-text"></p>
    <br>
    <p id="computerchoice-text"></p>
  </div>
  <hr>
  <div class="results">
    <p id="wins-text"></p>
    <p id="losses-text"></p>
    <p id="ties-text"></p>
  </div>
</div>

剪刀石头布Javascript

1 个答案: