Javascript 如何在不重新加载页面的情况下继续游戏

我正在构建一个Javascript的石头、布、剪刀游戏，每次我想玩另一轮游戏时，我都必须重新加载页面。关于如何在不重新加载页面和保留分数的情况下继续循环游戏，有什么建议吗

    var compChoice = "";
var userChoice = "";

//comp choice
compChoice = Math.random();
 if(compChoice < 0.34) {
     compChoice = 'rock';
 }
 else if(compChoice <= 0.67) {
     compChoice = 'paper';
 }
 else {
     compChoice = 'scissors';
};
//compare function
var compare = function(userChoice, compChoice) {
    if(userChoice == compChoice) {
        return("Draw");
    }
    else if(userChoice == "rock" && compChoice == "scissors") {
        return("PLayer Wins");
    }
    else if (userChoice == "paper" && compChoice == "rock") {
        return("Player Wins");
    }
    else if (userChoice == "scissors" && compChoice == "paper") {
        return("Player Wins");
    }
    else {
        return("Player loses");
    }
};
//click events
$('#rock').click(function() {
    var result = compare('rock', compChoice);
    $('#decision').html(result);

})
$('#paper').click(function() {
    var result = compare('paper', compChoice);
    $('#decision').html(result);
})
$('#scissors').click(function() {
    var result = compare('scissors', compChoice);
    $('#decision').html(result);
})

---

我为你做了一把小提琴

基本上，您只需要将compChoice代码放在每次单击按钮都会调用它的位置，而不是只在页面加载时调用

---

要保持分数，只需再制作两个具有玩家分数和comp分数的div，并在其中一个获胜时增加其值。

如果将计算机选项转换为返回值的函数，则可以每次调用它并获得新值

var userChoice=； //公司选择 var getCompChoice=函数{ var选择=数学随机； ifchoice<0.34{ 返回“岩石”； } else ifchoice${compChoice}`； } 如果userChoice==paper&&compChoice==rock，则为else{ return`Player Wins.paper>${compChoice}`； } 否则，如果userChoice==剪刀和compChoice==纸{ return`Player Wins.scissors>${compChoice}`； } 否则{ 返回`Player Looses.${userChoice}<${compChoice}`； } }; //点击事件 $'rock'。单击函数{ var结果=比较“岩石”； $'decision'.htmlresult； } $“纸张”。单击功能{ var结果=比较“文件”； $'decision'.htmlresult； } $‘剪刀’。单击功能{ var结果=比较“剪刀”； $'decision'.htmlresult； } 岩石 剪刀 纸张

---

让您的“单击”按钮执行compChoice逻辑，而不是在开始时，这样每当您单击石头、布或剪刀时，它就会选择一个新结果：

var userChoice = "";

//comp choice
var chooseCompChoice = function() {
  compChoice = Math.random();
  if(compChoice < 0.34) {
    return 'rock';
  }
  else if(compChoice <= 0.67) {
    return 'paper';
  }
  else {
    return 'scissors';
  }
};

//compare function
var compare = function(userChoice, compChoice) {
  if(userChoice === compChoice) {
    return("Draw");
  }
  else if(userChoice === "rock" && compChoice === "scissors") {
    return("Player Wins");
  }
  else if (userChoice === "paper" && compChoice === "rock") {
    return("Player Wins");
  }
  else if (userChoice === "scissors" && compChoice === "paper") {
    return("Player Wins");
  }
  else {
    return("Player loses");
  }
};

//click events
$('#rock').click(function() {
  var compChoice = chooseCompChoice();
  var result = compare('rock', compChoice);
  $('#decision').html(result);
})

$('#paper').click(function() {
  var compChoice = chooseCompChoice();
  var result = compare('paper', compChoice);
  $('#decision').html(result);
})

$('#scissors').click(function() {
  var compChoice = chooseCompChoice();
  var result = compare('scissors', compChoice);
  $('#decision').html(result);
})

---

新一轮是什么样的？只需将UI元素和变量重置为默认状态。不需要刷新页面。