Klassinen muistipeli jossa etsit pareja kääntämällä kortteja. Harjoittele Reactin state-hallintaa, animaatioita ja pelilogiikkaa hauskan projektin kautta.
Aloittelija · 2-3 tuntia · Next.js, TypeScript, Tailwind CSS
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
Luo muistipeli (Memory Game). Pelilogiikka: - Ruudukko kortteja (4x4 = 16 korttia = 8 paria) - Klikkaa korttia kääntääksesi - 2 korttia käännettynä: tarkista pari - Pari löytyi: jätä näkyviin - Ei paria: käännä takaisin (viive) - Kaikki parit: peli voitettu Ominaisuudet: - Animoitu kortin kääntö - Siirtolaskuri - Ajastin - Konfetti voitossa Tech: Next.js, TypeScript, Tailwind CSS Tee visuaalisesti miellyttävä, selkeä UI.
Luo korttiruudukko.
Luo muistipelin pelilauta: 4x4 ruudukko kortteja. Kortit näyttävät aluksi selkäpuolen. Klikkaamalla kortti kääntyy.
Lisää parien tunnistus.
Lisää pelilogiikka: käännä 2 korttia, tarkista onko pari. Jos pari, jätä näkyviin. Jos ei, käännä takaisin. Laske siirrot.
Lisää voittonäkymä ja uusi peli.
Kun kaikki parit löydetty, näytä onnittelut, siirtojen määrä ja aika. Lisää "Pelaa uudelleen" -nappi joka sekoittaa kortit.
Korttien kääntäminen
Parien tunnistus
Pistelaskuri
Ajastin
Eri vaikeustasot
Kun perusprojekti on valmis:
Eri vaikeustasot (4x4, 6x6, 8x8)
Huipputulokset (localStorage)
Moninpeli
Teemat (eläimet, emoji, numerot)
Ääniefektit
Klassinen ristinolla-peli kahdelle pelaajalle tai tekoälyä vastaan. Opi pelilogiikkaa, vuoropohjaista peliä ja yksinkertaista tekoälyä rakentamalla tuttu klassikko.
Testaa ja paranna kirjoitusnopeuttasi pelillisellä harjoittelulla. Seuraa WPM-nopeuttasi, tarkkuuttasi ja kehitystäsi ajan myötä - hauska tapa oppia pelillistä ohjelmointia.
Monivalintapeli jossa testaat tietojasi eri kategorioissa. Rakenna pistelasku, vaikeustasot ja tuloslistat - loistava tapa oppia pelilogiikan perusteita.
Valitse työkalu ja käytä aloituspromptiä.