Žaidimas naudojant tik HTML / CSS

Papasakosime, kaip sukurti žaidimuką nenaudojant JavaScript ir kitų skriptų. Naudojamas tik HTML ir CSS.

Šiuo atveju šis žaidimas nebus sudėtingas.

Planas

Sukursime visiems žinomą žaidimą Duck Hunter. Taigi ko mums reikės:

• Skraidančių ančių;
• Kad galėtume į jas šaudyti;
• Už šaudymą gautume taškus.

Šiam sumanymui reikės visai nedaug:

<!-- Antys -->
<input type="checkbox" class="duck">
<input type="checkbox" class="duck">
<input type="checkbox" class="duck">
<input type="checkbox" class="duck">
<input type="checkbox" class="duck">

<!-- Taškai -->
<div class="score"></div>

Beveik viskas.

Sumanymas toks, kad antys - tai skraidantys langeliai, kurie turi du statusus: checked ir unchecked. Stilizuoti langelių mes negalime, taigi į darbą pasitelksime pseudo elementus :before ir :after.

background: url(../img/duck_light.png) no-repeat left center;

Leidžiame jiems skraidyti pasinaudoję css animacija:

@keyframes antisFly {
 0%{
  left: 150%;
  top:10%;
 }
 25%{
  left: 80%;
  top:50%;
 }
 50%{
  left: 50%;
  top:30%;
 }
 75%{
  left: 30%;
  top:40%;
 }
 100%{
  left: -50%;
  top:10%;
 }
}

Tuo pirmas etapas baigtas. Sukurtos antys ir jos skraido.


Šaudome antis

Kada mes spaudžiame ant ančių? Teisingai, tada kai šaudome į jas. Žinoma, pataikius į antį ji turi mirti ir tuo atveju užskaitytas taškas. Anties mirtį įveikiame selektoriumi .duck.checked. Tiesa yra vienas klaustukas - anties skrydis - tai animacija, o jos stiliaus animacija turi pranašumą, taigi paprasčiausiai turime užklausti, pavyzdžiui:

left: -50%;
opacity: 0;
z-index: -5;

Kas gali būt stipriau už animaciją (prioritetas)? Tik kita animacija. Taigi numirusi anti bus pozicionuojama su animacija:

@keyframes antisDie {
 0%{
  left: -50%;
 }
}

Tiesą sakant toks pozicionavimas reikalingas tik tam, kad antis daugiau neužimtų vietos ekrane ir nebūtų galimybės netyčia jąją paspausti.

Skaičiuojame taškus

Primename, kad mums reikia sužinoti kiekį ančių su checked būkle. Taigi tam yra funkcija counter-increment. counter-increment padidina skaitiklį po vieną vardo, kurį nurodome.

.duck:checked{
 counter-increment: score;
}

Taigi kiekvienas elementas, tinkantis selektoriui .duck:checked padidina mūsų skaitliuką score.

Turime taškų skaitliuką. Liko jį atvaizduoti žaidime. Tai padarysime su css content:

.score:after{
 content: counter(score);
}

Taigi apibendrinant sužinojome...

1. Kokios įspūdingos šiuolaikinės technologijos;
2. Jeigu geram lygmenyje naudoji nors vieną technologiją, tai gali sukurti kažką įspūdingo;

Žaidimo source kodą galite parsisiųsti iš čia: SIŲSTIS
Bei žaidimo demonstracinė versija: Išbandyti



Pasiremta: habrahabr.ru