Question

我正在构建一个Javascript Rock，Paper，Scissors游戏，每次我想要玩另一个“回合”时我都要重新加载页面。关于如何在不重新加载页面并保持分数的情况下继续循环游戏的任何建议？

    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

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

＆＃13;

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);
})

＆＃13;

<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>

＆＃13;

Answer 2

我为你做了一个小提琴：https://jsfiddle.net/9uq19dtc/1/。

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

要保持得分，只需再制作2个具有球员得分和比分得分的div，并在每次获胜时增加值。

Answer 3

点击＆＃39;点击＆＃39;按钮执行compChoice逻辑而不是开头，因此每当您单击Rock，Paper或Scissors时，它都会选择一个新结果：

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);
})

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

3 个答案: