为什么我的石头，纸，剪刀，蜥蜴，史波克“画”不加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()

我本可以造出一把小提琴，但它没有正常工作。

Answer 1

由于这一部分：

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

return语句意味着函数的执行就此结束，因此draw永远不会增加。可能最容易删除该行，并将switch语句作为else块的一部分。

使用其他一些小的更改来减少代码，如下所示：

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

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

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

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

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

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

    } //end of switch(myRoll)
}

Answer 2

从真正的快速查看来看，我想这是因为如果它是平局的话，您将调用return，所以以后的代码将永远无法进入。

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

Answer 3

你回来是为了打破抽签的局面。这是在跳过其他的一切。将其更改为if/else块(否则将是您在赢/输条件下的开关)。