javascript - 为什么 "draw"在我的石头剪刀布蜥蜴史波克中不增加+1？

Question

除了平局计数器外，计算胜负和平局次数的计数器正在工作。我已经找了大约一个小时的问题，但我仍然无法弄清楚问题出在哪里。这是我的完整代码:

HTML:

<div id="you">
<span><h3>Your results:</h3></span>
<span>Wins:</span><span id="youWin"></span><br>
<span>Losses:</span><span id="youLoss"></span><br>
<span>Draws:</span><span id="draw1"></span>
</div>


<div id="center">

<button id="button" onclick="play()">Play</button>
<p>You rolled:</p><span id="myroll"></span>
<p>Your opponent rolled:</p><span id="opproll"></span>

<p id="outcome"></p>
</div>

<div id="opp">
<span><h3>Opponent's results:</h3></span>
<span>Wins:</span><span id="oppWin"></span><br>
<span>Losses:</span><span id="oppLoss"></span><br>
<span>Draws:</span><span id="draw2"></span>
</div>

Javascript:

window.onload=function () {
document.getElementById("youWin").innerHTML=" " + youwin;
document.getElementById("youLoss").innerHTML=" " + youloss;
document.getElementById("oppWin").innerHTML=" " + oppwin;
document.getElementById("oppLoss").innerHTML=" " + opploss;
document.getElementById("draw1").innerHTML=" " + draw;
document.getElementById("draw2").innerHTML=" " + draw;
}

var youwin = 0;
var youloss = 0;
var draw = 0;
var oppwin = 0;
var opploss = 0;

function play() {

var ROCK = 0;
var PAPER = 1;
var SCISSORS = 2; 
var LIZARD = 3;
var SPOCK = 4;

var choices = ['rock', 'paper', 'scissors', 'lizard', 'spock'];

var myRoll = Math.floor(Math.random()*choices.length);
var opponentRoll = Math.floor(Math.random()*choices.length);

document.getElementById("myroll").innerHTML=choices[myRoll];
document.getElementById("opproll").innerHTML=choices[opponentRoll];

if (myRoll == opponentRoll) {
document.getElementById("outcome").innerHTML="It's a draw!";
return;
}

switch(myRoll) {

case ROCK:
    document.getElementById("outcome").innerHTML=(opponentRoll == LIZARD ? 'You win!' : 'You lose!');
if (opponentRoll == SCISSORS) {
    document.getElementById("outcome").innerHTML=(opponentRoll == SCISSORS ? 'You win!' : 'You lose!');
}
break;

case PAPER: 
    document.getElementById("outcome").innerHTML=(opponentRoll == ROCK ? 'You win!' : 'You lose!');
if (opponentRoll == SPOCK) {
    document.getElementById("outcome").innerHTML=(opponentRoll == SPOCK ? 'You win!' : 'You lose!');
}   
break;

case SCISSORS:
    document.getElementById("outcome").innerHTML=(opponentRoll == PAPER ? 'You win!' : 'You lose!');
if (opponentRoll == LIZARD) {
    document.getElementById("outcome").innerHTML=(opponentRoll == LIZARD ? 'You win!' : 'You lose!');
}
break;

case LIZARD:
    document.getElementById("outcome").innerHTML=(opponentRoll == SPOCK ? 'You win!' : 'You lose!');
if (opponentRoll == PAPER) {
    document.getElementById("outcome").innerHTML=(opponentRoll == PAPER ? 'You win!' : 'You lose!');
}
break;

case SPOCK:
    document.getElementById("outcome").innerHTML=(opponentRoll == SCISSORS ? 'You win!' : 'You lose!');
if (opponentRoll == ROCK) {
    document.getElementById("outcome").innerHTML=(opponentRoll == ROCK ? 'You win!' : 'You lose!');
}
break;

} //end of switch(myRoll)

var outcome = document.getElementById("outcome");

document.getElementById("youWin").innerHTML=" " + youwin;
document.getElementById("youLoss").innerHTML=" " + youloss;
document.getElementById("oppWin").innerHTML=" " + oppwin;
document.getElementById("oppLoss").innerHTML=" " + opploss;
document.getElementById("draw1").innerHTML=" " + draw;
document.getElementById("draw2").innerHTML=" " + draw;



if (outcome.innerHTML == "You win!") {
youwin = youwin + 1;
opploss = opploss + 1;
}

else if (outcome.innerHTML == "You lose!") {
youloss = youloss + 1;
oppwin = oppwin + 1;
}

else if (outcome.innerHTML == "It's a draw!") {
draw = draw + 1;
}

} //end of play()

我会创建一个 fiddle ，但它不能正常工作。

Answer 1

从真正的快速观察来看，我猜这是因为如果是平局，您将调用 return，所以永远不会进入任何后面的代码。

if (myRoll == opponentRoll) {
  document.getElementById("outcome").innerHTML="It's a draw!";
  return;  //<--- here
}