Question

任何人都可以检查代码并让我知道为什么最后一行代码不能正常工作吗？

我正在尝试对userChoice与computerChoice的结果进行比较，但是我的上一个“输出”没有返回任何结果。我认为我应该定义变量“输出”？我正在尝试从userChoice与computerChoice中获取结果，并通过使用id = output更改为最终文本。

//user choice
var paper = document.querySelector("#paper header");
paper.addEventListener("click", function() {
paper.classList.toggle("header-special");
userChoice = 'paper';
output.innerHTML = 'You  Chose Paper'
compareWithComputer('paper');
});

var scissors = document.querySelector("#scissors header");
scissors.addEventListener("click", function() {
scissors.classList.toggle("header-special");
userChoice = 'scissors';
output.innerHTML = 'You  Chose Scissors'
compareWithComputer('scissors');
});

var stone = document.querySelector("#stone header");
stone.addEventListener("click", function() {
stone.classList.toggle("header-special");
userChoice = 'stone';
output.innerHTML = 'You  Chose Stone';
compareWithComputer('stone');
});

//计算机选择

function compareWithComputer(userChoice) {
var computerChoice = Math.floor((Math.random() * 3) + 1);
if (computerChoice == 1) {
computerChoice = "Stone";
} else if(computerChoice == 2) {
computerChoice = "Paper";
} else {
computerChoice = "Scissors";
}
output.innerHTML += '. Computer Chose ' + computerChoice;
}
// Compare userChoice and computerChoice
var compare = function(choice1,choice2) {
        if (choice1 === choice2) {
            return "It's a tie!";
        }
        if (choice1 === "stone") {
            if (choice2 === "scissors") {
                // rock wins
                return "You win!";
            } else {
                // paper wins
                return "You lose! Try again.";
            }
        }
        if (choice1 === "paper") {
            if (choice2 === "stone") {
                // paper wins
                return "You win!";
            } else {
                // scissors wins
                return "You lose! Try again.";
            }
        }
        if (choice1 === "scissors") {
            if (choice2 === "stone") {
                // rock wins
                return "You lose! Try again.";
            } else {
                // scissors wins
                return "You win!";
            }
        }
    };

   var results = compare(userChoice,computerChoice);
{
output.innerHTML = 'What is the result?' + results;
};

<!DOCTYPE html>
    <div class ="start"
    <h1>Click the button, start the game!</h1>
    </div>
    <div class="game" id="paper">
    <header>Paper</header>

    </div>
    <div class="game" id="scissors">
    <header>Scissors</header>

    </div>
    <div class="game" id="stone">
    <header>Stone</header>
    </div>
    <div id="output"></div>

Answer 1

这听起来像是一个家庭作业问题，所以我将不提供代码，但是会提供一些指针来帮助您。

我假设您希望计算机在单击选项后做出随机选择。您可以将//Computer choice节包装成一个函数，并在用户单击一个选项后调用它。您可能希望将用户的选择作为参数传递给它，然后可以将其与计算机的选择进行比较。

Answer 2

您需要在用户选择“纸张”，“石头”或“剪刀”之后添加要调用的功能。在此函数中放入“ computerChoice”逻辑，以计算计算机选择并将其与用户选择的内容进行比较。

我在下面添加了功能，但其余部分留给您添加逻辑以比较用户选择和计算机选择。

var paper = document.querySelector("#paper header");

paper.addEventListener("click", function(userMove) {
paper.classList.toggle("header-special");
userChoice = 'paper';
output.innerHTML = 'You  Chose Paper'
  compareWithComputer('paper');
});

var scissors = document.querySelector("#scissors header");
scissors.addEventListener("click", function(userMove) {
scissors.classList.toggle("header-special");
userChoice = 'scissors';
output.innerHTML = 'You  Chose Scissors'
  compareWithComputer('scissors');
});

var stone = document.querySelector("#stone header");
stone.addEventListener("click", function(userMove) {
stone.classList.toggle("header-special");

output.innerHTML = 'You  Chose Stone';
  compareWithComputer('stone');
});

// Computer choice
function compareWithComputer(userChoice) {
  var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "Stone";
} else if(computerChoice <= 0.67) {
computerChoice = "Paper";
} else {
 computerChoice = "Scissors";
}
  output.innerHTML += '. Computer Chose ' + computerChoice;

  // Enter conditional logic here to compare userChoice and Computer Choice

}

Answer 3

要比较两个选择，您需要一个function来为您进行比较并给出结果。但是在编写该代码之前，必须为每个可能的选择组合分配一个可比较的值。在您的情况下，您需要的称为哈希映射/键值对。

例如：

const CHOICES = {
  paper: { stone: 1, scissors: -1, paper: 0 }, // paper beats stone, but looses against scissors
  scissors: { paper: 1, stone: -1, scissors: 0 }, // scissors beat paper but loose against stone
  stone: { scissors: 1, paper: -1, stone: 0 }
};

使用此方法，您可以编写一个自己的函数，该函数将两个选择都与该哈希图进行比较：

function compareChoices (user, computer) {
  const choiceValue = CHOICES[user][computer];
  return choiceValue > 0 ? 'user' :
         choiceValue < 0 ? 'computer' :
         /* otherwise */   'draw'; 
}

这使您可以确定获胜者。例如：

var winner1 = compareChoices('stone', 'scissors');
// winner1 === 'user'

var winner2 = compareChoices('paper', 'scissors');
// winner2 === 'computer'

var winner3 = compareChoices('paper', 'paper');
// winner3 ==== 'draw'

接下来，您需要另一个功能来重新生成计算机的选择。否则，您只能在没有代码重复的情况下玩一次游戏。您可以使用函数体内已经拥有的内容：

function getComputerChoice () {
  var computerChoice = Math.random();
  return computerChoice < 0.34 ? 'stone' :
         computerChoice < 0.671 ? 'paper' :
         /* otherwise */          'scissors';
}

从逻辑上讲，这与您在代码中所做的相同。不同之处在于，它可以使您重新生成任意次数，而无需重复代码。我使用三元运算符if来代替condition ? truthy : falsy语句，并且不是将选择项存储在变量中，而是将选择项作为返回字符串的返回来映射到{ {1}}映射。

每次需要为计算机“播放器”生成选择时都调用该函数。在事件处理函数中，您现在可以执行以下操作，例如：

CHOICES

进一步的改进

可以通过多种方式增强此代码。首先，您可以考虑一种减少重复性的方法。提示：使用我们用来从已有的“提取” var paper = document.querySelector("#paper header"); paper.addEventListener("click", function(userMove) { paper.classList.toggle("header-special"); output.innerHTML = 'You Chose Paper' var computer = getComputerChoice(); output.innerHTML += '<br>Computer has choosen ' + computer; var winner = compareChoices('paper', computer); if (winner === 'draw') { winner = 'nobody'; } output.innerHTML += '<br><strong>The winner is: ' + winner + '</strong>'; });函数的本质中使用的相同技术。有没有一种方法可以抽象出DOM查询和添加事件监听器？

最好更改UI ，而不是仅仅显示获胜者。我的意思是，在用户点击后隐藏用户的选择getComputerChoice元素，并显示结果以供用户进行下一轮比赛。

JavaScript纸剪刀石头-需要指南

3 个答案: