Gra na Halloween – piszemy szybko w jQuery i HTML5!

icon5

Poziom średnio-zaawansowany

Uwielbiam klimat Halloween! Mając wolną chwilę, postanowiłem stworzyć prostą gierkę, aby pełniej ten klimat poczuć.

Gra na Halloween w JavaScript

Chodzi o czas, a nie o wymyślne wymagania. Na projekt (i opisanie go na blogu) było nie wiele czasu, więc cel to właśnie stworzenie gierki jak najszybciej. Najkrótszą drogą do celu tworzymy grę pamięć (Memory).

Stary, dobrze znany koncept. Dopasowane obrazki znikają, ukazując wspaniałe tło 🙂

Rezultat wygląda jak poniżej:

halloween-game-javascript

Przejdźmy zatem do programowania.

Gra memory w JavaScript specjalnie na Halloween

1. Ładna oprawa graficzna to podstawa

Nie będziemy jednak rysować grafiki sami – nie ma czasu. Przydały by się jakieś straszne dźwięki, ale te na razie pominiemy.

Skorzystamy z dostępnej w Internecie grafiki, do wykorzystania FREE. Ja ikonki pobrałem z http://iconfinder.com/. Dostosowałem ich rozmiar (100 x 100 px), aby cała plansza dobrze ułożyła się na ekranie. Potrzeba 10 ikon (20 pól na planszy).

Znalazłem też ładne tło. Mamy zasoby, kojarzą się z Halloween, więc do dzieła.

2. Kod

Trzeba to wszystko ożywić (niczym zombie :-)). Kod gry oprzemy o HTML5 i jQuery. Nawet w tak prostej gierce jest do wykonania kilka nieco bardziej skomplikowanych operacji.

Oszczędzamy czas, więc warto wesprzeć się zasobami z sieci (np. na GitHub), aby nie pisać wszystkiego od zera. Ja akurat znalazłem fajny przykład na codepen.io, którym można się wspomagać, aby było szybciej.

3. Tworzymy UI / style

Potrzebujemy zdefiniować style dla tła, planszy i przycisków, m.in.:

...
body {
    background-image: url('../gfx/bg2.jpg');
    color: #fff;
    font: 20px Verdana;
    font-weight: bold;
    text-transform: uppercase;
}

#gameBoard {
    margin: 0px auto;
    width: 640px;
}

#boxes {
    margin: 10px 0 0;
    z-index: 1;
}
...

A także strukturę HTML:

...
<div id="gameBoard">
  <span id="gameButtons">
    <span class="button">
      <span id="counter">0</span> Moves
    </span>

    <span class="button">
      <a onclick="startAgain();">Start again</a>
    </span>
  </span>

  <div id="boxes"> </div>
</div>
...

Pora na JavaScript! BTW nawet Aptana ma kolory Halloween’owe 🙂

aptanab

W kodzie JS potrzebujemy planszy, licznika i obrazków. Nazwy obrazków nie są istotne – odnosimy się do elementów tablicy:

var mainBoard = "#boxes";

var counter = 0;
...

var gfxBase = [
    "gfx/icon1.png",
    "gfx/icon2.png",
    ...
    "gfx/icon9.png",
    "gfx/icon10.png"
];

// preload images
$(gfxBase).each(function() {
    var image = $('<img />').attr('src', this);
});
...

Obrazki muszą być rozmieszczone losowo, dodamy zatem dwie funkcje do tego celu:

...

function doRandom(max, min) {
    return Math.round(Math.random() * (max - min) + min);
}

// put images in random order
function shuffleImgs() {
...
}

...

W UI mamy przycisk Start again, który resetuje całą grę. Oto powiązana z nim funkcja:


function startAgain() {
    
    shuffleImgs();
    
    $(mainBoard + " div img").hide();
    $(mainBoard + " div").css("visibility", "visible");
    
    $("#success").remove();
    
    counter = 0;
    $("#counter").html("" + counter);
    
    cardOpened = "";
    imageOpened = "";
    imgFound = 0;
    
    return false;
}

Sedno kodu stanowi rozbudowana funkcja

function openCard() {
...
}

W niej odbywa się obsługa kart (pokaż / ukryj) oraz animacje, liczenie kliknięć, sprawdzanie dopasowań oraz śledzenie ukończenia gry:

...
  if (imgFound == gfxBase.length) {
    $("#counter").prepend('<span id="success">Done! With </span>');
    // alert('BOOOO!');
  }
...

Na koniec uruchamiamy wszystko – wywołujemy budowanie planszy oraz losowanie obrazków:

$(function() {
    
    for (var y = 1; y < 3 ; y++) {
        $.each(gfxBase, function(i, val) {
            $(mainBoard).append("<div id=card" + y + i + ">
                                 <img src=" + val + " />");
        });
    }
    
    $(mainBoard + " div").click(openCard);
    shuffleImgs();
    
});

I to wszystko. Możemy uruchomić naszą grę na Halloween.

Przykład on-line dostępny tutaj:

http://dominik-w.pl/hw/

Pełne źródła na GitHub:

https://github.com/dominik-w/js_html5_com/tree/master/halloween-memory-game

Podsumowanie

Halloween jest super! I ta atmosfera. A my w kilka chwil napisaliśmy dość ładnie wyglądającą gierkę związaną tematycznie. Prosta, gdyż czasu na to było mało. Przydało by się dodać jakieś animacje w tle czy dźwięk. Jak na kilka chwil spędzonych nad projektem mamy całkiem fajną bazę do rozwoju.

Z pewnością moja kolejna gra na Halloween zacznie powstawać wcześniej, a będzie skierowana na urządzenia mobilne.

Booooo!

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem. Bloger 🙂 Anty-lewak 🙂 Pasjonat programowania, nowych technologii, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+0Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.
  • Warto w style.css zmienić detal dotyczący tła…

    z:

    > background-image: url(‚../gfx/bg2.jpg’);

    na:

    > background: #000 url(‚../gfx/bg2.jpg’) no-repeat center center fixed;