Vi skal lave følgende spil der hedder HeroMan:

Du kan lige prøve det af så du kender funktionaliteten. Se om du kan gennemføre alle levels.

Prøv spillet her: https://editor.p5js.org/JensValdez/full/xgY-XIeXg

Når du skal lave en større opgave er det nemmest at dele den op i mindre delopgaver som du godt kan løse. For at hjælpe har jeg oprettet en masse delopgaver. Hvis du går i stå må du gerne se på løsningenseksemplet for delopgaven. Herefter skal du selv prøve at løse den. Det er fint hvis du finder dine egne løsninger til delopgaverne. Det er dog en god ide altid at se løsningseksemplet for hver delopgave igennem og forstå det efter at du har løst en delopgave.

Det er en lidt avanceret opgave som har fokus på følgende:

• Hvordan en opgave kan deles ind i mindre delopgaver som er godt at løse.
• Hvordan man kan strukturere koden i klasser, en styringsfunktion og mindre hjælpe funktioner så koden er til at overskue.
• Hvordan man kan håndtere de forskellige tilstande som spillet kan være i og styre dialogen med brugeren.
• Hvordan funktionalitet kan deles op så hjælpefunktionerne kun gør en ting.
• Hvordan man kan lave genbrugelig kode.
• Hvordan man kan bruge nedarvning (Engelsk: inheritance) og håndtere objekter der ligner hinanden på en ens måde (Det der på engelsk kaldes polymorphism)
• Hvordan man kan lave klasser og hjælpefunktioner således at de ikke gør brug af globale variabler. Dette gør at de er nemme at forstå og bruge og at de kan testes uafhængig af resten af koden.
• Hvor man kan gøre brug af tilfældighed til at gøre hver spiloplevelse unique.
• Hvordan man kan starte med at lave den mest simple version af et spil men som stadig kan spilles hvorefter man gradvist tilføjer flere og flere lækre detaljer.

Start her

Start med at forstå start kode skabelonen:

// HeroManStartKodeSkabelon

let gameState;
let heroMan;

function setup() {
  createCanvas(600, 600);

  setStartValues();
}

function draw() {
  background(220);

  showGameState();
}

function setStartValues() {
  heroMan = new HeroMan();
}

function showGameState() {
  heroMan.show();
}

class HeroMan {
  constructor() {}

  show() {
    point(50, 50);
  }
}

og kopier koden ind i et nyt program i p5js editoren. Giv spillet et navn og husk at gemme løbende.