Klassinen käärme-peli modernilla toteutuksella ja tyylikkäällä ulkoasulla. Opi canvas-piirtämistä, pelisilmukkaa ja törmäystunnistusta rakentamalla ikiklassikko alusta asti.
Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.
Luo Snake-peli HTML Canvas + React. Pelimekaniikka: - Käärme liikkuu jatkuvasti yhteen suuntaan - Nuolinäppäimet vaihtavat suuntaa - Ruoan syönti = kasva + pisteet - Törmäys seinään tai itseensä = game over Canvas: - Ruudukko (esim. 20x20) - Käärme: vihreä (pää kirkkaampi) - Ruoka: punainen - Tausta: tumma Ominaisuudet: - Pistelaskuri - Nopeus kasvaa pisteiden myötä - Huipputulokset localStorage - Pause (välilyönti) Tech: Next.js, TypeScript, Canvas API
Tässä projektissa rakennetaan seuraavat ominaisuudet:
Piirrä pelikenttä ja käärme.
Luo Snake-peli canvas-elementillä. Piirrä ruudukko ja käärme (pään väri eri kuin häntä). Käärme liikkuu automaattisesti nykyiseen suuntaan.
Lisää ohjaus ja ruoan syönti.
Lisää nuolinäppäin-ohjaus käärmeen suunnan vaihtamiseen. Lisää ruoka satunnaiseen paikkaan. Kun käärme syö ruoan, kasva ja generoi uusi ruoka.
Lisää game over ja huipputulokset.
Lisää törmäyksen tunnistus: seinään tai itseensä = game over. Näytä pisteet (syödyt ruoat). Game over -näkymä huipputuloksilla ja restart-napilla.
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.
Klassinen muistipeli jossa etsit pareja kääntämällä kortteja. Harjoittele Reactin state-hallintaa, animaatioita ja pelilogiikkaa hauskan projektin kautta.
Testaa ja paranna kirjoitusnopeuttasi pelillisellä harjoittelulla. Seuraa WPM-nopeuttasi, tarkkuuttasi ja kehitystäsi ajan myötä — hauska tapa oppia pelillistä ohjelmointia.
Selaa kaikkia pelit projekteja tai tutustu muihin kategorioihin.