Javascript和HTML链接

时间：2015-10-29 21:25:54

标签： javascript html

我正在研究Rock，Paper，Scissors javascript游戏。但是，当我去运行它时，我遇到了让HTML和JS进行通信的问题。

我有三个按钮，它们应该将一个字符串传递给JS，后者将它与分配给计算机播放器的随机值进行比较。

非常感谢任何有助于此功能的帮助。感谢

   

     var choicePrompt = "Please, pick your poison.";
var victory = "Congrats, you Won!";
var defeat = "Sorry, you Lost";
var catsgame = "It's a draw!";

function run(userIn) {
	var loop = true;
	var winner;
	var scoreCount = 0;

	document.getElementById("prompt");

	while (loop)
	{
		compChoice = Math.random();
		compChoice = stringify(compChoice);
		userChoice = userIn;

		if (compChoice === "SOMETHING WENT WRONG")
		{
			document.getElementById("prompt").alert("JAVASCRIPT ERROR");
		}

		winner = victor(userIn, compChoice);

		switch (winner) {
			case "WIN":
				scoreCount += 1;
				document.getElementById("score") = "Score: " + scoreCount;
				document.getElementById("prompt").innerHTML = victory;
				break;

			case "LOSS":
				scoreCount -= 1;
				document.getElementById("score") = scoreCount;
				document.getElementById("prompt").innerHTML = defeat;
				break;

			case "DRAW":
				document.getElementById("prompt").innerHTML = catsgame;
				break;

			case "ERROR":

			default:
				document.getElementById("prompt").innerHTML = "Something went wrong";
		}
		loop = false;
	}
}

function stringify(float) {
	if (float <= 0.33)
	{
		return "ROCK";
	}
	else if (float > 0.33 && float <= 0.66)
	{
		return "PAPER";
	}
	else if (float > 0.66)
	{
		return "SCISSORS";
	}
	else
	{
		return "SOMETHING WENT WRONG";
	}
}

function victor(user, comp) {
	switch (user)
	{
		case "ROCK":
			switch (comp)
			{
				case "ROCK":
					return "DRAW";
					break;
				case "SCISSORS":
					return "WIN";
					break;
				case "PAPER":
					return "LOSS";
					break;
				default:
					return "ERROR";
			}
			break;
		case "PAPER":
			switch (comp)
			{
				case "ROCK":
					return "WIN";
					break;
				case "SCISSORS":
					return "LOSS";
					break;
				case "PAPER":
					return "DRAW";
					break;
				default:
					return "ERROR";
			}
			break;
		case "SCISSORS":
			switch (comp)
			{
				case "ROCK":
					return "LOSS";
					break;
				case "SCISSORS":
					return "DRAW";
					break;
				case "PAPER":
					return "WIN";
					break;
				default:
					return "ERROR";
			}
			break;
		default:
			return "ERROR";
	}
}
        <!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="utf-8">
   <title>Rock Paper Scissors</title>
   <link rel="stylesheet" href="../assets/css/hmwk-3.css" />
   <script source src="play.js"></script>
</head>


<header>
  <h2>Rock, Paper, Scissors</h2>

  <nav>
    <a href="index.html">Homework Home</a> |
    <a href="welcome.html"> Play Rock, Paper, Scissors</a>
  </nav>
</header>


<body>
  <h3 id="prompt">Please, pick your poison.</h3><br>
	<h3 id="score">Score: 0</h3>

  <table>
    <td>
      <input type="image" src="../assets/hmwk-3/rock.png" onclick="run('ROCK')" />
    </td>
    <td>
      <input type="image" src="../assets/hmwk-3/paper.png" onclick="run('PAPER')" />
    </td>
    <td>
      <input type="image" src="../assets/hmwk-3/scissors.png" onclick="run('SCISSORS')" />
    </td>
  </table>
</body>
</html>

我已更新代码，胜利声明不会更新。如果我选择Paper作为输入，我只能达到“这是一个平局”。我也希望这个无限运行直到用户离开页面，我是否需要循环来执行此操作，或者如果他们选择不同的图片，它将在没有循环的情况下正常工作。感谢您输入

2 个答案:

答案 0 :(得分：2)

这适用于FF。我能够显示所有3个条件。你没有将loop设置为false，这创建了一个无限循环，而DRAW情况引入了一个尚未声明的变量。这肯定可以重构，我将留下作为OP的练习。

无限循环首次归功于@ pL4Gu33。

var choicePrompt = "Please, pick your poison.";
var victory = "Congrats, you Won!";
var defeat = "Sorry, you Lost";
var catsgame = "Kiss yer sister";

function run(userIn) {
    var loop = true;
    var winner;
    var scoreCount = 0;

    while (loop)
    {
        compChoice = Math.random();
        compChoice = stringify(compChoice);
        userChoice = userIn;

        if (compChoice === "SOMETHING WENT WRONG")
        {
            document.getElementById("prompt").alert("JAVASCRIPT ERROR");
            loop = false;
        }

        winner = victor(userIn, compChoice);

        switch (winner) {
            case "WIN":
                document.getElementById("prompt").innerHTML = victory;
                loop = false;
                break;

            case "LOSS":
                document.getElementById("prompt").innerHTML = defeat;
                loop = false;
                break;

            case "DRAW":
                document.getElementById("prompt").innerHTML = catsgame;
                loop = false;
                break;

            case "ERROR":
                loop = false;
                break;
            default:
                loop = false;
                document.getElementById("prompt").innerHTML = "Something went wrong";
        }
    }
}

