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

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

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.

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

// GrandPrixInitialCode - Add so that hero 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();
}