如何在没有页面重新加载的情况下继续游戏玩法

Question

我正在建造一个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);
})

Answer 1

如果将计算机选择变成返回值的函数，则可以每次调用它并获取新值。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rock">rock</div>
<div id="scissors">scissors</div>
<div id="paper">paper</div>
<div id="decision"></div>

Answer 2

我已经为您做了一个小提琴：https：//jsfiddle.net/9uq19dtc/1/。

基本上，您只需要将compChoice代码放在每个按钮点击的地方，而不是仅在页面加载时。

要保持分数，只需再制作2个具有球员得分和comp得分的DIV，并每次获胜时都会增加其值。

Answer 3

让您的'click'按钮在开始时执行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);
})