function stringify(float) {
    if (float <= 0.33)
    {
        return "ROCK";
    }
    else if (float > 0.33 && float <= 0.66)
    {
        return "PAPER";
    }
    else if (float > 0.66)
    {
        return "SCISSORS";
    }
    else
    {
        return "SOMETHING WENT WRONG";
    }
}

function victor(user, comp) {
    switch (user)
    {
        case "ROCK":
            switch (comp)
            {
                case "ROCK":
                    return "DRAW";
                    break;
                case "SCISSORS":
                    return "WIN";
                    break;
                case "PAPER":
                    return "LOSS";
                    break;
                default:
                    return "ERROR";
            }
            break;
        case "PAPER":
            switch (comp)
            {
                case "ROCK":
                    return "WIN";
                    break;
                case "SCISSORS":
                    return "LOSS";
                    break;
                case "PAPER":
                    return "DRAW";
                    break;
                default:
                    return "ERROR";
            }
            break;
        case "SCISSORS":
            switch (comp)
            {
                case "ROCK":
                    return "LOSS";
                    break;
                case "SCISSORS":
                    return "DRAW";
                    break;
                case "PAPER":
                    return "WIN";
                    break;
                default:
                    return "ERROR";
            }
            break;
        default:
            return "ERROR";
    }
}

答案 1 :(得分：1)

您缺少catsgame的变量声明，请参阅下面的Elliot Rodriguez的评论，而您循环创建无限循环，因为loop永远不会设置为false，请参阅评论来自pL4Gu33：

var choicePrompt = "Please, pick your poison.";
var victory = "Congrats, you Won!";
var defeat = "Sorry, you Lost";
var catsgame = "It is a draw"; //added to the code, see Elliot Rodriguez' answer

function run(userIn) {
  var loop = true;
  var winner;
  var scoreCount = 0;

  while (loop) {
    compChoice = Math.random();
    compChoice = stringify(compChoice);
    userChoice = userIn;

    if (compChoice === "SOMETHING WENT WRONG") {
      document.getElementById("prompt").alert("JAVASCRIPT ERROR");
    }

    winner = victor(userIn, compChoice);

    switch (winner) {
      case "WIN":
        document.getElementById("prompt").innerHTML = victory;
        break;

      case "LOSS":
        document.getElementById("prompt").innerHTML = defeat;
        break;

      case "DRAW":
        document.getElementById("prompt").innerHTML = catsgame;
        break;

      case "ERROR":

      default:
        document.getElementById("prompt").innerHTML = "Something went wrong";
    }

    loop = false;//terminate loop, see comment by @pL4Gu33.
  }
}

function stringify(float) {
  if (float <= 0.33) {
    return "ROCK";
  } else if (float > 0.33 && float <= 0.66) {
    return "PAPER";
  } else if (float > 0.66) {
    return "SCISSORS";
  } else {
    return "SOMETHING WENT WRONG";
  }
}

function victor(user, comp) {
  switch (user) {
    case "ROCK":
      switch (comp) {
        case "ROCK":
          return "DRAW";
          break;
        case "SCISSORS":
          return "WIN";
          break;
        case "PAPER":
          return "LOSS";
          break;
        default:
          return "ERROR";
      }
      break;
    case "PAPER":
      switch (comp) {
        case "ROCK":
          return "WIN";
          break;
        case "SCISSORS":
          return "LOSS";
          break;
        case "PAPER":
          return "DRAW";
          break;
        default:
          return "ERROR";
      }
      break;
    case "SCISSORS":
      switch (comp) {
        case "ROCK":
          return "LOSS";
          break;
        case "SCISSORS":
          return "DRAW";
          break;
        case "PAPER":
          return "WIN";
          break;
        default:
          return "ERROR";
      }
      break;
    default:
      return "ERROR";
  }
}
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="utf-8">
  <title>Rock Paper Scissors</title>
  <link rel="stylesheet" href="assets/css/main.css" />
  <script source src="play.js"></script>
</head>


<header>
  <h2>Rock, Paper, Scissors</h2>

  <nav>
    <a href="index.html">Homework Home</a> |
    <a href="welcome.html"> Play Rock, Paper, Scissors</a>
  </nav>
</header>


<body>
  <h3 id="prompt" />
  <table>
    <td>
      <input type="image" src="../assets/hmwk-3/rock.png" onclick="run('ROCK')" />
    </td>
    <td>
      <input type="image" src="../assets/hmwk-3/paper.png" onclick="run('PAPER')" />
    </td>
    <td>
      <input type="image" src="../assets/hmwk-3/scissors.png" onclick="run('SCISSORS')" />
    </td>
  </table>
</body>

</html>

相关问题
最新问题