Question

在Javascript中制作一个简单的摇滚纸剪刀游戏。游戏运行正常，但我的计数器都没有工作。我想要计算赢/输/数量的数量，并且从10的数量开始倒数（当计数器达到零时我将添加一个循环结束游戏）。我已将这些计数器移入和移出函数，在if / else语句中移动它们，我终于要求有人告诉我在哪里放置它们或做什么，因为似乎没有什么工作

代码很乱，我知道，对不起，我犯了调整和转发，移动东西而不是保存原件的错误。我知道我在多个地方都有计数器，无论我把它们放在哪里都无法让它们工作，所以我现在把它们留在两个功能中。如果有人能帮助我让计数器工作（或者至少其中一个，然后解释我其他人做错了什么）我真的很感激。谢谢！

这是JSFiddle：http://jsfiddle.net/nbxk4ofo/1/（感谢您的提示！）以下是所有相关代码：

HTML

<div id="gameScreen">
    <img src="image/logo.png" />
    <br />
    <hr />
    <h3>You will play 10 rounds against the computer and I'll keep score!<br /><br />


    Wins: <span id="wins">0</span>
    <br />
    Losses: <span id="losses">0</span>
    <br />
    Ties: <span id="ties">0</span>
    <br />
    <br />


    Current Game: <br /><br />
    <span id="whoWon">

    </span> 
    <br /><br />
    You've got
    <span id="triesLeft"></span>
    tries left!
    <br />
    <br />

    <br />

    Select your weapon!<br /><br />

    <img src="image/rock1.jpg" name="rock" onclick ="playGame('rock');" onmouseover="over(0)" onmouseout="out(0)">
    <img src="image/paper1.jpg" name="paper" onclick ="playGame('paper');" onmouseover="over(1)" onmouseout="out(1)">
    <img src="image/scissors1.jpg" name="scissors" onclick ="playGame('scissors');" onmouseover="over(2)" onmouseout="out(2)">
    </h3>

的Javascript

var revert = new Array();
var inames = new Array('rock', 'paper', 'scissors');
var userOption = "";
var triesLeft = 10;
var wins = 0;
var ties = 0;
var losses = 0;
var results;
var computerSelection;


//Main function for the game logic
function playGame(userSelect)
{

userOption = userSelect;

var computerSelection = Math.random();

if (computerSelection < 0.34)
{
    computerSelection = "rock";

}
else if (computerSelection < 0.67)
{
    computerSelection = "paper";
}
else
{
    computerSelection = "scissors";
}

results = compareChoices(userOption, computerSelection);

document.getElementById("result").innerHTML = "<p>The computer chose " +
    computerSelection;
document.getElementById("whoWon").innerHTML = results;


document.getElementById("triesLeft").innerHTML = triesLeft;
}


function updateScore(results) {
var ties = document.getElementById("ties");
var wins = document.getElementById("wins");
var losses = document.getElementById("losses");

if (results === "tie") {
    ties++;
    ties.innerHTML = ties;
}

if (results === "win") {
    wins++;
    wins.innerHTML = wins;
}

if (results === "lose") {
    losses++;
    losses.innerHTML = losses;
}
}


function compareChoices(userOption, computerSelection)
{

if (computerSelection == "rock") {
    document.getElementById("imageResult").setAttribute("src", "image/rock2.jpg");
}

if (computerSelection == "paper") {
    document.getElementById("imageResult").setAttribute("src", "image/paper2.jpg");
}

if (computerSelection == "scissors") {
    document.getElementById("imageResult").setAttribute("src",     "image/scissors2.jpg");
}



if (userOption == computerSelection)
{
    ties++;
    updateScore("tie")
    return "It's a tie!";

}

if (userOption == "rock")
{
    if (computerSelection == "scissors")
    {
        wins++;
        updateScore("win")
        return "You win!";

    }
        else
        {
        losses++;
        updateScore("lose")
        return "You lose!";

    }


} else if (userOption == "paper") {

    if (computerSelection == "rock")
    {
        wins++;
        updateScore("win")
        return "You win!";

    } else if ("scissors") {
        updateScore("lose")
        losses++;
        return "You lose!";

    }

} else if (userOption == "scissors") {

    if (computerSelection == "rock")
    {
        losses++;
        updateScore("lose")
        return "You lose!";

    }else{

        wins++;
        updateScore("win")
        return "You win!";

    }
}
}

