luq techblog

o tworzeniu słów kilka…

HTML5 experience proggresbar 3 kwietnia 2012

Filed under: CSS,GameDev,JS — Łukasz @ 11:41
Tags: , ,
progressbar

Zuma Blitz level progressbar

W erze gier takich jak World of Warcraft czy Farmville zjawisko „levelowania” i „nabijania expa” jest dość popularnym zjawiskiem. Mechanizm ten na pewno napędza rozgrywkę i sprawia że użytkownik chce grać widząc swój postęp.

 

Dzisiaj udostępniam gotowy kod realizujący taki feature, całość jest pisana z zamysłem urządzeń mobilnych (brak wymaganych bibliotek, wykorzystanie CSS Transforms)

ZOBACZ DEMO

 

Niestety kompletnie w tym wszystkim zapomniałem o tagu <progress/> w HTML5 http://www.w3schools.com/html5/tag_progress.asp i niestety mój kod wykorzystuje divy, mimo że nowy tag pasuje tutaj idealnie. Nie sprawdzałem tego ale wydaje mi się że poza semantycznym kodem (i wcale nie mówię że to nie jest ważne) żadnych innych zysków nie będziemy mieli np. w postaci większej wydajności.

 

Całość realizuje kilka podstawowych funkcji:

 

  • możemy dowolnie konfigurować doświadczenie wymagane na dany level
  • pasek przy przejściu na następny level jest dopełniany do końca a następnie zerowany (nie ma efekty zmniejszania paska)
  • możliwość podpięcia callbacka na dowolną funkcje przy przejściu na kolejny level
  • całość jest napisana z myślą o urządzeniach moblinych

 

Kod może nie piorunuje :D ale radzi sobie całkiem nieźle a samo użycie jest bardzo proste:

 

var oBar = new pBar({
  elems: {
    bar: document.getElementById('pBar'),
    proc: document.getElementById('pBarProc'),
    value: document.getElementById('pBarValue'),
    max: document.getElementById('pBarMax'),
    level: document.getElementById('pBarLevel')
  },
  levels: [
    {n: 1, max: 400}, 
    {n: 2, max: 900},
    {n: 3, max: 1500},
    {n: 4, max: 2200},
    {n: 5, max: 3400},
    {n: 6, max: 5000},
    {n: 7, max: 7000}
  ],
  value: 0,
  duration: 500,
  freq: 40,
  onNextLevel: fOnNextLevel,
  isAnimate: true,
  isAnimateValues: false
});

 

Z myślą o wydajności, klasa pBar nie generuje HTMLa i należy napisać go samemu, w moim przykładnie jest to:

 

<div class="pBarContainer">
  <div id="pBar" class="pBar"></div>
    <div class="text">
      <span>
        <span id="pBarValue">x</span> / <span id="pBarMax">x</span>
      </span>
      <span class="procContainer">
        <span class="proc" id="pBarProc"></span> %
      </span>
      <span class="level">
        Level <span id="pBarLevel">1</span>
      </span>
    </div>
    <div id="stars">
      <div id="star1" class="star hidden"></div>
    </div>
 </div>

 

Ze spraw technicznych chciałby zwrócić uwagę tylko na jeden szczegół. Jeśli używamy CSS Transforms na urządzeniach mobilnych to zawszę, ale to zawszę, dodajemy do animowanego elementu:

translate3d(0, 0, 0);

Dzięki temu zyskujemy na wydajności poprzez włączenie hardware-owej akcelaracji animacji. Różnice można zobaczyć na tym filmiku:

 

 

Cheaty na Google+ 21 sierpnia 2011

Filed under: GameDev,JS — Łukasz @ 15:59
Tags: , , ,

Flood-It! Chodź dawno nic nie pisałem dziś króciutko o możliwości cheatowania w jednej z Google plusowych gier.

 

Dokładniej rzecz biorąc w grze Flood-It!. Przeglądając kod (zresztą dość miernej jakości) można natknąć się na funkcje korzystającą z plugina Kanomi tworzącą sekwencje znaków dzięki którym można wygrać z dość niezłym wynikiem (20971520 pkt :])

 

Ładnie opisane komentarzami w kodzie:

 

// set the keys for Konami code: up, up, down, down, left, right, left, right, b, a

 

// win the game with cheat for at least 5 steps

 

A więc wystarczy załadować grę zrobić min. 5 ruchów i kliknąć z klawiatury sekwencje znaków
up, up, down, down, left, right, left, right, b, a i cieszyć się z wyniku :)

 

Wycinek kodu:

 

