Minesweeper-klone

Skip to content

Warning!

Denne oppgaven er ekstremt krevende.

Vanskelighetsgrad: Smoked

I denne oppgaven skal du lage en Minesweeper-klone 💣. Hvis du aldri har spilt Minesweeper før kan du finne en online versjon å spille her: Minesweeper Online.

Om spill-logikken

🧩 Minesweeper er i bunn og grunn et ganske enkelt spill. Her er hvordan logikken fungerer:

2️⃣ Hver “celle”, altså rute i spillet er i en av to mulige tilstander.

Enten:

  • ⭕ En tom celle
  • 💣 En “mine”

Tallene som kommer opp i en Celle er antall miner som finnes rundt den cellen.

Eksempler på hvorfor tallene er som de er:

Minesweeper Example 1
Minesweeper Example 2

Hva skjer?
  • På første eksempel er det en mine midten. Cellene rundt sjekker alle 8 cellene rundt seg selv, tallet er hvor mange miner det er rundt.
  • Andre eksempel kan du se litt flere tall. Hvis du teller rundt hvert tall kan du se at tallet stemmer med antall miner.

Når en celle trykkes skal den “åpnes” og tallet på antall miner rundt skal vises.

Hvis cellen viser 0, betyr det at det ikke finnes noen miner i nærheten. I så fall skal spillet automatisk åpne alle cellene rundt. Dette kalles ofte en “cascade” eller “flood fill“-effekt. Dette gjør at store tomme områder åpnes på én gang, akkurat som du kan se i ekte Minesweeper. Vanligvis vises 0 miner som ingen tekst, men dette er opp til deg om du vil gjøre eller ikke.

Hvis cellen derimot inneholder en mine, taper spilleren umiddelbart og alle miner avsløres.

Spillet vinnes når alle celler uten miner er åpnet, uavhengig av om spillerne har markert alle miner riktig eller ikke.

For å hjelpe seg selv kan spilleren høyreklikke på celler for å sette et flagg 🚩 der de tror en mine ligger. Dette påvirker ikke logikken direkte, men hjelper spilleren å holde oversikt.

Brettet:

Slik fungerer brett-lagings logikken:

  • 🏁 Spillet starter med et rutenett (for eksempel 10x10).
  • 💣 Et visst antall miner plasseres tilfeldig.
  • 🟰 Deretter regnes antall miner rundt hver celle ut, ved å sjekke alle naboceller (opp, ned, venstre, høyre og diagonalt).

På denne måten bygges selve spillebrettet — resten handler bare om å reagere riktig når cellene åpnes.

Hvordan skal dette lages?

HTML
  • 🗒️ En dropdown meny der du kan velge vanskelighetsgrad. Her er normal vanskelighetsgrader i Minesweeper:
Vanskelighetsgrad Brettstørrelse Antall miner
Beginner 9x9 10 miner
Intermediate 16x16 25 miner
Expert 16x30 99 miner
  • En knapp som starter spillet.
  • En tom <div> som skal brukes til å lagre spillbrettet. Gi denne en id som board.

Resten av brettet skal bli generert fra JavaScript siden vi ikke vet med en gang hvor stort brettet blir. Her skal DOM-Manipulering brukes.

Men her er litt om hvordan brettet skal fungere.

  • Brettet skal være i en <div>. Inni dette elementet kan du lage rekker med <div> elementer som er hver celle.
  • Cellene trenger ikke å holde informasjonen om de er en mine eller ikke.
  • Gi hver celle en id ved hjelp av JavaScript som c-x-y, F.ex: c-0-0, c-0-1, c-1-2, også videre. x og y er koordinatene til cellen.
    • Grunnen til en slik struktur er for å gjøre det lett å hente ut en spesifikk celle på en spesifikk koordinat.
  • Hver celle skal ha en onClick() og en onContextMenu() for å håndtere venstre og høyre klikk.
CSS
  • 👍 Her er det litt opp til deg om du vil gjøre det nøyaktig til ekte Minesweeper eller ikke.
  • 🎨 Under kan du se fargene som brukes til et nøyaktig Minesweeper spill:
Element Farger
Celle-Ramme (top, bottom, left, right): (#ffffff, #808080, #ffffff, #808080)
Celle-Bakgrunn #c0c0c0
Tall 1: #0100fe, 2: #017f01, 3: #fe0000, 4: #00007f
5: #810102, 6: #008081, 7: #000000, 8: #808080
JavaScript

Dere kommer til å trenge en haug med logikk her.

Først ville jeg ha tenkt på klasser dere kan trenge (JavaScript klasser).

Les på klasser her JavaScript Classes.

Her kan dere ha følgende:

  • Klasse for å holde styr på brettet.
  • Dette brettet kan være en 2D-liste med “Celle”-klasser. Cellene kan holde styr på om de er en mine og åpnet. Bruk boolean verdier for å holde styr på dette: (booleans).
    • En 2D-liste er egentlig bare en liste med lister. Du kan se litt på logikken på disse her: 2D-Lister.

Basert på innholdet i disse klassene kan du ha en funsksjon som heter drawBoard(), som genererer alle HTML-elementer (basert på brett-klassen) som skal til får å vise hele Minesweeper spillet.

Når du starter spillet skal antall miner plasseres tilfeldig utover brettet. Pass på å ikke plassere to miner på samme rute, hvis dette skjer, flytt den.

Du har kun en viss mengde flagg. Når du går tom for flagg kan du ikke plassere flere. Du kan ta vekk flagg for å få tilbake flagg for å plassere igjen. Antall flagg du har er det samme som antall miner som eksisterer.

  • Bruk venstre museknapp for å “reveale” celler.
  • Bruk høyre museknapp for å plassere eller ta vekk flagg. 🚩
Tips til algoritmer
Nabo-celler

For å hente ut antall miner i en celle må du hente ut de 8 nabo-cellene i en sirkel.

Pseudokode for dette:

var mineCount = 0; 

for (var xi = x - 1; xi <= x + 1; xi++) {
    for (var yi = y - 1; y1 <= y + 1; yi++) {
        // her legger du inn logikken for telling
    }   
}

Pass! Du må huske å sjekke om cellen du henter ut er utenfor brettet eller ikke. (mindre enn 0 eller større enn bredden/høyden).

Reveale tomme nabo-celler

Her må en rekursiv algoritme til. Her er det tekniske om rekursive algoritmer: Recursion Wikipedia.

Du sjekker naboer på samme måte som for Nabo-celler, også tar du rekursivt å åpner disse til du når en ende.

Rutene som skal bli “revealed” rekursivt må ikke være i følgende status:

  • Ikke aktive (altså revealed)
  • Ikke et flagg 🚩
  • Ikke en mine 💣
  • Må ikke være “utenfor” brettet
  • Må ikke ha noen nabominer
Sjekke om du har vunnet
  • Her sjekker du alle cellene på hele brettet.
  • Hvis en celle som ikke er en mine ikke er “revealed” ennå så har du ikke vunnet.
  • Kun når alle “ikke-mine”-celler er “revealed” vinner du.
Sjekke om du har tapt

Dersom du trykker direkte på en mine, sprenger den og du taper ummidelbart. Etterpå “reveales” hele brettet.

Ellers: Lykke til! Denne oppgaven er ekstremt vanskelig å få til.

Ekstra ting du kan legge til hvis du vil!

  • Legg til en stoppeklokke som tar tiden din.
  • Legg til en teller som viser hvor mange flagg du har igjen.
  • Legg til “first move protection” som gjør at første trekket ditt aldri kan plasseres på en mine.
    • Her kan du også gjøre det slik at første klikk i det minste lager et 3x3 sikkert område.
  • High-score system.

Andre varianter av Minesweeper!

  1. Du kan legge til to typer miner, positive og negative. De positive gjør +1 på minetallet til en celle, de negative gjør -1.
  2. Du kan endre på mine-sjekkings logikken til å bruke “Knight”-move fra sjakk, slik at antall miner er basert på en L unna cellen.