JavaScript 纸剪刀石 - 需要指南 - JavaScript Paper Scissors Stone

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

我正在尝试比较用户选择与计算机选择的结果，但我的最后一个"输出"没有返回任何结果。我想我应该定义变量"输出"？我正在尝试从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>

您需要添加一个函数，以便在用户选择"纸"、"石头"或"剪刀"后调用。将"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
}

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

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

要比较这两个选择，您需要一个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，而不是将选择存储在变量中，而是将选择作为映射到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>';
});

进一步的改进

可以通过多种方式增强此代码。首先，你可以想出一种减少重复的方法。提示：使用我们用来从您已有的内容中"提取"getComputerChoice函数本质的相同技术。有没有办法抽象出 DOM 查询和事件侦听器的添加？

最好更改UI 而不仅仅是显示获胜者。我的意思是，在用户点击后对用户隐藏选择<div>元素，并显示结果，让用户玩下一轮。

JavaScript 纸剪刀石 - 需要指南

相关内容

最新更新

热门标签：