Question

我正在创建游戏，但是在完成某些部分时遇到了问题，而且我不知道在哪里放置新代码等我要添加以下内容： 1.直到游戏结束，我想查看有关为了赢得整个游戏而剩下的游戏数量的信息。我创建了按钮（NewGame），当我按下该按钮时，我输入了我想玩多少回合并获得输出的数字，例如（您必须赢得3个回合才能赢得比赛！），但是当我启动该按钮时，输出消失了按下“纸”按钮的游戏。...不知道如何保存该信息。 2.在这一轮用户或计算机赢得必要数量的游戏之后，我需要在新行中显示“例如，您赢得了整个游戏！”

    //user choice
var output = document.getElementById("output");
var result = document.getElementById("result");
var count = 3;
var countUser = 0;
var countComputer = 0;

var button = document.getElementById("newgame");
button.addEventListener("click", function() {
  game = window.prompt("How many games you want to play?");
  output.innerHTML =
    "You must win  " +
    game + " rounds  to win the game! Choose the button start the game!";
});

var paper = document.querySelector("#paper header");
paper.addEventListener("click", function() {
  paper.classList.toggle("header-special");
  userChoice = "paper";
  output.innerHTML = "You  Chose Paper";
  compareWithComputer("paper");
});

var scissors = document.querySelector("#scissors header");
scissors.addEventListener("click", function() {
  scissors.classList.toggle("header-special");
  userChoice = "scissors";
  output.innerHTML = "You  Chose Scissors";
  compareWithComputer("scissors");
});

var stone = document.querySelector("#stone header");
stone.addEventListener("click", function() {
  stone.classList.toggle("header-special");
  userChoice = "stone";
  output.innerHTML = "You  Chose Stone";
  compareWithComputer("stone");
});

    // Computer choice

function compareWithComputer(userChoice) {
  var computerChoice = Math.floor(Math.random() * 3 + 1);
  if (computerChoice == 1) {
    computerChoice = "stone";
  } else if (computerChoice == 2) {
    computerChoice = "paper";
  } else {
    computerChoice = "scissors";
  }

//compare
  var results = compare(userChoice, computerChoice);

  output.innerHTML += ". Computer Chose " + computerChoice + results;
  result.innerHTML = "user " + countUser + "computer" + countComputer;
}
// Compare userChoice and computerChoice
var compare = function(choice1, choice2) {
  if (choice1 === choice2) {
    return "It's a tie!";
  }
  if (choice1 === "stone") {
    if (choice2 === "scissors") {
      // stone wins
      countUser++;
      return "You win!";
    } else {
      // paper wins
      countComputer++;
      return "You lose! Try again.";
    }
  }
  if (choice1 === "paper") {
    if (choice2 === "stone") {
      // paper wins
      countUser++;
      return "You win!";
    } else {
      // scissors wins
      countComputer++;
      return "You lose! Try again.";
    }
  }
  if (choice1 === "scissors") {
    if (choice2 === "stone") {
      // stone wins
      countComputer++;
      return "You lose! Try again.";
    } else {
      // scissors wins
      countUser++;
      return "You win!";
    }
  }
};

body {
padding: 10px;
text-align: center;
}
.start{
font-size:25px;
color:brown;
 margin:10px;
}
.game {
display: inline-block;
margin: 10px;
max-width: auto;
border: 1px solid #000;
text-align: center;
font-size:40px;
padding:5px
border-radius: 25px;
cursor: pointer;
padding:5px;

}

.header-special {
font-weight: bold;
background: yellow;
}

.newgame {
display: inline-block;
margin: 10px;
max-width: auto;
border: 1px solid #000;
text-align: center;
font-size:40px;
padding:5px
border-radius: 25px;
cursor: pointer;
padding:5px;

}

    <!DOCTYPE html>
    <div class ="start"
    <h1>Click the button, start the NewGame!</h1>
    </div>
    <div class="game" id="paper">
    <header>Paper</header>

    </div>
    <div class="game" id="scissors">
    <header>Scissors</header>

    </div>
    <div class="game" id="stone">
    <header>Stone</header>
    </div>
    <div class="newgame" id="newgame">
    <header>NewGame</header>
    </div>
    <div id="output"></div>
    <div id="result"</div>

JavaScript：不知道该如何进行游戏

0 个答案: