Reaksjonsspill

Skip to content

Vanskelighetsgrad: Hard

I denne oppgaven skal du lage en nettside som har et reaksjonsspill. Nettsiden skal starte blå, dermed skal den bli rød når du trykker, så skal nettsiden etter en tilfeldig tid endre farge til grønn, så er målet å trykke så fort som mulig!

Ting du skal ha med:

HTML/CSS
  • ✅ En knapp som starter spillet, gjør denne knappen ganske stor.
  • 🟦 Hele siden skal ha en bakgrunnsfarge. Den skal være blå, gi den en class som for eksempel waiting“
  • 🟥 Legg også til en class som heter active som skal ha bakgrunnsfarge som er rød.
  • 🟩 Til slutt skal det være en class som heter pressed, som har bakgrunnsfarge som er grønn.
  • ⏰ Det skal være et tekst-element på siden som skal brukes til å holde styr på hvor fort du “reagerte”.
JavaScript
  • Logikken skal være slik:
    • Når du trykker knappen som starter spillet skal scriptet velge en tilfedlig timeout. Se på setTimeout() her: w3schools timeout.
      • Her må du bruke Math.random() for å velge et tilfeldig tall. Se på random på w3schools random.
    • Bakgrunnen skal endres til rød når spilet er aktivt.
    • Når tiden går ut skal siden endres til grønn. På dette tidspunktet skal du begynne å ta tiden på hvor lang tid det tar før spilleren trykker (reaksjonstiden). Helst sett denne tilfeldige tiden til minst 1 sekund og maks 10 sekunder.
    • Når knappen trykkes skal du stoppe tiden å finne ut tiden mellom start og slutt. Vis dette på nettsiden.

Hvordan endre på bakgrunnsfargen?

  • I JavaScript DOM-manipulering finnes noe som heter classList. Les om dette her: classList w3schools.
  • Med classList kan du legge til eller ta vekk class-es fra et HTML element. Slik kan du endre bakgrunnsfargen dynamisk!

Ekstra utfordringer: Hard

  • Gjør spillet om til å kunne bruke space eller enter for å starte å stoppe spillet.
  • Legg til slik at du ikke kan “reagere” for tidlig på spillet. Gi en tilbakemelding om du var for tidlig ute.

Ekstra ekstra utfordringer: Cracked

  • Legg til en “mode” der du kan ta gjennomsnittet av 5 runder.
  • Legg til en top 10 liste av beste reaksjonstider.
  • Legg til en “mode” til der du kan spille med to spillere.
    • Legg til slik at en spiller bruker for eksempel space og den andre bruker enter. Den spilleren som reagerer fortest vinner et poeng.
    • Hvordan du bestemmer en vinner er opp til deg.