// Check Konami cheat code - if the code is inserted - win the board with 25 steps.
function checkKonamiCode() {
  if (window.addEventListener) {
    // set the keys for Konami code: up, up, down, down, left, right, left, right, b, a
    var konami = [38,38,40,40,37,39,37,39,66,65];
    var keyIndex = 0;
    var MIN_CHEAT_STEPS = 5;
 
    // listen to key strokes
    window.addEventListener("keydown", function(e) {
      if (e.keyCode == konami[keyIndex++]) {
        // and check to see if the user has entered the Konami code
        if (keyIndex == konami.length) {
          // win the game with cheat for at least 5 steps
          var winSteps = parseInt($lp('#cur_round').text(),10);
          if (winSteps >= MIN_CHEAT_STEPS) {
            startNewGame(true);
            updateGameStart();
            $lp('#cur_round').text(winSteps);
            floodItGame.endGame(true);
            keyIndex = 0;
          }
        }
      // wrong sequence - start over
      } else {
        keyIndex = 0;
      }
    }, true);
  }
}

 

Myślę, że powyższy kod został pozostawiony specjalnie bo jeśli miałby służyć debugowaniu to po co taka duża sekwencja znaków? Po co w ogóle Konami? Dlaczego trzeba zrobić min. 5 ruchów? Jeśli miało by to służyć debugowaniu to raczej zrobiono by sobie buttona do tego w htmlu :) A więc myślę, że developerzy Labpixies specjalnie zostawili możliwość cheatowania ;)

 

Paczka game_map 5 października 2010

Filed under: GameDev,GameMap — Łukasz @ 20:21

Witam po znów długiej przerwie. Dziś bardzo krótko z racji braku czasu na cokolwiek…

 

Kilka osób prosiło mnie aby udostępnić paczkę z game_map (trzeba by wymyślić jakąś nazwę…) który gościł przez kilka poprzednich wpisów a teraz z racji właśnie owego braku czasu na razie jest zawieszony w działaniach. Naprawdę bardzo cieszy mnie duże zainteresowanie tym projektem (jeśli można to tak nazwać). Zamieszczona poniżej paczka jest wersją nowszą niż serwerowa i jest to totalnie wersja developerska (zacząłem pisać pobieranie kolejnych części mapy po przejściu do krawędzi aktualnie pobranej ale to nie jest skończone). Mam nadzieję, że niczego nie zapomniałem spakować.

 

Pobierz game_map

 

SQL, JSON i Ajax… czyli część 3. tworzenia mapy pod grę 7 lipca 2010

Filed under: Ajax,GameDev,GameMap,JS,Programowanie,SQL — Łukasz @ 17:55
Tags: , ,

Dość długo zwlekałem z tym wpisem… szczerze mówiąc, bardzo dużo czasu i sił kosztuje mnie opisywanie mojego, hm… projektu, bo tak to można nazwać. Tak naprawdę więcej czasu spędziłem nad pisaniem poprzednich dwóch wpisów niż nad pisaniem kodu do nich. Sam nie jestem fanem tutoriali programistycznych i od dziś nie będę pisał na ten temat rozwodząc się nad moją każdą decyzją podjętą w czas projektowania tego wszystkiego. Będę zwracał uwagę na elementy ciekawe pomijając te błahe.

 

Okej, ostatnio zakończyliśmy na GUI pod edytor map, dziś dopiszemy trochę kodu aby nasz edytor zapisywać dane dt. mapy do bazy a także odczytywał stworzoną mapę po przeładowaniu strony tak, aby można było kontynuować prace nad całym naszym światem. Dodatkowo stworzymy kod który umożliwi nam w grze przesuwanie mapy. Szkoda czasu czas zaczynać.

 
(more…)

 

Aplikacja webowa – edytor map 3 lipca 2010

Filed under: GameDev,GameMap,JS — Łukasz @ 17:53
Tags: ,

Map editor

Kontynuując mój poprzedni wątek nt. mapy gry webowej, dziś stworzyłem GUI (Graphical User Interface) pod edytor map, który jest niezbędny do dalszej pracy. Nie wyobrażam sobie jakbym miał „z ręki”, w bazie, dodawać kolejne pola do mapy lub nawet skryptowo przez PHP, po prostu do generowania mapy trzeba mieć podgląd na całość, innego wyjścia nie ma.

 

Wyszło mi to, myślę, nieźle. Zresztą screen widać obok.

 

W sumie jest to wersja dość uboga i powinno to wyglądać coś jak Photoshop. Powinno być okienko Navigator przez które możemy się przesuwać po całości, wybierać x,y od którego chcemy mieć podgląd etc. oraz okienko Sprites, oba oczywiście drag&drop. Ale, w końcu „nie od razu Rzym zbudowano”, na razie to co jest wystarczy mi spokojnie :)

 

Już na początek podam linka do edytora, oto on:
Map Editor

Wystarczy kliknąć na jakimś spricie a następnie na polu na mapie gdzie go chcemy wstawić.

 
(more…)

 

Canvas & Sprites 2 lipca 2010

Filed under: GameDev,GameMap,JS,Web — Łukasz @ 19:19
Tags: , ,

Mapa

Tak jakoś wyszło, że postanowiłem napisać własny system poruszania się po mapie w widoku od góry. Mam teraz trochę czasu więc co mi tam… a skrobnę se… a co?! Całość ma działać tak jak dużo gier na GameBoy`a tzn. mamy bohatera który pozostaje zawsze na środku ekranu, oraz ma ograniczony widok ma mapę (widzi tylko to co jest najbliżej niego). Idąc przesuwa się mapa tj. widzi to czego wcześniej nie widział…

 

Zresztą chyba każdy wie o co chodzi :)

 

Całość będzie oparte o canvas (HTML5), JS + jQuery + Ajax + JSON, MySQL i PHP.

 

Grafika została pobrane z jakiegoś ogromnego obrazka-mapy i nie należy do mnie, jest użyta jedynie w celu pokazowym. Jeśli jesteś autorem i nie podoba Ci się to, że prezentuję kod wraz z Twoją grafiką, proszę o kontakt via email

 

W tym wpisie chcę opisać jak generować mapę.

 

(more…)

 

Catch the block 22 kwietnia 2010

Filed under: GameDev,JS,Web — Łukasz @ 23:00
Tags: , , ,

Catch the block
Dziś chciałem przedstawić napisaną przeze mnie grę, właściwie mini gierkę, która została specjalnie stworzona na targi edukacyjne szkół z regionu tarnogórskiego w celu oczywiście promocji mojej szkoły (oczywiście jakże pięknej i wspaniałej!). To od razu rzucę linkiem.

 

GRAJ
Sterowanie: mysz + klawisze [strzałka lewo], [strzałka prawo]
(dla Chrome, [a], [d])

 

Na początku przeważnie pada pytanie „To jest Flash?”, oczywiście klikając prawym klawiszem myszy na tym ustrojstwie nie pojawia się kontekstowe menu Flash`a, a więc odpowiedź brzmi „Nie, to JavaScript ;)”. W tym wpisie nie znajdzie się miejsce na opis techniczny, możliwe że zrobię to później a może nigdy. Chciałem się tutaj skupić na zasadach gry i informacjach przydatnych dla chcących sobie złapać klocka.

 

W czym grać

Jeśli masz i używasz na codzień IE, to raczej sobie nie pograsz. Znaczy, teoretycznie gra chodzi i działa, ale z powodu tego, że IE jest strasznie wolny, wolno interpretuje JavaScript`a, a do wersji 7 (bo taką mam u siebie zainstalowaną) nie zaimpletowano obsługi właściwości rodem z CSS 3 (opacity [zamiast tego korzysta się z filter] oraz border-radius) to odradzam zupełnie granie w grę pod IE. Polecam Chroma, bo najszybciej interpretuje JavaScripta, w Firefox`ie działa równie dobrze, pod Operą słyszałem, że też, chodź tego nie testowałem. Grałem też pod Safari i jest całkiem okej.

Jak grać

Bardzo zdziwiło mnie, że duża cześć osób którym nie tłumaczyłem zasad in live ma problem z pojęciem zasad które są tak naprawdę proste. Głównym celem gry jest zebranie jak największej ilości punktów. Nie oszukuj się, zawszę kiedyś przegrasz ;) Punkty zdobywamy zbierając klocki aktualnego koloru, czyli tego widocznego w kółku u dołu ekrany gry. Nie trzeba klikać! Wystarczy najechać. Za każdy zebrany w ten sposób klocek dostajemy 3 pkt. To mało, i jeśli chcemy zajść daleko trzeba się skupić na combosach. W prawym dolnym rogu widzimy kolory klocków z kolejności jakiej mamy je zebrać (wykluczając pierwszy level, oczywiście z powodów logicznych). Dla przykładu, widzimy (od lewej) zielony, czerwony. Jeśli zbierzemy zielony a następnie czerwony klocek to poza 6 pkt. dostaniemy dodatkowo 20pkt. Punkty za combo są liczone wg. wzoru:

ilość_klocków_w_combo * 10

Oczywiście aktualny kolor zmieniamy klawiszami strzałek (w Chromie jest to [a], [d]). Pamiętaj, że jeśli aktualny kolor to np. czerwony, a Ty zbierzesz niebieski to tracisz życie. Grę przegrywasz jeśli stracisz wszystkie życia lub skończy Ci się czas, do którego z każdym przejściem do nowego levela zostają dodane kolejne cenne sekundy (zdefiniowane różnie od każdego poziomu). To chyba tyle.

 

Zdefiniowanych jest 8 poziomów. Nigdy nie udało mi się przejść do ostatniego. Mój najlepszy wynik oscyluje gdzieś między 1200 a 1300, dokładnie niestety nie pamiętam. Jeśli ktoś miał podobny lub większy piszcie w komentarzach :)