Guten Abend,
ich habe angefangen Medieninformatik zu studieren und wir müssen ein JS Browsergame als Semesterarbeit programmieren.
Wir haben uns für ein Text-Adventure Spiel entschieden. Soweit so gut, ich habe auch die ersten Anfänge von dem Spiel programmiert komme aber nicht weiter, da ich leider nicht weis wie ich Bilder in das Script bekomme. Ich habe wirklich schon sehr viel ausprobiert aber leider ohne Erfolg.
Der HTML Code:
Der JS Code:
Die Bilder sollen passend zu der ID erscheinen, also immer wenn man weiter klickt kommt man ja auf eine neue ID und dort soll dann auch ein neues Bild erscheinen.
Ich hoffe ihr könnt mir weiterhelfen.
Liebe Grüße
Julian
ich habe angefangen Medieninformatik zu studieren und wir müssen ein JS Browsergame als Semesterarbeit programmieren.
Wir haben uns für ein Text-Adventure Spiel entschieden. Soweit so gut, ich habe auch die ersten Anfänge von dem Spiel programmiert komme aber nicht weiter, da ich leider nicht weis wie ich Bilder in das Script bekomme. Ich habe wirklich schon sehr viel ausprobiert aber leider ohne Erfolg.
Der HTML Code:
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>Bank robbery</title>
</head>
<body style="background-image: url('img/background.png');">
<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>
Der JS Code:
Javascript:
let textElement = document.getElementById('text')
let optionButtonsElement = document.getElementById('option-buttons')
function startGame() {
showTextNode(1)
}
function showTextNode(textNodeIndex) {
let 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)) {
let 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
}
function selectOption(option) {
let nextTextNodeId = option.nextText
if (nextTextNodeId <= 0) {
return startGame()
}
showTextNode(nextTextNodeId)
}
let textNodes = [
{
id: 1,
text: 'Wollen Sie Wirklich eine Bank ausrauben?',
options: [
{
text: 'Ja',
nextText: 2
},
{
text: 'Nein',
nextText: 3
}
]
},
{
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',
nextText: 3
},
{
text: 'Trade the goo for a shield',
nextText: 3
},
{
text: 'Ignore the merchant',
nextText: 3
}
]
},
{
id: 3,
text: 'Sie wollen die Bank nicht ausrauben. Bitte starten Sie das Spiel erneut',
options: [
{
text: 'Neustart',
nextText: -1
}
]
}
]
startGame()
Die Bilder sollen passend zu der ID erscheinen, also immer wenn man weiter klickt kommt man ja auf eine neue ID und dort soll dann auch ein neues Bild erscheinen.
Ich hoffe ihr könnt mir weiterhelfen.
Liebe Grüße
Julian