【问题标题】：Rock-Scissors-Paper game - Code does not work剪刀石头布游戏 - 代码不起作用
【发布时间】：2016-11-24 08:25:40
【问题描述】：

我的石头剪刀布游戏不工作。

我是一名 JavaScript 初学者，需要你的帮助。

这是我的代码：

function user(x) {
  var element_user = document.getElementById('user');
  return element_user.innerHTML = x;
}

function enemy() {
  random_number = Math.ceil(Math.random() * 3);

  if (random_number == 1) {
    random_number = "Stein";
  } else if (random_number == 2) {
    random_number = "Schere";
  } else {
    random_number = "Papier";
  }
  var element_enemy = document.getElementById('enemy');
  return element_enemy.innerHTML = random_number;
}    

function winner() {
  if (user() === 'Stein' && random_number === 'Schere') {
    return "User hat gewonnen!";
  } else if (user() === 'Stein' && random_number === 'Papier')  {
    return "Enemy hat gewonnen!";
  } else if (user() === 'Schere' && random_number === 'Stein') {
    return "Enemy hat gewonnen!";
  } else if (user() === 'Schere' && random_number === 'Papier') {
    return "User hat gewonnen!";
  } else if (user() === 'Papier' && random_number === 'Stein') {
    return "User hat gewonnen!";
  } else if (user() === 'Papier' && random_number === 'Schere') {
    return "Enemy hat gewonnen!";
  } else {
    return "Unentschieden!";
  }
  var winner_element = document.getElementById('winner');
  winner_element.innerHTML = winner();
}

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>S+S+P</title>
</head>
<body>
  
  <p id="user"></p>  
  <p id="enemy"></p>
  
  <button onclick="user('Stein'), enemy();">Stein</button>
  <button onclick="user('Schere'), enemy();">Schere</button>
  <button onclick="user('Papier'), enemy();">Papier</button>
  
  <p id="winner"></p>
  
  <button onclick="winner();">Gewinner</button>

<script src="game.js"></script>
</body>
</html>

用户可以点击石头、剪刀或纸；
用户的结果如上图+我的JS程序随机选择；
当您点击“Gewinner”时，它应该会显示谁赢得了比赛。

我被困在#3 上。获胜者没有出现。

谢谢，

约瑟夫

【问题讨论】：

一个小提示，在return之后，不需要else，继续if

标签： javascript html function

【解决方案1】：

问题

您的user() 函数不应在没有参数的情况下调用，您在winner() 函数中执行此操作。

让我们详细回顾一下函数：

function user(x) {
  var element_user = document.getElementById('user');
  return element_user.innerHTML = x;
}

在第一行中，您说您期望一个参数并将其命名为x。当你调用不带参数的函数时，x 将是未定义的。
在第二行中，您正在寻找#user 元素并将其分配给局部变量。这很好。

现在你在一条线上做两件事，基本上：

element_user.innerHTML = x;
return element_user.innerHTML;

当您从winner() 中调用此函数时，您没有传递任何参数，这使得innerHTML 成为undefined，这也是您在结果中看到的内容。除了调用函数，您还可以从元素本身获取结果。

另一个问题是您从 winner() 中调用 winner() 将永远不会返回，因为该函数会递归调用自身，直到达到限制并且浏览器将其停止。

快速解决方案

解决这两个问题后，您的代码如下所示：

function user(x) {
  var element_user = document.getElementById('user');
  return element_user.innerHTML = x;
}

function enemy() {
  random_number = Math.ceil(Math.random() * 3);

  if (random_number == 1) {
    random_number = "Stein";
  } else if (random_number == 2) {
    random_number = "Schere";
  } else {
    random_number = "Papier";
  }
  var element_enemy = document.getElementById('enemy');
  return element_enemy.innerHTML = random_number;
}    

function winner() {
  var userChoice = document.getElementById('user').innerHTML;
  console.log(userChoice);
  console.log(random_number);
  if (userChoice === 'Stein' && random_number === 'Schere') {
    return "User hat gewonnen!";
  } else if (userChoice === 'Stein' && random_number === 'Papier')  {
    return "Enemy hat gewonnen!";
  } else if (userChoice === 'Schere' && random_number === 'Stein') {
    return "Enemy hat gewonnen!";
  } else if (userChoice === 'Schere' && random_number === 'Papier') {
    return "User hat gewonnen!";
  } else if (userChoice === 'Papier' && random_number === 'Stein') {
    return "User hat gewonnen!";
  } else if (userChoice === 'Papier' && random_number === 'Schere') {
    return "Enemy hat gewonnen!";
  } else {
    return "Unentschieden!";
  }
}

function writeResult() {
  var winner_element = document.getElementById('winner');
  winner_element.innerHTML = winner();
}

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>S+S+P</title>
</head>
<body>
  
  <p id="user"></p>  
  <p id="enemy"></p>
  
  <button onclick="user('Stein'), enemy();">Stein</button>
  <button onclick="user('Schere'), enemy();">Schere</button>
  <button onclick="user('Papier'), enemy();">Papier</button>
  
  <p id="winner"></p>
  
  <button onclick="writeResult();">Gewinner</button>

<script src="game.js"></script>
</body>
</html>

它可以工作，但仍然有很多错误和气味：

函数名称错误且未记录在案。它们的功能很难猜测。
您有全局变量从函数中泄漏出来。
您正在混合德语和英语...

重构迭代 1

我允许自己稍微清理一下代码：

/**
 * Sets the given user choice as html text on the #userOutput element.
 */
function setUserChoice(choice) {
  document.getElementById('userOutput').innerHTML = choice;
}

/**
 * Choses a random choice for the enemy and sets it as html on the
 * #enemyOutput element. Possible outputs are "Stein", "Schere" and "Paper".
 */
function setRandomEnemyChoice() {
  var enemyPossibleChoices = ["Stein", "Schere", "Papier"];
  var enemyChoiceNum = Math.floor(Math.random() * 3);
  var enemyChoice = enemyPossibleChoices[enemyChoiceNum];
  document.getElementById('enemyOutput').innerHTML = enemyChoice;
}    

/**
 * Given two strings where each is one of "Stein", "Schere" or "Paper",
 * determines the winner and returns the result of the match as string.
 */
function determineWinner(userChoice, enemyChoice) {
  if (userChoice === 'Stein' && enemyChoice === 'Schere') {
    return "User hat gewonnen!";
  } else if (userChoice === 'Stein' && enemyChoice === 'Papier')  {
    return "Enemy hat gewonnen!";
  } else if (userChoice === 'Schere' && enemyChoice === 'Stein') {
    return "Enemy hat gewonnen!";
  } else if (userChoice === 'Schere' && enemyChoice === 'Papier') {
    return "User hat gewonnen!";
  } else if (userChoice === 'Papier' && enemyChoice === 'Stein') {
    return "User hat gewonnen!";
  } else if (userChoice === 'Papier' && enemyChoice === 'Schere') {
    return "Enemy hat gewonnen!";
  } else {
    return "Unentschieden!";
  }
}

/**
 * Gathers the user and enemy choices, and uses them to determine the
 * result of the match. The result is then written as html to
 * #resultOutput.
 */
function writeResult() {
  var userChoice = document.getElementById('userOutput').innerHTML;
  var enemyChoice = document.getElementById('enemyOutput').innerHTML;
  var resultText = determineWinner(userChoice, enemyChoice);
  document.getElementById('resultOutput').innerHTML = resultText;
}

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>S+S+P</title>
</head>
<body>
  
  <p id="userOutput"></p>  
  <p id="enemyOutput"></p>
  
  <button onclick="setUserChoice('Stein'); setRandomEnemyChoice();">Stein</button>
  <button onclick="setUserChoice('Schere'); setRandomEnemyChoice();">Schere</button>
  <button onclick="setUserChoice('Papier'); setRandomEnemyChoice();">Papier</button>
  
  <p id="resultOutput"></p>
  
  <button onclick="writeResult();">Gewinner</button>

<script src="game.js"></script>
</body>
</html>

如您所见，方法名称和 ID 更加清晰。在重构的下一步中，您可以使用一个全局对象而不是元素绑定字符串来引入更好的状态保存。选择应该是带有字符串表示的常量 - 所以您只能在代码中使用 SCISSORS、STONE 和 PAPER，并在需要时输出德语字符串。然后 if..else 结构可以大大简化，正如其他人已经指出的那样。我会把迭代 2 留给你 :-)

祝你好运。

【讨论】：

【解决方案2】：

你可以试试下图的工作代码sn-p，

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>S+S+P</title>
</head>
<body>

	<p id="user"></p>
	<p id="enemy"></p>

	<button onclick="user('Stein'), enemy();">Stein</button>
	<button onclick="user('Schere'), enemy();">Schere</button>
	<button onclick="user('Papier'), enemy();">Papier</button>

	<p id="winner"></p>

	<button onclick="winner();">Gewinner</button>

	<script>
		function user(x) {
			var element_user = document.getElementById('user');
			return element_user.innerHTML = x;
		}

		function enemy() {
			random_number = Math.ceil(Math.random() * 3);

			if (random_number == 1) {
				random_number = "Stein";
			} else if (random_number == 2) {
				random_number = "Schere";
			} else {
				random_number = "Papier";
			}
			var element_enemy = document.getElementById('enemy');
			return element_enemy.innerHTML = random_number;
		}

		function winner() {
			var user = document.getElementById('user').innerHTML;
			var winner="";
			if (user === 'Stein' && random_number === 'Schere') {
				winner = "User hat gewonnen!";
			} else if (user === 'Stein' && random_number === 'Papier') {
				winner = "Enemy hat gewonnen!";
			} else if (user === 'Schere' && random_number === 'Stein') {
				winner = "Enemy hat gewonnen!";
			} else if (user === 'Schere' && random_number === 'Papier') {
				winner = "User hat gewonnen!";
			} else if (user === 'Papier' && random_number === 'Stein') {
				winner = "User hat gewonnen!";
			} else if (user === 'Papier' && random_number === 'Schere') {
				winner = "Enemy hat gewonnen!";
			} else {
				winner = "Unentschieden!";
			}
			var winner_element = document.getElementById('winner');
			winner_element.innerHTML = winner;
		}
	</script>
</body>
</html>

【讨论】：

【解决方案3】：

对不起，如果我把单词改成英文。德语听不懂？

var element_user = document.getElementById('user');
var element_enemy = document.getElementById('enemy');
var winner_element = document.getElementById('winner');

function user(x) {
  return element_user.innerHTML = x;
}

function enemy() {
  random_number = Math.ceil(Math.random() * 3);

  if (random_number == 1) {
    random_number = "Stein";
  } else if (random_number == 2) {
    random_number = "Schere";
  } else {
    random_number = "Papier";
  }
  return element_enemy.innerHTML = random_number;
}    

function checkWinner(user, enemy){
  if (user === enemy) {
    return "Its a tie";
  }

  if(user === "Stein"){
      if(enemy === "Papier"){
        return "Enemy wins";
      }
      return "User wins";
  }

  if(user === "Papier"){
      if(enemy === "Stein"){
          return "User wins";
      }
      return "Enemy wins";
  }

  if(user === "Schere"){
     if(enemy === "Stein"){
        return "Enemy wins";
     }

     return "User wins";
  }
}

function winner() {
  var user = element_user.innerHTML;
  var enemy = element_enemy.innerHTML;
  winner_element.innerHTML = checkWinner(user, enemy);
}

 <p id="user"></p>  
  <p id="enemy"></p>
  
  <button onclick="user('Stein'), enemy();">Stein</button>
  <button onclick="user('Schere'), enemy();">Schere</button>
  <button onclick="user('Papier'), enemy();">Papier</button>
  
  <p id="winner"></p>
  
  <button onclick="winner();">Gewinner</button>

【讨论】：

非常感谢。而已！对不起，德语单词。下次我会在这里发布带有英文单词的代码！

【解决方案4】：

winner() 函数的最后两行因为之前的返回而永远不会执行。你能把“return ...”改成“result = ...”并以“winner_element.innterHTML = result;”结尾吗？ ?像这样：

function winner() {
      var result = ""
      if (user() === 'Stein' && random_number === 'Schere') {
        result = "User hat gewonnen!";
      ...
      } else if (user() === 'Papier' && random_number === 'Schere') {
        result = "Enemy hat gewonnen!";
      } else {
        result = "Unentschieden!";
      }
      var winner_element = document.getElementById('winner');
      winner_element.innerHTML = result;
    }

另外，user() 函数也不正确。把它改成这样：

function user() {
  var element_user = document.getElementById('user');
  return element_user.innerHTML;
}

【讨论】：

感谢您的提示！现在按钮“Gewinner”正在执行该功能。我仍然有问题，结果我总是得到“Unentschieden”。我也把用户选项改成未定义...还是有问题。
你的 user() 方法不对。将参数放到函数中并删除“=x”。我编辑了我的答案给你看。