我正试图为我的小侄子写一个简单的基于文本的rpg。我遵循了一个youtube教程，由于某种原因我无法理解，该程序无法运行。我已经检查了这三个文件中的代码好几次，以找出拼写错误和任何不应该存在的模糊内容。然而，我被难住了。如有任何帮助，我们将不胜感激。
const textElement = document.getElementById("text")
const optionButtonsElement = document.getElementById("option-buttons")
let state = {}
function startGame(){
state = {}
showTextNode(1)
}
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
state = object.assign(state, option.setState)
if (nextTextNodeId <= 0){
return startGame()
}
state = Object.assign(state, option.State)
showTextNode(nextTextNodeId)
}
const textNodes = [
{
id: 1,
text: "You wake up in a strange place and you see a jar of blue goo near you.",
options: [
{
text: "Take goo",
setState: {bluegoo: true},
nextText: 2
},
{
text: "Leave the goo",
nextText: 2
}
]
},
{
id: 2,
text: "You venture forth in search of answers to where you are when you come across a merchant.",
options:[
{
text: "Trade the goo for a sword.",
requiredState: (currentState) => currentState.bluegoo,
setState: {bluegoo: false, sword: true },
nextText: 3
},
{
text: "Trade the goo for a shield.",
requiredState: (currentState) => currentState.bluegoo,
setState: {bluegoo: false, shield: true },
nextText: 3
},
{
text: "Ignore the merchant.",
nextText: 3
},
]
},
{
id: 3,
text: "After leaving the merchant you start to feel tired ans tumble upon a small town next to a dangerous looking castle.",
options: [
{
text: "Explore the castle.",
nextText: 4
},
{
text: "Find a room to sleep at in the towwn.",
nextText: 5
},
{
text: "Find some hay in a stable to sleep in.",
nextText: 6
}
]
},
{
id: 4,
text: "You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.",
options [
{
text: "Restart",
nextText: -1
}
]
},
{
id: 5,
text: 'Without any money to buy a room you break into the nearest inn and fall asleep. After a few hours of sleep the owner of the inn finds you and has the town guard lock you in a cell.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 6,
text: 'You wake up well rested and full of energy ready to explore the nearby castle.',
options: [
{
text: 'Explore the castle',
nextText: 7
}
]
},
{
id: 7,
text: 'While exploring the castle you come across a horrible monster in your path.',
options: [
{
text: 'Try to run',
nextText: 8
},
{
text: 'Attack it with your sword',
requiredState: (currentState) => currentState.sword,
nextText: 9
},
{
text: 'Hide behind your shield',
requiredState: (currentState) => currentState.shield,
nextText: 10
},
{
text: 'Throw the blue goo at it',
requiredState: (currentState) => currentState.blueGoo,
nextText: 11
}
]
},
{
id: 8,
text: 'Your attempts to run are in vain and the monster easily catches.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 9,
text: 'You foolishly thought this monster could be slain with a single sword.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 10,
text: 'The monster laughed as you hid behind your shield and ate you.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 11,
text: 'You threw your jar of goo at the monster and it exploded. After the dust settled you saw the monster was destroyed. Seeing your victory you decide to claim this castle as your and live out the rest of your days there.',
options: [
{
text: 'Congratulations. Play Again.',
nextText: -1
}
]
}
]
startGame()*, *::before, *::after{
box-sizing: border-box;
font-family: Gotham Rounded;
}
body{
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #333;
}
.container{
width: 800px;
max-width: 80%;
background-color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px 2px;
}
.btn-grid{
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin-top: 20px;
}
.btn{
background-color: hsl(200, 100%, 50%);
border: 1px solid hsl(200, 100%, 30%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover{
border-color: black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sawyer's Dungeons and Dragons Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="game.js"></script>
</head>
<body>
<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>
</div>
</div>
</body>
</html>我很感激有人来看这个。干杯
代码中很少有错误
1st:此处缺少:
{
id: 4,
text: "You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.",
// : is missing after options
options [
{
text: "Restart",
nextText: -1
}
]
},
第二个：
它应该是Object.assign和NOT
state = object.assign(state, option.setState)
function selectOption(option) {
const nextTextNodeId = option.nextText
// It should be Object.assign
state = object.assign(state, option.setState)
if (nextTextNodeId <= 0){
return startGame()
}
state = Object.assign(state, option.State)
showTextNode(nextTextNodeId)
}
在这种情况下，您应该在链接html文件中的js文件时添加defer属性
<script defer src="game.js"></script>
这应该可以解决的问题
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sawyer's Dungeons and Dragons Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
// need to add defer attribute
<script defer src="game.js"></script>
</head>
<body>
<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>
</div>
</div>
</body>
</html>
JS文件
const textElement = document.getElementById("text")
const optionButtonsElement = document.getElementById("option-buttons")
let state = {}
function startGame(){
state = {}
showTextNode(1)
}
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
state = Object.assign(state, option.setState)
if (nextTextNodeId <= 0){
return startGame()
}
state = Object.assign(state, option.State)
showTextNode(nextTextNodeId)
}
const textNodes = [
{
id: 1,
text: "You wake up in a strange place and you see a jar of blue goo near you.",
options: [
{
text: "Take goo",
setState: {bluegoo: true},
nextText: 2
},
{
text: "Leave the goo",
nextText: 2
}
]
},
{
id: 2,
text: "You venture forth in search of answers to where you are when you come across a merchant.",
options:[
{
text: "Trade the goo for a sword.",
requiredState: (currentState) => currentState.bluegoo,
setState: {bluegoo: false, sword: true },
nextText: 3
},
{
text: "Trade the goo for a shield.",
requiredState: (currentState) => currentState.bluegoo,
setState: {bluegoo: false, shield: true },
nextText: 3
},
{
text: "Ignore the merchant.",
nextText: 3
},
]
},
{
id: 3,
text: "After leaving the merchant you start to feel tired ans tumble upon a small town next to a dangerous looking castle.",
options: [
{
text: "Explore the castle.",
nextText: 4
},
{
text: "Find a room to sleep at in the towwn.",
nextText: 5
},
{
text: "Find some hay in a stable to sleep in.",
nextText: 6
}
]
},
{
id: 4,
text: "You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.",
options: [
{
text: "Restart",
nextText: -1
}
]
},
{
id: 5,
text: 'Without any money to buy a room you break into the nearest inn and fall asleep. After a few hours of sleep the owner of the inn finds you and has the town guard lock you in a cell.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 6,
text: 'You wake up well rested and full of energy ready to explore the nearby castle.',
options: [
{
text: 'Explore the castle',
nextText: 7
}
]
},
{
id: 7,
text: 'While exploring the castle you come across a horrible monster in your path.',
options: [
{
text: 'Try to run',
nextText: 8
},
{
text: 'Attack it with your sword',
requiredState: (currentState) => currentState.sword,
nextText: 9
},
{
text: 'Hide behind your shield',
requiredState: (currentState) => currentState.shield,
nextText: 10
},
{
text: 'Throw the blue goo at it',
requiredState: (currentState) => currentState.blueGoo,
nextText: 11
}
]
},
{
id: 8,
text: 'Your attempts to run are in vain and the monster easily catches.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 9,
text: 'You foolishly thought this monster could be slain with a single sword.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 10,
text: 'The monster laughed as you hid behind your shield and ate you.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 11,
text: 'You threw your jar of goo at the monster and it exploded. After the dust settled you saw the monster was destroyed. Seeing your victory you decide to claim this castle as your and live out the rest of your days there.',
options: [
{
text: 'Congratulations. Play Again.',
nextText: -1
}
]
}
]
startGame()
您是否打开浏览器的控制台来检查错误？
text: "You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.",
options [
您缺少一个"："此处：
options: [
对此：
state = object.assign(state, option.setState)
什么是object？