Opgave 2 - Grand Prix Race

Indholdsfortegnelse

Introduktion

Vi skal lave følgende spil der hedder Grand Prix Race:

Prøv spillet her: https://editor.p5js.org/JensValdez/full/wzU6IbK3X

Grand Prix Race Screenshot

Du kan prøve det af ovenfor så du kender funktionaliteten. Se om du kan vinde løbet.

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 man kan lave et bibliotek af funktioner der gør det nemt at vise grafikken i spillet.
  • Hvordan en opgave kan deles ind i mindre delopgaver som er godt at løse.
  • Hvordan man kan strukturere koden med 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.
  • 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å og afprøve biblioteks funktionerne der håndterer grafikken i spillet. Dette kan findes her:

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

Grand Prix spillet har følgende index.html fil. Som det ses nedenfor refereres både til library.js og sketch.js. Vi har lige afprøvet at funktionerne (til at vise spillets grafik) og en timer (der kan tælle ned fra et antal milisekunder) i library.js virker. Vi skal derfor udelukkende fokusere på spil logikken når vi laver spillet. Herudover gør det koden nemmere at læse når vi har gemt implementeringsdetaljerne for at vise grafik elementer ned i library.js filen.

index.html screenshot

Forstå og afprøv herefter start kode skabelonen til spillet.

// GrandPrixInitialCode - Add so that the car can also move right
        let cars = [];
        
        let gameState;
        let gameAction;
        let gameStepTimer;
        let rowCounter;
        let heroLanePosition;
        
        function setup() {
          createCanvas(600, 444);
        
          initializeGameState();
        }
        
        function initializeGameState() {
          setInitialValues();
          setImageObjectPositions();
          generateCarStream();
        
          gameState = "GAME-IN-PROGRESS";
        }
        
        function draw() {
          switch (gameState) {
            case "GAME-IN-PROGRESS":
              handeGameAction();
              showGameState();
              updateGameState();
              break;
          }
        }
        
        function keyPressed() {
          if (gameState == "GAME-IN-PROGRESS") {
            if (keyCode === LEFT_ARROW) {
              gameAction = "MOVE-LEFT";
            }
          }
        }
        
        function handeGameAction() {
          switch (gameAction) {
            case "MOVE-LEFT":
              moveLeft();
              gameAction = "";
              break;
            default:
              break;
          }
        }
        
        function moveLeft() {
          if (
            heroLanePosition > 0
          ) {
            heroLanePosition--;
          }
        }
        
        function setInitialValues() {
          textSize(32);
          fill(0);
          gameAction = "";
          rowCounter = 1;
          heroLanePosition = 1;
          gameStepTimer = new CoolDownTimer();
          gameStepTimer.setCoolDownInterval(900);
          gameStepTimer.startCoolDownTimer();
        }
        
        function generateCarStream() {
          let numberOfCars;
          for (let row = 1; row < 106; row++) {
            cars[row] = [];
            numberOfCars = 0;
            for (let column = 0; column < 3; column++) {
              if (
                random(1) < 0.5 &&
                numberOfCars < 2 &&
                row > 5 
              ) {
                cars[row][column] = "CAR";
                numberOfCars++;
              } else {
                cars[row][column] = "EMPTY";
              }
            }
          }
        }
        
        function showGameState() {
          displayBackground();
        
          showCars();
        }
        
        function showCars() {
          
          for (let row = 1; row < 6; row++) {
            for (let column = 0; column < 3; column++) {
              if (cars[rowCounter + row][column] == "CAR") {
                displayCar(row, column);
              }
            }
          }
          if (heroLanePosition >= 0 && heroLanePosition <= 2) {
            displayCar(0, heroLanePosition);
          }
        }
        
        function updateGameState() {
          if (gameStepTimer.coolDownTimeLeft() > 0) {
            return;
          }
        
          rowCounter++;
          gameStepTimer.startCoolDownTimer();
        }

Tag udgangspunkt i ovenstående kode ved at gå ind på koden (linket nedenfor) og vælge File → Duplicate

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

Giv spillet et navn og husk at gemme løbende.

Delopgave 1: Bilen kan bevæge sig til højre

Tilret så bilen også kan flytte sig til højre.

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

Løsningseksempel - Delopgave 1

Delopgave 2: Vis bilens position

Tilret så bilens position vises øverst til venstre.

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

Løsningseksempel - Delopgave 2

Delopgave 3: Vind løbet

Tilret så man kan vinde løbet

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

Løsningseksempel - Delopgave 3

Delopgave 4: Tab spillet ved kollision

Tilret så man taber spillet hvis man støder ind i de andre biler (dvs. hvis man ikke når at overhale)

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

Løsningseksempel - Delopgave 4

Delopgave 5: Tre liv

Tilret så man har tre liv.

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

Løsningseksempel - Delopgave 5

Delopgave 6: Hegn på begge sider

Sæt hegn op på begge sider af vejbanerne

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

Løsningseksempel - Delopgave 6

Delopgave 7: Manglende hegn til venstre

Tilret så hegnet til venstre nogle gange mangler

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

Løsningseksempel - Delopgave 7

Delopgave 8: Vis Pit stop

Tilret så Pit stop vises hvis der ikke er et hegn i venstre side af vejbanerne.

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

Løsningseksempel - Delopgave 8

Delopgave 9: Flyt bilen i Pit

Tilret så man kan flytte bilen i Pit

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

Løsningseksempel - Delopgave 9

Delopgave 10: Mist et liv ved ikke at pitte

Tilret så man mister et liv hvis man ikke kører i Pit

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

Løsningseksempel - Delopgave 10

Delopgave 11: Manglende hegn til højre

Tilret så hegnet til højre nogle gange mangler

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

Løsningseksempel - Delopgave 11

Delopgave 12: Mand med flag

Tilret så der vises en mand med et flag i stedet for det næst nederste højre hegn (hvis det mangler)

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

Løsningseksempel - Delopgave 12

Delopgave 13: Få brændstof

Tilret så man kan flytte bilen ud til højre for at få brændstof (hvis der står en mand med et flag)

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

Løsningseksempel - Delopgave 13

Delopgave 14: Mist et liv ved ikke at få brændstof

Tilret så man mister et liv hvis man ikke får brændstof

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

Løsningseksempel - Delopgave 14

Delopgave 15: Spillet bliver hurtigere

Tilret så spillet løbende (i intervaller) bliver hurtigere og hurtigere.

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

Løsningseksempel - Delopgave 15

Delopgave 16: Genstart spillet

Tilret så man kan genstarte spillet ved at klikke med musen

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

Løsningseksempel - Delopgave 16

Delopgave 17: Start besked

Tilret så der kommer en start besked.

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

Løsningseksempel - Delopgave 17

Delopgave 18: Billedsekvens ved start

Tilret så der kommer en lille billede sekvens når man klikker med musen efter man har fået vist start beskeden.

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

Løsningseksempel - Delopgave 18

Delopgave 19: Lyd-actions

Tilret så der kommer lyd når man laver de forskellige actions.

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

Løsningseksempel - Delopgave 19

Færdig løsning:

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