Rock-Scissors-Paper游戏 - 代码不起作用

时间：2016-11-24 08:25:40

标签： javascript html function

我的摇滚剪刀纸游戏无效。

我是一名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>

  1. 用户可以点击摇滚，剪刀或纸张;
  2. 上面显示了用户的结果+我的JS程序随机选择;
  3. 当您点击'Gewinner'时，它应显示谁赢了比赛。

    4. 我坚持＃3。胜利者没有出现。

    谢谢，

    约瑟夫

4 个答案:

答案 0 :(得分：2)

问题

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

让我们详细介绍一下这个功能：

function user(x) {
  var element_user = document.getElementById('user');
  return element_user.innerHTML = x;
}
  1. 在第一行中，您说您期望一个参数并将其命名为x。当您调用没有参数的函数时，x将是未定义的。
  2. 在第二行中，您正在查找#user元素并将其分配给局部变量。这很好。

  3. 现在你在一行中做两件事，基本上是：

    element_user.innerHTML = x;
return element_user.innerHTML;

    4. 当您从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： - ）

    祝你好运。

答案 1 :(得分：0)

函数winner（）中的最后两行永远不会执行，因为之前的返回值。 你可以改变＆＃34;返回...＆＃34;进入＆＃34;结果= ...＆＃34;以＆＃34; winner_element.innterHTML = result;＆＃34;结束; ？像这样：

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;
}

答案 2 :(得分：0)

您可以尝试使用如下所示的工作代码段

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

抱歉，如果我将单词更改为英语。我不懂德语吗？

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>

相关问题
最新问题