Kirjoitusnopeuspeli

Testaa ja paranna kirjoitusnopeuttasi pelillisellä harjoittelulla. Seuraa WPM-nopeuttasi, tarkkuuttasi ja kehitystäsi ajan myötä - hauska tapa oppia pelillistä ohjelmointia.

Aloittelija · 2-3 tuntia · Next.js, TypeScript, Tailwind CSS

Aloitusprompt

Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.

Luo kirjoitusnopeuspeli (typing test).

Pelimekaniikka:
- Näytä teksti joka pitää kirjoittaa
- Input-kenttä kirjoittamiseen
- Korosta: vihreä = oikein, punainen = väärin
- 60 sekunnin testi

Mittarit:
- WPM (words per minute)
- Tarkkuus (%)
- Oikeat/väärät kirjaimet

Pelin jälkeen:
- Näytä lopputulos
- Tallenna huipputulokset
- "Yritä uudelleen" -nappi

Sanadata: Käytä suomenkielisiä tai englanninkielisiä sanoja.

Tech: Next.js, TypeScript, Tailwind CSS

Vaiheet

1. Perusnäkymä

Luo kirjoituskenttä ja tekstinäyttö.

Luo kirjoitusnopeuspelin UI: teksti joka pitää kirjoittaa, input-kenttä kirjoittamiseen. Korosta oikein/väärin kirjoitetut kirjaimet reaaliajassa.

2. Mittarit ja laskurit

Lisää WPM ja tarkkuus.

Lisää reaaliaikaiset mittarit: WPM (sanat per minuutti), tarkkuusprosentti, jäljellä oleva aika. Käynnistä ajastin kun käyttäjä aloittaa kirjoittamisen.

3. Tulokset ja leaderboard

Tallenna ja näytä parhaat tulokset.

Kun aika loppuu, näytä lopputulokset: WPM, tarkkuus, kirjoitetut sanat. Tallenna huipputulokset localStorageen ja näytä top 10.

Ominaisuudet

Satunnaiset sanat/lauseet

WPM-laskuri

Tarkkuusmittari

Ajastin

Huipputulokset

Laajennusideat

Kun perusprojekti on valmis:

Eri kielivaihtoehdot

Vaikeustasot (helppo, keski, vaikea)

Koodausmoodi (kirjoita koodia)

Kilpailu kaveria vastaan

Päivittäiset haasteet