显示游戏选项然后进行比较

Question

我正在玩石头剪刀布游戏，我想按1逐个显示计算机选择，然后让用户输入一系列选择来击败计算机顺序。

这是我到目前为止所拥有的：

var computersHand = [];

function playSimon(){
    startClock(); //Start Timer
    startGame();
}

function  startGame() {
  numOfRounds++;

  for(var i = 0; i < numOfRounds; i++){
     var tmpGame = getComputersMoveSimon();
     computersHand[i] = tmpGame;

     getusersmove();

  }
}

function getUsersMove() {
    console.log(computersHand.toString()); //Testing the array
    document.getElementById("playOptionsSimon").style.display = 'block';
    startGame();
}

function getComputersMoveSimon() {
    var tmpNum = Math.random();

    if(tmpNum < .33){
        return "Rock";
    }
    else if(tmpNum < .66){
        return "Paper";
    }
    else{
        return "Scissors";
    }
}

<div id="playOptionsSimon" style="display: none">
    <h4>Choose your move to beat the computer!</h4>
    <img id="clickedRockSimon" src="img/rock.jpg" onclick="playSimonRock()" />
    <img id="clickedPaperSimon" src="img/paper.jpg" onclick="playSimonPaper()"/>
    <img id="clickedScissorsSimon" src="img/scissors.jpg" onclick="playSimonScissors()" />
</div>

我遇到的问题是它仅在数组中显示1个项目，然后如何存储仅输入最多至轮数的用户。

Answer 1

请考虑以下内容：

var numOfRounds = 0;
var rounds = [];
var computersHand;
var clockTime;


function startClock() {
  clockTime = new Date();
}

function playSimon() {
  startClock(); //Start Timer
  console.log("Start Game: " + clockTime.toString());
  startGame();
}

function startGame() {
  numOfRounds++;

  var cm = getComputersMoveSimon();
  console.log("Round: " + numOfRounds + ", Computer: " + cm);

  rounds.push({
    round: numOfRounds,
    start: clockTime,
    end: null,
    computer: cm,
    user: null,
    winner: null
  })

  $("#playOptionsSimon").show();
}

function getUsersMove(sel) {
  var i = rounds.length - 1;
  console.log("Round " + rounds[i].round + ", User: " + sel);
  rounds[i].user = sel;
  rounds[i].end = new Date();
  rounds[i].winner = getWinner(rounds[i].computer, rounds[i].user);
  return rounds[i];
}

function getComputersMoveSimon() {
  var tmpNum = Math.random();
  var sel = "Scissors";

  if (tmpNum < .33) {
    sel = "Rock";
  } else if (tmpNum < .66) {
    sel = "Paper";
  }

  return sel;
}

function getWinner(compMove, userMove) {
  var winner = "Computer";
  if (compMove == userMove) {
    return "Draw";
  }
  switch (true) {
    case (compMove == "Rock" && userMove == "Paper"):
      winner = "User";
      break;
    case (compMove == "Scissors" && userMove == "Rock"):
      winner = "User";
      break;
    case (compMove == "Paper" && userMove == "Scissors"):
      winner = "User";
      break;
  }
  return winner;
}

function calcGameTime(s, e) {
  return Math.round((e - s) / 1000);
}

function endGame() {
  var r = rounds[rounds.length - 1];
  var t = calcGameTime(r.start, r.end);
  $("#Results").html("Computer: " + r.computer + " | You: " + r.user + "<br />");
  if (r.winner == "User") {
    $("#Results").append("Round " + r.round + ": You won! Game time: " + t + " seconds. Press Start Game to play again.");
  } else if (r.winner == "Draw") {
    $("#Results").append("Round " + r.round + ": It was a Draw! Game time: " + t + " seconds. Press Start Game to play again.");
  } else {
    $("#Results").append("Round " + r.round + ": Sorry, you lost! Game time: " + t + " seconds. Press Start Game to play again.");
  }
  $("#clickedStartGame").fadeIn();
}

$(function() {
  $("#clickedStartGame").click(function() {
    $("#Results").html("");
    playSimon();
    $(this).hide();
  });
  $(".btn").click(function(e) {
    var s = $(this).attr("id");
    console.log("User Clicked " + s);
    var round = getUsersMove(s);
    console.log(round);
    endGame();
  });
});

.btn {
  border: 1px solid #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="clickedStartGame">Start Game</button>

<div id="playOptionsSimon" style="display: none;">
  <h4>Choose your move to beat the computer!</h4>
  <img id="Rock" class="btn rock" src="" alt="Rock" />
  <img id="Paper" class="btn paper" src="" alt="Paper" />
  <img id="Scissors" class="btn scissor" src="" alt="Scissors" />
  <br />
  <div id="Results"></div>
</div>