javascript - 如何在剪刀石头布游戏中创建记分牌

Question

作为 JavaScript 的初学者，我想制作一款剪刀石头布游戏。

我的游戏计划是:

在用户点击一个选项(石头、剪刀、布)后，它会显示他们的分数和计算机分数。它会显示结果。一旦他们的分数达到一定数额，他们就可以输入自己的名字，系统会将其记录在某处。

谁能告诉我怎么做，我是初学者，如果有人能告诉我怎么做就太好了。请在 JS Fiddle 网页上查看它。我正在合并 HTML 和 CSS。

我在 JSFiddle 上做:https://jsfiddle.net/y3qu7pzz/

谢谢

enter code here: This is the JS
function playgame (x){

var options = ["rock", "paper", "scissors"]

var playerChoice = x

var randomNumber = Math.floor(Math.random()*options.length)

var computerChoice = options[randomNumber]

function determineWinner(){
	//
	if (playerChoice == computerChoice) {
  	//
  	$("#results").html("You selected " + playerChoice + " and the computer selected " + computerChoice + ". Game tied.<br />")
  } 
  //
  else if (playerChoice == "rock" && computerChoice == "paper" || playerChoice == "scissors" && computerChoice == "rock" || playerChoice == "paper" && computerChoice == "scissors") {
  	//
  	$("#results").html("You selected " + playerChoice + " and the computer selected " + computerChoice + ". You lost. <br />")  	
  } 
  //
  else if (playerChoice == "rock" && computerChoice == "scissors" || playerChoice == "scissors" && computerChoice == "paper" || playerChoice == "paper" && computerChoice == "rock") {
  	//
    $("#results").html("You selected " + playerChoice + " and the computer selected " + computerChoice + ". You won. <br />") 
	} 
  //
  else {
  	//
  	alert("Please enter rock, paper or scissors")
  }
}
//
determineWinner()

} 

$(".start").click(function (){
var choice = $(this).attr("id")
playgame(choice)
})

Answer 1

看起来您的代码正在运行。你说你想把分数存储在某个地方。第一部分将包括一个分数和适当的增量。 您可以存储一个全局变量，其中包含计算机获胜的次数和玩家获胜的次数

var computerWins = 0;
var playerWins = 0;
var draws = 0;

在determineWinner()

中

//computer wins conditional
computerWins++;
...
//player wins conditional
playerWins++;
//..etc

最后计算胜率得分:

var percentageWins = (playerWins / (computerWins + playerWins + draws)) * 100;

显示给用户等

您可能希望将分数存储在 localstorage 中，这样如果用户离开页面并返回，它仍然会持久存在。参见 https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

您想从 localstorage 设置/获取 wins/draws 变量。 或者，您可以将数据发布到某个端点并检索它，但这需要额外的服务器。