Question

我是初学者。我正在编写一个简单的文字冒险游戏。我希望option.onclick仅在scenario == 0时有效。它应该为玩家提供基本的装备。但是，即使场景变量大于0，它也可以工作，并且在单击另一个选项后，它将为玩家提供更多的装备。为什么？！在Google Chrome控制台中，它表示大于0，所以我真的不知道现在发生了什么。

let character = {
  hp: 100,
  equipment: ""
}

var scenario = 0;

let story = document.getElementById("story");
let option1 = document.getElementById("option1");
let option2 = document.getElementById("option2");
let option3 = document.getElementById("option3");
let stats = document.getElementById("stats");

stats.innerHTML = "HP: " + character.hp + "%" + "<br />" + "Equipment: " + character.equipment;
story.innerHTML = "Your name is Hirohashi Mitsuuchi. You work as mercenary. Goal of the game is to kill Ishiyama Tokiari, most powerful and richest of daimyo. You are now preparing to attack his castle. What are you gonna bring with you? ";
option1.innerHTML = "Take Katana and Shurikens";
option2.innerHTML = "Take Gun and Gunpowder";
option3.innerHTML = "Take Bow and Arrows";


function game() {

  if(scenario == 0) {

  option1.onclick = function() {
    scenario++;
    character.equipment += '[Katana] ';
    character.equipment += '[Shurikens]';
  }

  option2.onclick = function() {
    scenario++;
    character.equipment += '[Gun] ';
    character.equipment += '[Gunpowder] ';
  }

  option3.onclick = function() {
    scenario++;
    character.equipment += '[Bow] ';
    character.equipment += '[Arrows] ';
  }
}

  if(scenario == 1)
  {
    stats.innerHTML = "HP: " + character.hp + "%" + "<br />" + "Equipment: " + character.equipment;
    story.innerHTML = "After few minutes you founded a tavern. Unfornately you don't have any money so you can't afford a room. You decide to..";
    option1.innerHTML = "sdfasfsafsadas";
    option2.innerHTML = "sdafsafasfsa";
    option3.innerHTML = "sadfsafdsap";

    }


  if(scenario == 2)
  {
    stats.innerHTML = "HP: " + character.hp + "%" + "<br />" + "Equipment: " + character.equipment;
    story.innerHTML = "hgdgdfhdf";
    option1.innerHTML = "xcvbcxbcxbcxvbcx";
    option2.innerHTML = "ewrawafsadgas";
    option3.innerHTML = "nbcxnxbdsbds";
  }

  window.requestAnimationFrame(game);
}

window.requestAnimationFrame(game);

body
{
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  color: white;
  line-height: 150%;
}

#container
{
  height: 300px;
  width: 400px;
  margin: 0 auto;
  margin-top: 150px;
  background-color: #000000;
  text-align: center;
}

#stats
{
  text-align: left;
  padding: 10px;
}

#story
{
  padding: 15px;
  text-align: left;
}

button
{
  padding: 6px;
  cursor: pointer;
  margin-top: 40px;
  margin: 3px;

  text-align: center;
}

<!DOCTYPE HTML>
<html>

<head>
	<meta charset="UTF-8">
	<html lang="en">
	<title>The Twisting Moon</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="style.css">
	<script src="js/jquery-3.4.1.min.js" defer></script>
	<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>

<body>
	<div id="container">
		<div id="stats"></div>
		<div id="story"><p></p></div>
		<button id="option1"><p></p></button>
		<button id="option2"><p></p></button>
		<button id="option3"><p></p></button>
	</div>
		<script src="js/game.js" defer></script>

</body>

语句为假时函数仍然起作用

0 个答案: