Klassinen käärme-peli modernilla toteutuksella ja tyylikkäällä ulkoasulla. Opi canvas-piirtämistä, pelisilmukkaa ja törmäystunnistusta rakentamalla ikiklassikko alusta asti.
Keskitaso · 3-5 tuntia · Next.js, TypeScript, Tailwind CSS, Canvas
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
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
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.
Canvas-piirto
Näppäinkontrollit
Pistelaskuri
Kasvava käärme
Game over -logiikka
Kun perusprojekti on valmis:
Eri pelimoodit (seinätön, esteitä)
Power-upit
Mobiilituki (swipe)
Multiplayer
Eri teemat/skinit
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.
Valitse työkalu ja käytä aloituspromptiä.