我正在用javascript构建一个文本冒险游戏，并根据这里记录的教程案例构建它:https://www.youtube.com/watch?v=R1S_NhKkvGA代码可以在这里找到:https://github.com/WebDevSimplified/JavaScript-Text-Adventure
这是一个很棒的教程，但是对于我正在构建的游戏来说，需要有一系列变量和数组，例如，国防预算，坦克数量，外交关卡等，这些可以被玩家的行动操纵，并在分析屏幕上读出。
当前的教程代码允许您设置状态，例如是否有剑，但不支持变量和数组的维护。
我曾尝试将选项的选择设置为调用一个函数，该函数修改变量，然后将变量读回给玩家，但是变量的原始值(50而不是60)总是被读回。
我将提供代码html文件和javascript文件下面除了注释详细的事情我已经尝试!
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="styles.css" rel="stylesheet">
<script defer src="game.js"></script>
<title>Mr. Variable Simulator</title>
</head>
<body>
<h1>Mr. Variable Simulator</h1>
<div class="container">
<div id="text">Text</div>
<div id="option-buttons" class="btn-grid">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
<button class="btn">Option 3</button>
<button class="btn">Option 4</button>
<button class="btn">Option 5</button>
<button class="btn">Option 6</button>
<button class="btn">Option 7</button>
<button class="btn">Option 8</button>
<button class="btn">Option 9</button>
<button class="btn">Option 10</button>
</div>
</div>
</body>
</html>Javascript文件
const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')
//--------------------------------------------------------------------------------------------
//setting Mr Variable
let MrVaraible =50;
//--------------------------------------------------------------------------------------------
let state = {}
//starts the game
function startGame() {
state = {}
showTextNode(1)
}
//Making it return to the scond menu after variablke is modified
function ReturnToMenu() {
showTextNode(2)
}
function showTextNode(textNodeIndex) {
const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
textElement.innerText = textNode.text
while (optionButtonsElement.firstChild) {
optionButtonsElement.removeChild(optionButtonsElement.firstChild)
}
textNode.options.forEach(option => {
if (showOption(option)) {
const button = document.createElement('button')
button.innerText = option.text
button.classList.add('btn')
button.addEventListener('click', () => selectOption(option))
optionButtonsElement.appendChild(button)
}
})
}
function showOption(option) {
return option.requiredState == null || option.requiredState(state)
}
function selectOption(option) {
const nextTextNodeId = option.nextText
//Changing Mr Variable
//----------------------------------------------------------------------
if (nextTextNodeId == -5) {
MrVaraible=60;
return ReturnToMenu()
}
//---------------------------------------------------------------------
if (nextTextNodeId == -100) {
return startGame()
}
state = Object.assign(state, option.setState)
showTextNode(nextTextNodeId)
}
let textNodes = [
{
id: 1,
text: 'Mr. Varaible is set to 50 press the button to make him larger by 10',
options: [
{
text: 'Increase Mr. Variable',
nextText:-5
},
]
},
{
id: 2,
text: MrVaraible,
options: [
{
text: 'It',
nextText: -100
},
{
text: 'Did',
nextText: -100
},
{
text: 'Not',
nextText: -100
},
{
text: 'Increase',
nextText: -100
}
]
},
]
startGame()提前感谢，
艾弗
注:如果完成了控制台日志，它会确认变量的更改(变量确实更改了，但读数没有更改)。输入图片描述
我明白你的问题了。
在startGame()之前定义列表让textNodes = [.
当这些行被称为
时{
id: 2,
text: MrVaraible,
options: [
你的浏览器看到的是:
{
id: 2,
text: 50
options: [
所以从那时起，无论何时你想使用textNodes 2，它将始终是50。
尝试将textNodes列表移动到showTextNode函数的内部，以便每次都重新生成:
function showTextNode(textNodeIndex) {
let textNodes = [