CSS on hankala juttu. Satoja ominaisuuksia, tusina tapaa keskittää lohko, ja justify-content, jossa on 12 arvoa, jotka vielä yhdistyvät safe- ja unsafe-määreisiin. Lunttilaput auttavat alkuun, mutta todellinen ymmärrys syntyy vain harjoittelemalla. Mieluiten ei tuotantoympäristössä kolmelta aamuyöstä.

Onneksi frontend-yhteisö keksi paremman tavan: pelit. Kyllä, oikeita selainpelejä, joissa ohjaat sammakoita, puolustat torneja, pelastat avaruusolentoja ja opit huomaamattasi flexboxin, gridin ja valitsimet. Ei teoriaa teorian vuoksi, vaan koodia, jonka näet toiminnassa välittömästi.

Olen kerännyt 8 ilmaista CSS-peliä, jotka toimivat oikeasti vuonna 2026. Jokainen kattaa tietyn aihealueen perusvalitsimista 3D-muunnoksiin. Lisäksi lopussa on video, jossa on täydellinen läpikäynti suosituimmasta pelistä, jos jäät jumiin jollakin tasolla.

💡 Pikakatsaus:

• Aloita Flexbox Froggysta: paras lähtökohta aloittelijoille, 24 tasoa ja välitön visuaalinen palaute, kattaa kaikki keskeiset flexbox-ominaisuudet.
• Siirry Grid Gardeniin ja opettele CSS Grid leikkimielisesti, 28 tasoa samoilta Codepipin tekijöiltä.
• Kehitä valitsintaitojasi CSS Dinerissä (32 tasoa): tämän jälkeen mikään :nth-child() ei pelota sinua.
• Hallitse edistyneet tekniikat: Flexbox Defense taistelutilaan, Unfold 3D-muunnoksiin, Roadmap lähdekoodin lukemiseen.

Pikavertailu: mikä peli kannattaa valita

Video: täydellinen Flexbox Froggyn läpikäynti ja jokaisen ominaisuuden selitys. Jos jäät jumiin jollakin tasolla, tarkista aikaleima kuvauksesta.

1. Flexbox Froggy

Tämä on luultavasti maailman tunnetuin CSS-peli. Codepip-studion tekemä peli vie sinut läpi 24 tason, yksinkertaisesta justify-content: flex-end -määrittelystä hankaliin yhdistelmiin, kuten flex-direction, align-items, align-content, flex-wrap, flex-flow and order. Mekaniikka on yksinkertainen: kirjoitat CSS-ominaisuuden, ja sammakko hyppää oikealle lumpeenlehdelle.

Viimeinen taso, 24, on legendaarinen. Se vaatii flex-direction: column-reverse -määrittelyn yhdessä flex-wrap: wrap-reverse ja align-content: space-between -määrittelyjen kanssa. Jos läpäiset sen ensimmäisellä yrittämällä, hallitset flexboxin täydellisesti.

🔗 Flexbox Froggy | 🔗 Lähdekoodi GitHubissa

2. Flexbox Defense

Tornipuolustuspeli, jossa torneina toimivat CSS-ominaisuudet. Tornisi on aseteltu ruudukkoon, ja tähdätäksesi ne vihollisiin kirjoitat justify-content- ja align-items-määrittelyjä. 12 tasoa kattavat align-items, justify-content, flex-direction, align-self and order -ominaisuudet.

Viimeiset 4 tasoa ovat vakava haaste jopa niille, jotka ovat jo läpäisseet Flexbox Froggyn. Ei vihjeitä: vain sinä, selain ja vihollisaallot. Tekijä, Channing Allen, julkaisi pelin GitHubissa täysin avoimena.

🔗 Flexbox Defense | 🔗 Lähdekoodi

3. Grid Garden

Flexbox Froggyn tekijöiltä, sama idea mutta CSS Gridille. Kastelet porkkanapenkkejä kirjoittamalla grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template-columns, grid-template-rows, grid-area and order. 28 tasoa, 4 enemmän kuin Froggyssa.

Peli menee perusjuttuja syvemmälle kuin grid-template-columns: 1fr 1fr. Tasoilla 25+ työskentelet grid-arean kanssa käyttäen nimettyjä alueita, tekniikkaa joka oikeissa projekteissa korvaa useimmat flexbox-viritykset gridien kanssa.

🔗 Grid Garden | 🔗 Lähdekoodi

4. CSS Diner

32 tasoa CSS-valitsimista, yksinkertaisesta platesta aina plate:only-childiin ja apple:not(.small)iin. "Tilaat" elementtejä pöydästä kirjoittamalla valitsimen oikealla olevaan editoriin. Reaaliaikainen korostus näyttää tarkalleen mitä olet valinnut.

Arvokkainta tässä ovat pseudoluokkia käsittelevät tasot. CSS Dinerin jälkeen rakenteet kuten :nth-child(2n+3), :last-of-type, :only-of-type eivät enää saa sinua avaamaan MDN:ää. Ja taso 32 (plate pickles + apple:not(.small)) on arvokas finaali niille, jotka haluavat kutsua itseään valitsinasiantuntijoiksi.

🔗 CSS Diner | 🔗 Lähdekoodi

5. Unfold

Teknisesti tämä ei ole peli vaan Chris Ruppelin tekemä interaktiivinen esitys CSS 3D -muunnoksista. Skrollaat, ja sivu avautuu kolmiulotteisessa tilassa. rotateX, rotateY, translateZ, perspective: kaikki mikä dokumentaatiossa kuulostaa pelottavalta näytetään tässä visuaalisesti.

Ei tarvitse kirjoittaa riviäkään koodia. Skrollaa vain, katso kuinka litteä suorakulmio muuttuu kuutioksi ja lue tekijän kommentit. Tämän jälkeen 3D-muunnokset eivät enää tunnu mustalta magialta.

🔗 Unfold | 🔗 Lähdekoodi

6. Roadmap

Pieni arcade-peli Victor Darrasilta: auto liikkuu tiellä, ja ohjaat sitä hiirellä. Koko peli on kirjoitettu puhtaalla CSS:llä ja HTML:llä, ei riviäkään JavaScriptiä. Tämä tarkoittaa, että voit avata DevToolsin ja nähdä tarkalleen, miten clip-path, transform ja @keyframes-animaatiot toimivat.

Peli itsessään ei opeta CSS:ää suoraan. Mutta lähdekoodin tutkiminen on minikurssi edistyneisiin tekniikoihin. Minulta meni 8 yritystä voittaa.

🔗 Roadmap CodePenissä

7. Carnival

Ampumarata puhtaalla CSS:llä, tekijänä Una Kravets Google Chromen tiimistä. Sinulla on 8 sekuntia aikaa osua kaikkiin maaleihin. Kaikki logiikka perustuu valintaruutuihin ja CSS-animaatioihin: maalit liikkuvat, ilmestyvät ja katoavat ilman yhtäkään riviä skriptiä.

Alla oleva CodePen-linkki vie koko lähdekoodiin, voit haarukoida sen, säätää ajoituksia @keyframes-määrityksissä ja tehdä oman versiosi. Erinomainen harjoitus sen ymmärtämiseen, miten pitkälle pelkällä CSS:llä voi päästä.

🔗 Carnival CodePenissä

8. Ristinolla

Klassikko yllättävällä toteutuksella: ristinolla ilman JavaScriptiä. Alvaro Montoro toteutti pelilogiikan yksinomaan valintaruuduilla, :checked-näennäisluokalla ja CSS-animaatioilla. Kaksi vaikeustasoa, toisella tietokone "ajattelee" hieman paremmin (niin pitkälle kuin ilman skriptejä on mahdollista).

Käytännön hyöty: lähdekoodin tutkittuasi ymmärrät, miten vierekkäisselektorit (+) ja :checked toimivat, ja miten pelkillä tyyleillä rakennetaan monimutkaista logiikkaa. Pienprojekteihin ja demoihin tämä on korvaamaton tekniikka.

🔗 Ristinolla CodePenissä

⁉️🤔 Usein kysytyt kysymykset

