Choose your own adventure-spel med Javascript

Hej,

Jag ska göra ett enklare spel baserat på att användaren själv ska få välja vad karaktären ska göra genom 1-3 olika alternativ.

Någon är dock tokigt i mitt program för när jag kör programmet så vill mina console.log inte skrivit ut utan hoppar vidare till nästa sak.
Vad gör jag fel?

function myFunction(e){
console.log("Välkommen till spelet!");
confirm("Är du redo att spela?");
var age = prompt("Hur gammal är du?");

if (age<12){
console.log("Spela på egen risk");
}
else {
console.log("Lycka till!");
}

var story= "Det har precis skett ett rån på Handelsbanken, klockan är 19:00. Tjuven har fullt väskan med pengar och befinner sig fortfarande i byggnaden. Du är Polis och först på plats med ditt team. Ni vill ta er in i byggnaden för att fånga tjuven!"

var story2= "Hur ska ni ta er in i byggnaden?"

console.log(story);
console.log(story);
var userAnswer1 = prompt("Tar ni 1 bakvägen eller 2 huvudingången?");

if (userAnswer1==="1"){
console.log("Du bryter upp dörren och smyger in.");
}
if (userAnswer1==="2"){
console.log("Du krossar glassdörrarna till huvudingången och ni smyger in.");
}
else {
console.log("Något gick snett, försök igen. Välj 1 eller 2!");
}

var story3= "Ni är inne i byggnaden."
console.log(story3);

var user = prompt("Vilket håll går ni åt? 1 vänster, 2 höger eller 3 ner för trappan.");

switch (user){
case "1":
console.log("Du ser tjuven och tar fast honom!");
break;
case "2":
console.log("Du ser tjuven men snubblar. Tjuven kommer undan.");
break;
case "3":
console.log("Du hittar tjuvens mobil och tar med till polisstation som bevis");
break;
default:
console.log("Någon gick snett. Välj mellan 1, 2 eller 3.");
}

console.log("Tack för att du spelade!");

var feedback= prompt("Betygsätt spelat mellan 1 till 10.");

if(feedback>8){
console.log("Wow, tack!");
}
else {
console.log("Nu är du kinkig!");
}
}

Helt ny inom Javascript så är tacksam för all hjälp jag kan få!

Hur kör du programmet?

När det gäller traditionella (textbaserade) äventyrsspel finns det ofta en poäng i att dela in spelet i gameData som är det som användaren ser som "unikt" och en gameEngine som läser gameData och låter användaren göra val utifrån den.

Denna indelning innebär att man kan lära medarbetare som inte kan programmera (i någon större utsträckning) att skriva spel genom att skriva gameData. På samma sätt fungerar mycket av modern spelutveckling idag - där s.k. "level designers" inte förstår så mycket av vad spelmotorn gör på djupet, men är bra på att hitta på historier och klurigheter för spelaren.

Att få ditt spel att sluta jobba med prompt och console.log och istället visa beskrivningar och val som html är inte så svårt efter att ha gjort denna uppdelning.

(Notera att JavaScripts objektliteraler och de datastrukturer man kan skapa med dem lämpar sig väldigt väl för gameData och innebär att vi inte längre behöver några if-satser elller case-switchar...)

Själva programmet - spelmotorn och de eventhanterare den behöver är bara 20 rader kod... Resten är gameData. Det hade gått att utöka spelet till ett "stort" äventyrsspel med hundratals olika scener, utan att ändra i spelmotorn. :)

Gamedata har följande struktur - varje egenskap är en "scen", varje scen har en say-egenskap som är vad som skrivs ut som en beskrivning till användaren, samt ett till flera val som användaren kan göra. Varje val blir en knapp användaren kan trycka på, som leder vidare till en ny scen.

// gameData innehåller alla "scener"
// som gör det här spelet unikt
let gameData = {
'start': {
say: 'Är du redo att spela?',
'Ja': 'ålder',
'Nej': 'slut'
},
'ålder': {
say: 'Hur gammal är du?',
'Under 12': 'ålderVarning',
'12 eller äldre': 'ålderOk'
},
'ålderVarning': {
say: 'Spela på egen risk!',
'Avbryt': 'slut',
'Ok': 'rån'
},
'ålderOk': {
say: 'Lycka till!',
'Ok': 'rån'
},
'rån': {
say: `Det har precis skett ett rån på Handelsbanken, klockan är 19:00.
Tjuven har fyllt väskan med pengar och befinner sig fortfarande i byggnaden.
Du är polis och först på plats med ditt team.
Ni vill ta er in i byggnaden för att fånga tjuven!

Hur ska ni ta er in i byggnaden?
`,
'Via bakvägen': 'bakvägen',
'Via huvudingången': 'huvudingången'
},
'bakvägen': {
say: 'Du bryter upp dörren och smyger in.',
'Ok': 'inne'
},
'huvudingången': {
say: 'Du krossar glassdörrarna till huvudingången och ni smyger in.',
'Ok': 'inne'
},
'inne': {
say: 'Ni är inne i byggnaden! Vilket håll går ni åt?',
'Vänster': 'tar fast tjuven',
'Höger': 'snubblar',
'Ner för trappan': 'hittar mobil'
},
'tar fast tjuven': {
say: 'Du ser tjuven och tar fast honom!',
'Ok': 'betygsätt'
},
'snubblar': {
say: 'Du ser tjuven men snubblar. Tjuven kommer undan.',
'Ok': 'betygsätt'
},
'hittar mobil': {
say: 'Du hittar tjuvens mobil och tar med till polisstation som bevis.',
'Ok': 'betygsätt'
},
'betygsätt': {
say: 'Tack för att du spelade! Betygsätt spelet mellan 1-10...',
'1-7': 'dåligt betyg',
'8-10': 'bra betyg'
},
'dåligt betyg': {
say: 'Nu är du kinkig!',
'Ok': 'slut'
},
'bra betyg': {
say: 'Wow, tack!',
'Ok': 'slut'
},
'slut': {
say: 'Spelet är slut... Vill du spela igen?',
'Ok': 'start'
}
};
// gameEngine förstår gameData
// och visar scener och val för användaren
let scene, gameEngine = (whereAmI = 'start') => {
scene = gameData[whereAmI]; // kom ihåg scenen vi är på
let choices = Object.keys(scene).filter(x => x !== 'say');
document.body.innerHTML = `
${scene.say.split('\n').join('<br>')}<br><br>
${choices.map(x => `<button>${x}</button>`).join(' ')}
`;
}
// en event listener lyssnar på klick på knappar
// och anropar gameEngine utifrån gjorda val
document.body.addEventListener('click', e => {
if (!e.target.closest('button')) { return; }
let choice = e.target.innerHTML;
gameEngine(scene[choice]);
});
// starta spelet
gameEngine();

Svara