IT rekvalifikácia. Seniorní programátori zarábajú až 6 000 €/mesiac a rekvalifikácia je prvým krokom. Zisti, ako na to!

Hra v jQuery - Streľba na terč

Vítam vás u tohto tutoriálu. Ukážeme si, ako vytvoriť jednoduchú hru - strieľanie na terč - za pomoci jQuery a HTML & CSS.

Súbory

Najprv si vytvoríme potrebné súbory. Budú to:

  • index.html
  • terc.css
  • terc.js

Ďalej budeme potrebovať súbory

  • bum.mp3
  • not.mp3
  • terc.png
  • crosshair.png

Tieto súbory nájdete v priloženom archíve na konci článku.

Začíname

Index.html

Prejdime do súboru index.html. Otvorte si ho vo svojom obľúbenom editore a vložte zjednodušenú HTML kostru.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Terče</title>
</head>
<body>

</body>
</html>

Do hlavičky si nalinkuje jQuery, jQuery UI (stačí JS, CSS nepotrebujeme) a naše súbory.

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="terc.js"></script>
<link rel="stylesheet" href="terc.css" type="text/css">

Keďže budeme prehrávať zvuky pri zásah (bum.mp3) aj pri netrefení (not.mp3), vytvoríme si 2 elementy audio. Kto má starý prehliadač, má smolu :) . Do časti body preto vložíme nasledujúci kód.

<audio id="bum" src="bum.mp3"></audio>
<audio id="nic" src="not.mp3"></audio>

Ďalej budeme zobrazovať štatistiky a zostávajúci čas. To urobíme jednoducho.

<h1 style="float: right">
  <span id="shot">0</span>:<span id="miss">0</span><br>
  <span id="time">90</span>
</h1>

V prvom span sa budú zobrazovať fragy, v druhom strely mimo a v treťom zostávajúci čas s východiskovou hodnotou 90.

No a na koniec samozrejme niečo, čím budeme mieriť.

<img id="crosshair" src="crosshair.png">

Štýly

Základ už máme. Teraz prejdime do súboru terc.css, v ktorom budeme stylovať.

Najprv tagy html a body. Keďže budeme využívať celú plochu monitora pre zobrazovanie terčíkov, potrebujeme ju roztiahnuť. To docielime, keď nastavíme width a height na 100%. Ďalej zrušíme okraje a to tak, že nastavíme margin na OPX. Ak používateľ nabehne sa zameriavačom moc na kraj, vyskočí mu scrollbar, čo tiež nie je práve najlepšia. Scrollbar schováme tak, že nastavíme overflow na hodnotu hidden. A ako posledná vec schováme kurzor. Neviem ako vám, ale mne tam celkom vadí. Jednoducho nastavíme cursor na none.

Prvá časť teda bude vyzerať takto.

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  cursor: none;
}

Prejdeme k zameriavači. Tu toho nebude moc, len potrebujeme nastaviť pozíciu na absolútnu, aby sa mohol "pohybovať ako bude chcieť" a z-index na nejakú vyššiu hodnotu (napríklad 100000 :) ). Druhá časť teda bude vyzerať nejako takto.

#crosshair {
  position: absolute;
  z-index: 100000;
}

Prejdeme k 3., poslednej časti. A to budú samotné terčíky. Ak ste si už stiahli priložený súbor a pozerali sa na obrázky, asi ste si všimli, že obrázok má 128px. To je celkom dosť, preto si ho zmenšíme pomocou CSS na nejakých 48px. Opäť nastavíme absolútnu pozíciu. Posledná časť teda bude vyzerať takto

.terc {
  position: absolute;
  width: 64px;
  height: 64px;
}

Ako to bude fungovať

Teraz sa konečne dostávame k zaujímavejšie časti - a to jQuery. Prejdeme do súboru terc.js.

Začneme nasledujúce funkcií

$(function(){

});

A môžeme začať písať kód.

Browser-akcia

Pri hraní, hlavne takýchto hier celkom dosť rozčuľujú predvolený browser-akcie, ako je napríklad preťahovanie obrázkov, označovanie textu, kontextové menu ... To všetko povypínáme. Označovanie textu môžeme zakázať pomocou funkcie .disableSelection () z jQuery UI. Pre zakázanie kontextového menu a preťahovaní obrázkov nabindujeme eventy dragstart a ContextMenu. Do funkcií vložíme jednoducho return false ;. Kód bude vyzerať nejako takto

$(document)
  .disableSelection()
  .on("dragstart", "img", function() {
         return false;
       })
  .on("contextmenu", function(){
         return false;
       });

Zakázané.

Zameriavač

Pravdepodobne ste si všimli, že nám zameriavač nejako nereaguje. Myslím, že je čas s ním trochu pohnúť. Pohybovať s ním budeme tak, že mu budeme meniť vlastnosti LEFT a TOP podľa toho, kde je práve kurzor myši.

Nabindujeme si event mousemove, funkciu dáme parameter e. Potom jednoducho zmeníme vlastnosti na e.pageY a e.pageX (+ px). Pre detail môžeme ešte odpočítať hodnotu 24, aby myška sedela presne na stredu.

Na pridávanie px si môžeme vytvoriť funkciu, môžeme ju pomenovať napr. Px :) .

function px(number)
{
  return number + "px";
}

Kód môže vyzerať nejako takto

$("body").mousemove(function(e){
   $("#crosshair")
    .css("top", px(e.pageY-24))
    .css("left", px(e.pageX-24));
});

Ak si to teraz vyskúšate, zistíte, že sa zameriavač pohybuje.

A teraz si vyrobíme klikanie. Nabindujeme si event click, funkciu opäť pridáme parameter e.

Pre výber elementu použijeme funkciu document.elemen­tFromPoint (x, y), ktorej výstup si uložíme do premennej element. Namiesto X a Y dosadíme hodnoty z e.pageX a e.pageY. Ak by sme ale niekam klikli, zistíme, že nám funkcia vždy vráti #crosshair. Je to kvôli z-index. Preto pred volaním tejto funkcie nastavíme z-index na -1 a potom ho vrátime späť.

Ďalej potrebujeme zistiť, či má element triedu "terc" (terčík), alebo nie (strela mimo). To zistíme pomocou funkcie .hasClass () na premennú element.

Ak túto triedu má, jedná sa o terčík a môžeme pokračovať. Terčík necháme "vybuchnúť" pomocou funkcie .effect. Efekt bude "explode" s dobou 500ms. Keďže by sa nám terčíky po dlhšej dobe nahromadili (funkcia .effect nastaví po výbuchu display: none, takže tam stále zostáva), zavoláme funkciu pre odstránenie elementu s oneskorením 500ms. Ako posledný vec spustíme zvuk "BUM" (pomocou .trigger ( "play")) a pripočítame bod za trefu.

Ak objekt nie je terčík, spustíme zvuk "NIC" a pripočítame bod za strelu mimo.

Celý kód bude vyzerať nejako takto

$("#crosshair").click(function(e){
    $(this).css("z-index", "-1");
    element = document.elementFromPoint(e.pageX, e.pageY);
    $(this).css("z-index", "10000");

    if($(element).hasClass("terc"))
    {
        $(element).effect("explode", false, 500);
        setTimeout(removeEl(element), 500);

        function removeEl(el)
        {$(el).remove();}

        $("#bum").trigger("play");
        $("#shot").text(parseInt($("#shot").text())+1);
    }
    else
    {
        $("#nic").trigger("play");
        $("#miss").text(parseInt($("#miss").text())+1);
    }
});

Terčíky

Tak, strieľanie nám funguje, ale stále nemáme terčíky. Takže samé záporné body o_O . Musíme to napraviť!

V premennej generované vytvoríme interval na 1 sekundu s volaním funkcie generateNext (ktorú si hneď vytvoríme). Potom si vytvorte funkciu generateNext.

Vytvoríme si ešte jednu funkciu, ktorá nám bude generovať náhodnú pozíciu.

function randomPosition(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Vytvoríme si premenné posX a POSY, do ktorých si uložíme náhodou pozíciu terčíka. Náhodou pozícii získame takto - randomPosition (48, $ ( "body"). Width () - 48); (Pre šírku. Pre výšku nahradiť width height).

Konečne vložíme terčík a to takto:

$("body").append('<img src="terc.png" class="terc" style="top:'+posY+'px;left:'+posX+'px;">');

Odrátame jednu sekundu z odpočítavanie a otestujeme, či tam nie je nula. Ak je, odstránime všetky terčíky a ukončíme interval generované.

Celá časť teda bude vyzerať takto:

generovani = setInterval(generateNext, 1000);

function generateNext()
{
  posX = randomPosition(48, $("body").width()-48);
  posY = randomPosition(48, $("body").height()-48);

  $("body").append('<img src="terc.png" class="terc"style="top:'+posY+'px;left:'+posX+'px;">');

  $("#time").text(parseInt($("#time").text())-1);
  if($("#time").text() == "0")
  {
      $(".terc").remove();
      clearInterval(generovani);
  }
}

výsledok:

Hra v jQuery – Strieľanie na terčíky - JavaScriptu zdrojákoviště - jQuery

Hru si môžete vyskúšať a v prípade problémov porovnať so zdrojovými kódmi v archíve.


 

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 695x (35.33 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

 

Všetky články v sekcii
JavaScriptu zdrojákoviště - jQuery
Článok pre vás napísal Neaktivní uživatel
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Tento uživatelský účet již není aktivní na základě žádosti jeho majitele.
Aktivity