Question

我已经制作了这个＆＃34;摇滚，纸和剪刀＆＃34;在javascript中的游戏，我想在html上显示它，但我无法弄清楚如何

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
} console.log("Computer: " + computerChoice);
var compare = function(choice1, choice2) {
if(choice1 === choice2) {
        return 'The result is a tie!';
}

else if(choice1 === "rock")

    {if (choice2 === "scissors") { 
         return 'rock wins';
    }
    else{
        return 'paper wins'
    }
}
    else if (choice1 === "paper")
    {if (choice2 === "rock")
    {return 'paper wins'}
    else{return 'scissors win'}
    }

    else if (choice1 === "scissors")
    {if (choice2 === "paper")
    {return 'scissors win'}
    else {return 'rock win'}
    }
};
compare(userChoice, computerChoice)

我知道这可能听起来很新手。但是plzz回答

Answer 1

您需要<form>代码，<input type="text">代码和提交按钮。之后，您还需要一些<span>标记来接收计算机选择值和结果。

然后在JS代码中有一些修复（详细信息在片段中）。

这是一个小例子。

注意：

我使用jQuery库来保持简单，
如果有人输入数字或任何其他东西而不是纸/岩石/剪刀，你需要进行一些验证，
也许如果用户输入＆＃34; help＆＃34;或者你可以打印游戏规则的任何其他东西？

＆＃13;

// lets fire our function when the form is submited
$('#lets_rock_paper_scissors').submit(function(event) {
  event.preventDefault(); // prevent the page reload
  
  var userChoice = $('#user_choice').val(); // get the value of the input by ID
  var computerChoice = Math.random();
  
  if (computerChoice < 0.34) {
    computerChoice = "rock";
  } else if(computerChoice <= 0.67) {
    computerChoice = "paper";
  } else {
    computerChoice = "scissors";
  } 
  
  // populate the span tag with the computer choice
  $('#computer_choice').html("Computer: " + computerChoice);

  // populate the span tag with the compare() function result
  $('#result').html(compare(userChoice, computerChoice));
});

function compare(choice1, choice2) {
  if(choice1 === choice2) {
     return 'The result is a tie!';
  } else if(choice1 === "rock") {
    if (choice2 === "scissors") { 
      return 'rock wins';
    } else {
      return 'paper wins';
    }
  } else if (choice1 === "paper") {
    if (choice2 === "rock") {
      return 'paper wins';
    } else {
      return 'scissors win';
    }
  } else if (choice1 === "scissors") {
    if (choice2 === "paper") {
      return 'scissors win';
    } else {
      return 'rock win';
    }
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>Do you choose rock, paper or scissors?</h3>

<form id="lets_rock_paper_scissors">
  <input type="text" id="user_choice" />
  <input type="submit" />
</form>

<p><span id="computer_choice"></span></p>

<p><span id="result"></span></p>

＆＃13;

希望它有所帮助。玩得开心。 ; ）

Answer 2

您可以尝试在代码之间添加标记，然后将代码保存为html文件。

Answer 3

它没什么用，需要改进（这意味着你可以输入错误的单词并且不会获胜/失败）。但那是给你的。只需复制代码并将其放在记事本或记事本++的文本文档中，将其保存为whatevernameyouwant.html

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
<script> 

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();

computerChoice = computerChoice < 0.34 ? "rock" : computerChoice < 0.67 ? "paper" : "scissors";

var compare = function(choice1, choice2) {
    if(choice1 === choice2) {
        return 'The result is a tie!';
    }else if(choice1 === "rock"){
        if (choice2 === "scissors") { 
            return 'You win with rock';
        }else{
            return 'Computer wins with scissors';
        }
    }else if (choice1 === "paper"){
        if (choice2 === "rock"){
            return 'You win with paper';
        }else{
            return 'Computer wins with rock'}
    }else if(choice1 === "scissors"){
        if (choice2 === "paper"){
            return 'You win with scissors';
        }else{
            return 'Computer wins with paper';
        }
    }
};

alert(compare(userChoice, computerChoice));


</script>
</body>
</html>

Answer 4

这是您添加了最少HTML的代码。正如其他人提到的那样，你没有进行输入验证，所以这个程序将接受它给出的任何字符串。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Rock, Paper, Scissors</title>
</head>
<body>

    <script type="text/javascript">
        var playAgain = false;
        var comp_Win = 0;
        var user_Win = 0;
        do{

            var userChoice = prompt("Do you choose rock, paper or scissors?\n");

            var maximum = 3;
            var minimum = 1;
            var computerChoice = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;

            if (computerChoice == 1) {
                computerChoice = "rock";
            } else if(computerChoice == 2) {
                computerChoice = "paper";
            } else if (computerChoice == 3){
                computerChoice = "scissors";
            }


            function compare(userChoice, choice2) {
                if(userChoice === choice2) {
                    return 'The result is a tie!';
                } else if(userChoice === "rock"){
                    if (choice2 === "scissors") {
                        user_Win++;
                        return 'You win!'

                    }
                    else{
                        comp_Win++;
                        return 'Computer Wins.'
                    }
                }
                else if (userChoice === "paper"){
                    if (choice2 === "rock"){
                        user_Win++;
                        return 'You Win!'
                    }
                    else{
                        comp_Win++;
                        return 'Computer Wins.'
                    }
                }

                else if (userChoice === "scissors"){
                    if (choice2 === "paper"){
                        user_Win++;
                        return 'You win!'
                    }
                    else {
                        comp_Win++;
                        return 'Computer Wins.'
                    }
                }
            };
            alert(compare(userChoice, computerChoice)+"\n");


            if (confirm('Play again?')) {
                playAgain=true;
            } else {
                playAgain=false;
            }


        }while(playAgain);

        alert("User: "+user_Win+"\nComputer: "+comp_Win+"\n");
    </script>

</body>
</html>

这是一个只运行＆＃39;：

的版本

＆＃13;

var playAgain = false;
		var comp_Win = 0;
		var user_Win = 0;
		do{

			var userChoice = prompt("Do you choose rock, paper or scissors?\n");

			var maximum = 3;
			var minimum = 1;
			var computerChoice = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;

			if (computerChoice == 1) {
				computerChoice = "rock";
			} else if(computerChoice == 2) {
				computerChoice = "paper";
			} else if (computerChoice == 3){
				computerChoice = "scissors";
			}


			function compare(userChoice, choice2) {
				if(userChoice === choice2) {
					return 'The result is a tie!';
				} else if(userChoice === "rock"){
					if (choice2 === "scissors") {
						user_Win++;
						return 'You win!'

					}
					else{
						comp_Win++;
						return 'Computer Wins.'
					}
				}
				else if (userChoice === "paper"){
					if (choice2 === "rock"){
						user_Win++;
						return 'You Win!'
					}
					else{
						comp_Win++;
						return 'Computer Wins.'
					}
				}

				else if (userChoice === "scissors"){
					if (choice2 === "paper"){
						user_Win++;
						return 'You win!'
					}
					else {
						comp_Win++;
						return 'Computer Wins.'
					}
				}
			};
			alert(compare(userChoice, computerChoice)+"\n");


			if (confirm('Play again?')) {
				playAgain=true;
			} else {
				playAgain=false;
			}


		}while(playAgain);

		alert("User: "+user_Win+"\nComputer: "+comp_Win+"\n");

＆＃13;

我怎样才能在HTML中获得这个js游戏

4 个答案: