【发布时间】：2020-06-20 07:53:20
【问题描述】：
我正在学习 JS，并基于一个选择你自己的冒险文字游戏来构建一个项目。
我想要的是在某些“幻灯片”上，让图像与上半部分的描述文本一起显示。
它现在的工作方式是通过指向新幻灯片 ID 的选项选项更改幻灯片，该 ID 具有 text 的新值。然后用于更新实际的文本元素。我最初的想法是有一个空的<img> div，然后在某些幻灯片上使用test.png 进行变量更新，并使用.src 为div 提供图像。然而，这只是意味着一直出现一个丑陋的“找不到图像方块”。
然后我想也许在某些幻灯片上，我可以为变量image 分配一个数字。这个数字是指数组或列表中的一个项目，或者是我想要显示的图像。 showTextNode 函数将检查该数字，如果找到，它将附加一个带有正确图像的 img 子节点。然后，移到下一张幻灯片，孩子将被移除。
我最初尝试添加一个if 循环检查image 是否等于一个数字除了破坏一切之外什么都不做！现在，这个解决方案已经超出了我的控制范围，所以如果有人可以指导我找到正确的文档或指南等...来了解这一点，那就太棒了！
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<script defer src="game.js"></script>
<title>Case Study 1</title>
</head>
<body>
<div class="container">
<div class="container-upper">
<div id="text" class="text">Text</div>
</div>
<div class="container-lower">
<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>
</div>
</div>
</div>
</body>
</html>
JAVASCRIPT
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(){
return true;
}
function selectOption(option) {
const nextTextNodeId = option.nextText;
state = Object.assign(state, option.setState)
showTextNode(nextTextNodeId)
}
const textNodes = [
{
id: 1,
text: 'Case Study: BioPharma Expansion',
options: [
{
text: 'Start',
setState: {},
nextText: 2
}
]
},
{
id: 2,
text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',
options: [
{
text: "I'd like to know more about BioPharma's revenue",
setState: {},
nextText: 3
},
{
text: "I'd like to know more about BioPharma's cost structure",
setState: {},
nextText: 3
}
]
},
{
id: 3,
text: "BioPharma's revenue has increased year on year by 12% since 2014",
options: [
{
text: "What about costs?",
setState: {},
nextText: 4
}
]
},
{
id: 4,
text: "BioPharma's cost structure is shown below in Figure 1",
options: [
{
text: "Here is some stuff",
}
]
}
]
startGame();
【问题讨论】：
-
现在想想，也许我可以一直在那里拥有 img div。但是然后我添加和删除一个使其隐藏或显示的类？然后我可以用 .src 更新相关幻灯片的链接。
标签： javascript html css