Answer 1

在updateScore()中，您将变量ties，wins和losses定义为HTML节点元素。由于这些变量的调用与全局上下文中的计数器相同，因此您无法从updateScore（）访问计数器，因为内部上下文优先于外部上下文。

此外，由于您尝试首先使用wins作为数字和然后作为对象，所以没有任何事情真正完成：

if (results === "win") {
    wins++;                // treat inner wins as a Number, becomes NaN
    wins.innerHTML = wins; // treat NaN wins as an Object, result undefined
}

其他计数器也是如此。

使用下面的代码解决此问题后，您会注意到计数器每次增加2个单位。这是因为您还增加了compareChoices上的计数器，因此我的解决方案是不要尝试在updateScore中增加计数器：

function updateScore(results) {

    if (results === "tie") {
        document.getElementById("ties").innerHTML = ties;
    }

    if (results === "win") {
        document.getElementById("wins").innerHTML = wins;
    }

    if (results === "lose") {
        document.getElementById("losses").innerHTML = losses;    
    }
}

您还需要更新tryLeft，您可以在playGame的最后一行执行此操作：

document.getElementById("triesLeft").innerHTML = --triesLeft;

你可以阻止玩家在没有更多尝试的情况下玩游戏：

function playGame(userSelect) {
    if (triesLeft == 0) {
        alert("No more tries left!");
        return;
    } 

    // The rest of the function...
}

应该这样做。

Answer 2

更改一些代码并使流程正常工作。

添加pswd因此可以显示计算机的选择。
使用状态对象保存所有会随时间变化的值，这样我们就可以减少一些不完整的代码，并使用结果作为对象的键来获取值。
让<span id="result"></span><img id="imageResult"/>只是比较选择，所以我将set compute result image的动作移动到playgame。

compareChoice

revert = new Array();
var inames = ['rock', 'paper', 'scissors'];
var gameStatus = {
  wins: 0,
  ties: 0,
  losses: 0,
  triesLeft: 10
};
// 
var imageResults = {
  paper: 'image/paper.jpg',
  scissors: "image/scissors.jpg",
  rock: 'image/rock2.jpg'
};

//Main function for the game logic
function playGame(userSelect) {
  if (gameStatus.triesLeft > 0) {
    --gameStatus.triesLeft;

     // Get int value in range [0, 2]
    var computerSelection = Math.floor(Math.random() * 3);
    computerSelection = inames[computerSelection];

    // Move the show Image from compareChoices to here.
    document.getElementById("imageResult").setAttribute("src", imageResults[computerSelection]);

    var results = compareChoices(userSelect, computerSelection);

    document.getElementById("result").innerHTML = "<p>The computer chose " + computerSelection;
    document.getElementById("whoWon").innerHTML = results;
    document.getElementById("triesLeft").innerHTML = gameStatus.triesLeft;
  }
}


function updateScore(results) {
  ++gameStatus[results]
  var resultTarget = document.getElementById(results);
  resultTarget.innerHTML = gameStatus[results].toString();
}


function compareChoices(userOption, computerSelection) {
  if (userOption === computerSelection) {
    ties++;
    updateScore("ties");
    return "It's a tie!";
  }

  var result;
  var resultStr;

  if (userOption === "rock") {
    if (computerSelection  === "scissors") {
      result = 'wins';
      resultStr = 'You win';
    } else {
      result = 'losses';
      resultStr = 'You lose!';
    } 
  } else if (userOption  === "paper") {
    if (computerSelection  === "rock") {
      result = 'wins';
      resultStr = 'You win';
    } else if ("scissors") {
      result = 'losses';
      resultStr = 'You lose!';
    }
  } else if (userOption  === "scissors") {
    if (computerSelection  === "rock") {
      result = 'losses';
      resultStr = 'You lose!';
    } else {
      result = 'wins';
      resultStr = 'You win';
    }
  }
  updateScore(result);
  return 'You ' + result + '!';
}

Javascript计数器不起作用

2 个答案: