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 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.

Tilret så heroMan’s pladsering (x og y koordinat) er variabler i HeroMan klassens constructor.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/jGtlGKNnL

Solution example - Subtask 1

Tilret så heroMan har en størrelse (cirkel) og så han er gul.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/QIiW_dJ_j

Solution example - Subtask 2

Tilret så man kan bevæge heroMan ved at bruge piletasterne.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/s7vJKOAAf

Solution example - Subtask 3

Tilret så heroMan ikke kan bevæge sig uden for canvas, således at man hele tiden kan se hele den gule cirkel.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/iMRNyipiU

Solution example - Subtask 4

Tilret så der er et målområde. Der skal ikke ske noget når heroMan kommer indenfor målområdet.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/jB59gNr7o

Solution example - Subtask 5

Skriv en besked til skærmen hvis midten af heroMan er inden for målområdet.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/cyJcXrdd7

Solution example - Subtask 6

Tilret så spillet stopper hvis midten af heroMan er indenfor målområdet

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/eZKveUUW2

Hint: I setup sættes gameState til “GAME-IN-PROGRESS”. Hvis heroMan kommer indenfor målområdet, så sættes gameState til “GAME-WON”. Tilret “draw” funktionen så heroMan kun bevæger sig hvis gameState er “GAME-IN-PROGRESS”.

Solution example - Subtask 7

Hvis heroMan er i målområdet, så skal spillet starte forfra hvis man klikker med musen.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/fOsAx8Q6J

Hint: Tilføj en ny gameState der hedder “SET-START-VALUES”. Sæt denne i “setup” og når der klikkes med musen (og gameState samtig er “GAME-WON”).

Solution example - Subtask 8

Tilret så der er en grøn mand (grøn cirkel uden et ansigt)

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/ni0SyGscX

Solution example - Subtask 9

Tilret så spillet stopper hvis heroMan rører den grønne mand.

Hint: Lave en metode i HeroMan klassen ved navn intersectsAngryMan (”Intersects” betyder at to linier krydser hinanden). Denne skal tage et angryMan object ind som argument og returnere true hvis de to cirkler rører hinanden. “validateGameState” funktionen skal sætte gameState til “GAME-LOST” hvis heroMan rører ved den grønne mand. Tilret “draw” funktionen så spille stopper hvis spillet er tabt.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/9Kcg2VSqH

Solution example - Subtask 10

Tilret så den grønne mand følger efter heroMan

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/Nou3cVy10

Solution example - Subtask 11

Tilret til den grønne mand fra start er pladseret et tilfældig sted på skærmen. Gør dette på en fleksibel måde således at det stadig vil virke hvis du beslutter at lave canvas større.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/iXqQV9yhS

Hint: Hvis man i koden skriver “width” så returneres bredten på canvas og hvis man skrive “height” så returneres højden på canvas.

Solution example - Subtask 12

Tilret så heroMan’s hastighed er parameter i HeroMans klassen’s constructor. Tilret også så den grønne mands farve og maksimale hastighed er parametere i GreenAngryMan klassens constructor. Tilret contructoren så den grønne mand får en tilfældig højeste hastighed hver gang man starter spillet.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/Puxo9WIWA

Solution example - Subtask 13

Tilret så der kommer en start besked med beskrivelse af hvad spillet går ud på når man starter spillet.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/m4zbD7JGK

Hint: Lav en funktion ved navn “showStartMessage”. Introducer en ny gameState ved navn “START-SCREEN” og sæt denne i “setup”. Tilret også “draw” funktionen så den kan håndtere den nye gameState. Når der klikkes med musen og gameState = “START-SCREEN”, så skal gameState sættes til “SET-START-VALUES” og når gameState er “GAME-WON” eller “GAME-LOST” så skal gameState sættes til “START-SCREEN”.

Solution example - Subtask 14

Tilret så der kommer en besked med at man har vundet.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/3CYEf2dKy

Solution example - Subtask 15

Tilret så der kommer en besked når man har tabt spillet

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/ZHAWhHINM

Solution example - Subtask 16

Tilret så heroMan får et ansigt.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/W35hCRabZ

Solution example - Subtask 17

Tilret så den sure grønne mand får et ansigt. Han må gerne se lidt sur eller farlig ud

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/ZDTthADQP

Solution example - Subtask 18

Tilret så der kommer flere sure grønne mænd.

Hint: Alle de stedet hvor angryMan objektet håndteres, der skal man i stedet håndtere et array af sure mænd.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/AJbeL453i

Solution example - Subtask 19

Tilret så der også kommer sure røde mænd. De skal stå stille og langsomt bevæge sig større.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/4T_UDdM3f

Solution example - Subtask 20

Lav en ny klasse ved navn AngryMan som GreenAngryMan og RedAngryMan klassen nedarver fra. Den skal indehold de variabler og metoder som er fælles for de to eksisterende klasser. AngryMan klassens constructor skal tage “colour” som parameter.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/cge0Hv2WQS

Solution example - Subtask 21

Tilret så der hele tiden er to transparente sure mænd. Man skal stadig tabe spillet hvis man rører dem.

Hint: Lav en variabel i AngryMan klassens constructor ved navn “colourAlpha” (Alpha betyder gennemsigtighed) samt en ny metode ved navn “turnTransparent” som sætter “colourAlpha” variablen til 100. I “updateGameState” funktionen skal “turnTransparent” metoden kaldes for de to første sure mænd der løbes igennem i for løkken. Det er lidt tricky at få det til at virke helt så de sure mænd vises med korrekt farve og alpha. Du må gerne smugkikke på løsningseksemplet.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/mLEmUPg4R

Solution example - Subtask 22

Tilret så de transparente sure mænd forsvinder hvis heroMan rører dem. Der skal hele tiden være to transparente sure mænd.

Hint: Lav en ny metode i AngryMan klassen ved navn “canPop”. Denne skal returnere true hvis den sure mand er gennemsigtig. Tilret “validateGameState” funktionen til at gøre følgende: Hvis heroMan rører den sur mand og den sure mand kan pop’e, så skal den sure mand fjernes fra arrayet med det sure mænd. Hvis den sure mand ikke kan pop’e, så er spillet tabt.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/CrF33AMvz

Solution example - Subtask 23

Tilret beskeden der kommer når man vinder spillet nævner hvor mange sure mænd man har pop’et

Hint: Lad heroMan holde styr på hvor mange sure mænd han har pop’et og tæl denne op i “validateGameState” funktionen.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/l8AN85fVt

Solution example - Subtask 24

Hvis heroMan og en sur mand rører hinanden, så skal de begge farves grå

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/PQvfzAQMs

Solution example - Subtask 25

Tilret så den sure grønne mand får solbriller. Dette kan gøres ved at lave en “show” metode i GreenAngryMan klassen (som overskriver den fra AngryMan klassen).

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/nF3SnGZ3W

Solution example - Subtask 26

Tilret så der også kommer blå sure mænd. De skal bevæge sig som billard kugler.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/zP1rgQT6Q

Solution example - Subtask 27

Tilret så man på start skærmen skal trykke på en knap ved navn “EASY” for at starte spillet. Lav knappen som en klasse ved navn Button der kan genbruges til forskellige knap objekter.

Hint: Giv Button klassen en metode ved navn “isClicked”.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/akXqd0rap

Solution example - Subtask 28

Tilret så der også er knapper for level “NORMAL”, “HARD” og “EXTREME”. Lav en ny globel variabel ved navn “gameLevel” som sættes når man trykker på knapperne. I “setStartValues” skal man sætte forskellige start værdier afhængig af hvilken level spillet er startet på.

Hint: Tilføj knapper for de forskellige levels under start beskeden. Tilføj en ny global variabel ved navn “gameLevel” således at denne sættes til hhv. “EASY”, “NOTMAL”, “HARD” og “EXTREME” når man starter spillet på de forskellige levels. Tilret “setStartValues” så start værdierne sættes afhængig af game level.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/nAFM3C3HS

Solution example - Subtask 29

Tilret vinder beskeden så der står hvilket level man har vundet på.

Hint: Giv “Button” klassen en ny variabel i constructoren ved navn “wasClicked” samt en metode ved navn “getWasClicked” der returnerer true hvis der er blevet klikket på knappen. I “showGameWonMessage” funktionen kan man herved lave en differentieret tekst afhængig af hvilken knap spillet er startet med.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/-BkB4Bpt1

Solution example - Subtask 30

Under beskeden der kommer når man har vundet eller tabt skal der være en knap man skal trykke på for at starte spillet igen.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/fkmc4f7dS

Solution example - Subtask 31

Hvis heroMan er på den øverste halvdel af canvas når man taber spillet, så skal beskeden med at man har tabe vises på den nederste halvdel af canvas og omvendt.

Prøv løsningen til delopgaven her: https://editor.p5js.org/JensValdez/full/xgY-XIeXg

Solution example - Subtask 32

https://editor.p5js.org/JensValdez/sketches/xgY-XIeXg

https://editor.p5js.org/JensValdez/sketches/_BuV2lsPm