Øvelse: Puslespil med PImage og multidimensionelle arrays

Formål:

• At lære at arbejde med multidimensionelle arrays i Processing.
• At lære at bruge `PImage` til at manipulere og opdele billeder.
• At arbejde med grafisk output og brugerinput (`mousePressed`) i Processing.
• At forstå hvordan man kan kombinere data-modeller (2D-array) med visuelle elementer.

Beskrivelse: I denne øvelse skal du lave et simpelt puslespil i Processing.

Opgaven går ud på at:

1. Vælge et billede (`PImage`) og opdele det i fx 3×3 eller 4×4 brikker.
2. Gemme hver brik i et 2D-array (`PImage[][]`).
3. Tegne puslespillets brikker i et gitter i `draw()`.
4. Lade spilleren bytte to brikker ved at klikke på dem.
5. Eventuelt kontrollere, om puslespillet er samlet korrekt.

Man kunne evt. anvende nedestående billede:

Hints / vejledning:

• 1. Opdel billedet i brikker*
  • Brug `get(x, y, w, h)` på dit `PImage` til at hente en del af billedet.

Eksempel:

PImage brik = original.get(j*brikBredde, i*brikHøjde, brikBredde, brikHøjde);

* Gem hver brik i et 2D-array: `brikker[i][j]`.

• 2. Tegn brikkerne*
  • Brug nested loops til at tegne arrayet:

image(brikker[i][j], j*brikBredde, i*brikHøjde);

• 3. Bland brikkerne (shuffle)*
  • Byt brikkerne rundt flere gange, fx ved at bytte to tilfældige brikker.
  • Det er op til dig, hvordan du vil lave “blandingen”.

• 4. Flyt brikker med musen*
  • Brug `mousePressed()` til at finde, hvilken brik der blev klikket på:

int i = mouseY / brikHøjde;
int j = mouseX / brikBredde;

* Gem første klik og andet klik, og bytte brikkerne i arrayet.

• 5. Tjek om puslespillet er samlet*
  • Loop igennem `brikker` og tjek, om hver brik ligger på sin oprindelige position.
  • Hvis ja, kan du fx vise en besked: “Puslespillet er løst!”.

Ekstra udfordringer:

• Lav puslespillet større (4×4 eller 5×5).
• Tilføj antal træk eller timer.
• Fremhæv klikbare brikker med `stroke()` eller `rect()`.
• Lav en funktion til at reset puslespillet.