Я изучаю JS и создаю проект на основе текстовой игры на выбор.
То, что я хотел бы, есть на определенных «слайдах», чтобы изображения появлялись с текстом описания в верхней половине.
Прямо сейчас это работает так, что слайды заменяются выбором опций, указывающих на новый идентификатор слайда, который имеет новое значение text. Затем это используется для обновления фактического текстового элемента. Моя первоначальная мысль заключалась в том, чтобы иметь пустой <img> div, а затем на некоторых слайдах обновить переменную с помощью test.png и использовать .src, чтобы дать div изображение. Однако это просто означает, что есть уродливый «квадрат без изображения», который появляется все время.
Тогда я подумал, что, возможно, на некоторых слайдах я мог бы присвоить номер переменной image. Это число будет относиться к элементу в массиве или списке или к тому изображению, которое я хочу показать. Затем функция showTextNode будет проверять это число и, если найдет его, добавит дочерний img с правильным изображением. Затем, переходя к следующему слайду, дочерний элемент будет удален.
Мои первые попытки добавить if l oop, проверяя, совпадает ли image с числом, ничего не делают, кроме как все ломают! Прямо сейчас это решение очень не подходит для моей рулевой рубки, поэтому, если кто-нибудь может направить меня к нужной документации или руководству или и т. Д. c ..., чтобы узнать об этом, это было бы здорово!
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();