1. JavaScript-grunder för spelet

Målet

Förstå tillräckligt mycket JavaScript för att kunna ändra spelet själv. Det här kapitlet kräver inte Godot eller tidigare Three.js-kunskaper. Öppna rules.js bredvid texten: den är kortare och lättare att läsa än hela main.js.

Värden, variabler och objekt

const betyder att variabelnamnet inte pekas om. Innehållet i ett objekt kan ändå ändras. let används när själva variabeln behöver ett nytt värde. Ett objekt består av namngivna egenskaper; en array är en numrerad lista.

const player = { health: 100, keys: [false, false] };
player.health = 88;       // tillåtet: egenskapen ändras
player.keys[0] = true;    // den första nyckeln hittades
let elapsed = 0;
elapsed += 0.016;         // ungefär en bildruta vid 60 FPS

Index börjar på 0, inte 1. Därför använder dörr 1 state.keys[0] och dörr 2 state.keys[1]. I spelet finns motsvarande state.keys[number - 1].

Funktioner och returvärden

En funktion tar in data, gör ett avgränsat arbete och kan lämna tillbaka ett värde. restoredHealth(current, max, amount) räknar ut hälsan efter ett medkit. Den ändrar inte spelvärlden, vilket gör den lätt att testa.

function heal(current, amount, maximum) {
  return Math.min(maximum, current + amount);
}
console.log(heal(80, 40, 100)); // 100, inte 120

Math.min väljer det minsta talet. console.log skriver i webbläsarens konsol. Prova tre värden: 20, 80 och 100. Fundera på resultatet före körning.

Villkor och listor

if kör kod bara när villkoret är sant. for...of går igenom en lista. Spelet använder sådana loopar för monster, medkit och magasin.

for (const monster of monsters) {
  if (monster.dead) continue;
  // Bara levande monster uppdateras.
}

continue hoppar över resten av denna iteration, inte hela loopen. Det är viktigt när ett dött monster fortfarande väntar på att tas bort från scenen.

Prova direkt, utan installation

Öppna en webbsida i din vanliga webbläsare. Öppna utvecklarverktygen med F12 eller ⌥⌘I på Mac, välj fliken Console och skriv 2 + 3. Tryck Enter. Du ska få 5. Konsolen är ett tillfälligt övningsutrymme: det du skriver där ändrar inte spelets filer.

Skriv sedan in kodraderna nedan, en i taget. Om webbläsaren varnar för att klistra in kod i konsolen, skriv raderna själv. Klistra aldrig in kod från en okänd källa.

let health = 80;
health = Math.min(100, health + 40);
console.log(health);

Svaret ska bli 100. Byt startvärdet till 20 och kör raderna igen. Om konsolen säger att health redan finns, ladda om sidan innan du provar igen. Förutsäg svaret innan du trycker Enter.

När du har installerat projektet i kapitel 2 kan du öppna src/rules.js och hitta RULES.maxHealth, RULES.magazineSize och RULES.minimumSpawnDistance. Ändra ett värde i din egen kopia, observera effekten och återställ sedan värdet. Kör npm test för att kontrollera att spelreglerna fortfarande håller.

Klart när: du kan förklara skillnaden mellan state.keys[0] och state.keys[1], och varför en funktion som bara räknar ut ett tal är lättare att testa än en som också flyttar 3D-objekt.