Klassinen muistipeli jossa etsit pareja kääntämällä kortteja. Harjoittele Reactin state-hallintaa, animaatioita ja pelilogiikkaa hauskan projektin kautta.
Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.
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.
Tässä projektissa rakennetaan seuraavat ominaisuudet:
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.
Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:
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.
Selaa kaikkia pelit projekteja tai tutustu muihin kategorioihin.