Auttaako nämä pelit täysin aloittelijaa, joka ei osaa CSS:ää lainkaan?

Kyllä, juuri sitä varten ne on luotu. Aloita Flexbox Froggysta, peli vie sinut justify-content: flex-start -arvosta monimutkaisiin yhdistelmiin ilman aiempaa osaamista. Pidä MDN:n Flexbox-dokumentaatio rinnalla auki kontekstin vuoksi. Parissa kolmessa illassa käyt flexbox-aiheen kokonaan läpi.

Onko peleissä mitään järkeä kokeneelle kehittäjälle?

Kyllä, mutta valikoiden. Flexbox Froggyn sijaan (ensimmäiset 15 tasoa ovat tylsiä) ota suoraan Flexbox Defense, jossa on taistelutunnelma ja tiukemmat rajoitteet. Grid Garden on hyödyllinen myös niille, jotka kirjoittavat grid-template-columns-määrityksiä päivittäin: tasot 25+ ja grid-area esittelevät tekniikoita, joita näkee harvoin tutoriaaleissa. CSS Dinerin tasot 25-32 ovat paras testi pseudoluokkien osaamiselle.

Miksi pelejä eikä videokurssia tai dokumentaatiota?

Pelit antavat välitöntä visuaalista palautetta: kirjoitit align-items: center ja näit heti sammakon hyppäävän keskelle. Tämä on perustavanlaatuinen ero videon passiiviseen katseluun: lihasmuisti muodostuu, koska kirjoitat koodia itse. Lisäksi haaste-elementti: halu läpäistä seuraava taso pitää sinut mukana paremmin kuin mikään takaraja.

Vastaavatko nämä pelit moderneja CSS-spesifikaatioita (2026)?

Kyllä. Flexbox ja Grid ovat kypsiä spesifikaatioita, niiden perusominaisuudet eivät ole muuttuneet vuosiin. Uusia ominaisuuksia, kuten align-content normaalissa flow'ssa (2024) tai if()-ehdot (2025), nämä pelit eivät kata, mutta ne ovatkin niche-toimintoja, joita ei tarvita päivittäisessä työssä. Valtaosaan todellisista asetteluista näiden pelien opettamat asiat riittävät.

Mitä teen, jos peli ei toimi selaimessani?

Kaikki 8 peliä on testattu Chromella ja Firefoxilla, ongelmia ei löytynyt. Jos peli ei lataudu: tarkista, onko JavaScript estetty (Flexbox Defense ja Roadmap vaativat skriptejä); kokeile avata incognito-tilassa (laajennukset rikkovat joskus asettelun). CodePenissä olevat Tic-Tac-Toe ja Carnival saattavat vaatia "Run"-painikkeen painamista käynnistyäkseen.

Kannattaako CSS-pelejä pelata vuonna 2026?

Nämä 8 peliä eivät ole vain yhden illan viihdettä. Jokainen paikkaa tietyn aukon: Flexbox Froggy ja Flexbox Defense yhdessä antavat täydellisen flexbox-kattauksen eri näkökulmista, Grid Garden on kivuttomin sisäänpääsy CSS Gridiin, CSS Diner opettaa valitsimet ilman ulkoa opettelua, ja Roadmap, Carnival sekä Tic-Tac-Toe näyttävät, miten pitkälle pelkällä CSS:llä voi päästä.

Jos olet aloittelija, aloita Froggysta, sitten Grid Garden, sitten Diner. Kolme iltaa, ja hallitset suurimman osan siitä, mitä työssä oikeasti tarvitset. Jos olet kokenut, ohita Froggyn 15 ensimmäistä tasoa, mutta käy ehdottomasti CSS Diner loppuun asti ja tutki Carnivalin lähdekoodi. Molempiin menee alle tunti.

Kaikki 8 peliä ovat ilmaisia, avoimia (paitsi Roadmap, jonka lähdekoodi on luettavissa suoraan DevToolsissa) ja toimivat vuonna 2026 ilman muutoksia. Ei rekisteröitymistä, ei maksullisia paketteja. Avaa ensimmäinen peli ja kirjoita CSS:ää.