Så vad händer på den andra sidan i textäventyret? I den här delen så använder vi den skapade strukturen för att presentera äventyret.
När jag avslutade den föregående texten om textäventyr med JavaScript hade vi skapat en struktur för äventyret och två funktioner för att presentera det. I den här delen bygger vi vidare på detta.
Funktionerna
För att presentera äventyret så skapade vi en funktion, displayPage
som tar en sida som argument och skriver ut sidans beskrivning och val.
function displayPage(page) {
console.log(page.description)
page.choices.forEach((choice) => {
console.log(choice.description)
})
}
För att kunna använda displayPage
behövde vi hitta rätt sida i äventyret. Detta löste vi med en funktion, findPage, som tar ett id som argument och returnerar rätt sida.
function findPage(id) {
return book.find((page) => {
return page.id === parseInt(id)
})
}
Presentera äventyret
Vi använder funktionerna för att hitta en sida och sedan presentera den. I nuläget fungerar detta som en typ av “game-loop”. Spelaren gör val och klickar sig igenom äventyret.
För att utveckla spelet vidare kommer vi senare att introducera element som kan göra spelet och sidorna mer interaktiva. Men först, presentationen.
HTML
För att presentera äventyret så skapar vi en grundläggande HTML sida. Vi använder en main
tagg för allt innehåll. I main skapar vi sedan varje sida i spelet som en article
tagg. I artikeln så skapar vi en p
tagg för beskrivningen och en ul
tagg för valen. I ul
taggen kommer vi att iterera över valen och skapa en li
tagg för varje val.
Det här ger oss en semantiskt korrekt struktur för att presentera äventyret.
<!DOCTYPE html>
...
<body>
<main class="container">
<article id="page">
<p id="description"></p>
<ul id="choices"></ul>
</article>
</main>
</body>
</html>
Jag inkluderar inte några stilar i detta exempel, det finns många sätt att göra det på och du kan hitta hur jag gjort det i tidigare texter.
Javascript
Med javascript kan vi sedan manipulera HTML strukturen för att presentera äventyret. Först behöver vi hitta elementen i HTML. För det använder vi document.querySelector
. Vi hittar elementen för sidan, beskrivningen och valen.
const pageElement = document.querySelector("#page")
const descriptionElement = document.querySelector("#description")
const choicesElement = document.querySelector("#choices")
Vi kan sedan använda dessa element för att uppdatera displayPage
funktionen. I funktionen använder vi element.textContent
för att redigera text. För att skapa nya element använder vi document.createElement
.
function displayPage(page) {
descriptionElement.textContent = page.description
choicesElement.innerHTML = ""
page.choices.forEach((choice) => {
const li = document.createElement("li")
const button = document.createElement("button")
button.textContent = choice.description
button.addEventListener("click", (event) => {
const nextPage = findPage(choice.target)
displayPage(nextPage)
})
li.appendChild(button)
choicesElement.appendChild(li)
})
}
displayPage
använder nu descriptionElement
och choicesElement
för att visa berättelsen och valen. Vi skapar en li
tagg för varje val och lägger till en knapp med en eventlyssnare som kallar displayPage
med rätt sida när användaren klickar på valet.
För att ersätta nuvarande sida så skriver vi över innehållet i choicesElement
med en tom sträng innan vi lägger till nya val.
Testa
Nu kan vi testa vår funktion för att presentera äventyret. Vi skapar en array med sidor och val och anropar displayPage
med den första sidan.
const book = [
{
id: 0,
description: "Du vaknar upp i ett rum. Du ser en dörr och ett fönster.",
choices: [
{
description: "Gå till dörren",
target: 1
},
{
description: "Gå till fönstret",
target: 5
}
]
},
{
id: 1,
description: "Du står framför dörren. Vad gör du?",
choices: [
{
description: "Öppna dörren",
target: 2
}, {
description: "Gå tillbaka",
target: 0
}
],
},
{
id: 2,
description: "Dörren öppnar sig och du ser en korridor. Vad gör du?",
choices: [
{
description: "Gå framåt",
target: 3
}, {
description: "Gå tillbaka",
target: 0
}
],
},
]
Starta äventyret i din kod med:
displayPage(book[0])
Du är fri att strukturera äventyret och dess filer som du vill, men det kan vara en bra idé att separera JavaScript från HTML och CSS. Detta gör det enklare att underhålla och utveckla koden. Jag rekommenderar även att ha äventyret i en separat fil, inte i din JavaScript-fil. Du kan till och med välja att spara det i en JSON-fil eller en databas.
Testa äventyret på Codepen
Här är en länk till en Codepen med all kod:
See the Pen Text adventure by Jens Andreasson (@jensadev) on CodePen.
Ladda äventyret från JSON
För att ladda äventyret från en separat fil så kan du använda fetch
för att hämta filen och sedan json
för att konvertera den till ett javascript objekt.
fetch("adventure.json")
.then((response) => response.json())
.then((data) => {
displayPage(data[0])
})
JSON är väldigt likt den array vi skapade tidigare. Här är ett exempel på hur JSON-filen kan se ut:
[
{
"id": 0,
"description": "Du vaknar upp i ett rum. Du ser en dörr och ett fönster.",
"choices": [
{
"description": "Gå till dörren",
"target": 1
},
{
"description": "Gå till fönstret",
"target": 5
}
]
},
]
Avslutning
I den här delen har vi använt den skapade strukturen för att presentera äventyret. Vi har skapat en grundläggande HTML-sida och använt JavaScript för att manipulera sidan. Vi har även tittat på hur du kan ladda äventyret från en fil.
Du har nu en grund att stå på för att bygga vidare på ditt textäventyr. Du kan lägga till fler sidor, fler val och fler funktioner. Du kan även lägga till bilder genom att inkludera värden i äventyrsobjektet och sedan rita ut dem med displayPage
funktionen.