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:

 

 

Dlaczego potrzebujesz swojego mistrza Jedi? 6 marca 2012

Filed under: PHP — Łukasz @ 13:15

Jedi

Tak jak każdy Padawan i świecie Gwiezdnych Wojen, tak i programista potrzebuje swojego Yody na swojej drodze do zdobycia mistrza Jedi.

 

Wydaje mi się, że hierarchia jak i systemu zdobywania wiedzy przestawiony w Gwiezdnych Wojnach idealnie pasuje do programistów. Czasami przeglądając oferty pracy znajduje takie kwiatki jak:

 

Senior programista

Wymagania:
* przynajmniej 6-miesięczne doświadczenie w pracy nad komercyjnym projektem

 

Wtedy naprawdę nie wiem czy płakać czy się śmiać… Jeśli ktoś daje tytuł Senior programisty osobie która ma zaledwie 6 miesięczne doświadczenie to jest to co najmniej niepoważne. 6 mc to bardzo mało czasu żeby mieć doświadczenia na takim poziome aby potrafić rozwiązać każdy napotkany problem, bo chyba takie wymagania stawiamy seniorowi, prawda?

 

Sam czas pracy na stanowisku programisty jest całkiem niezłym wyznacznikiem tego na ile dana osoba jest dobra. Co jakiś czas spotykamy się z problemami które są nam nieodzowne i dzięki temu zdobywamy wiedzę, oraz doświadczenie, które jest bezcenne. Głównie nie chodzi nawet o znajomość języka/technologii. Podam przykład z własnego życia, problem któremu nie podołałem a problem rozwiązał jakiś nieznany mi Yoda :)

 
(more…)

 

Trójkąty w CSS 28 lutego 2012

Filed under: CSS — Łukasz @ 20:33
Tags:

triangle

W samym CSSie można zrobić całkiem sporo, a dobrym przykładem tego może być Nyan cat stworzony przez Michała Budzyńskiego . Wystarczy tylko poznać kilka sztuczek i możemy zbudować coś całkiem fajnego. Jedną z takich sztuczek jest właśnie tworzenie trójkątów za pomocą samego CSS`a.

 

Całość jest banalnie prosta a opiera się o właściwe wykorzystanie atrybutu border. Poszczególne obramowania kontenera (górne, prawe, dolne i boczne) przecinają się pod kątem 45* jeśli wielkość tych obramowań jest taka sama. Najlepiej zobrazuje to poniższy obrazek:

A więc żeby uzyskać trójkąt wystarczy stworzyć kontener o wymiarach 0x0px ustawiając odpowiednio dużą wielkość obramowania

 

div {
  width: 0; 
  height: 0;
  border-width: 30px;
  border-style: solid;   
}

 

Teraz ustawmy sobie różne kolory dla kolejnych stron obramowania

 

div {
  (...)
  border-color: red blue green yellow; 
}

 

Tutaj możesz zobaczyć efekt

 

Aby uzyskać efekt trójkąta należy jeszcze tylko ukryć 3 z 4 części obramowania za pomocą koloru transparent

 

div {
  (...)
  border-color: red transparent transparent transparent;
}

 

I w ten sposób otrzymaliśmy trójkąt :) Dodam tylko, że istnieje możliwość tworzenia różnokątnych figur, wystarczy zdefiniować różną szerokość dla kolejnych części obramowania:

 

div {
  width: 0; 
  height: 0;
  border-width: 30px;
  border-left-width: 10px;
  border-right-width: 80px;
  border-style: solid; 
  border-color: red transparent transparent transparent;
}
​

Całość działa na wszystkich testowanych przeglądarkach, z tym że na IE7 należy pamiętać o definicji height: 0;, podczas jej braku przeglądarka ustawia wysokość na jakąś dziwną defaultową wartość.

 

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 ;)

 

PHP i define() 5 stycznia 2011

Filed under: PHP — Łukasz @ 23:46
Tags: ,

To będzie bardzo krótki wpis, do których raczej nie przyzwyczaiłem ;)
Na początek zagadka, co spowoduje podany kod:

 

 
  echo 100;
  define('100', 'stala 100');
  echo 100;

 

Wywali błąd? Nadpisze wartość liczby?
Otóż nie. Jeśli nastąpiłoby nadpisanie wartości integera były to spory idiotyzm ze strony języka. Jednak co ciekawe nie wywali też błędu i stała o nazwie ‚100’ powstanie, czego dowodem jest:

 

  print_r(get_defined_constants());
  /*
    zwróci:

    (...)
    [100] => stala 100
  */

 

Jednak nijak nie dostaniemy się do podanej stałej poprzez samą jej nazwę, jedynym sposobem jest użycie funkcji:

 

 
  echo constant('100');

 

Dla porównania Javascript nie pozwala na takie rzeczy:

 

 
const 100 = 'stala 100'; // SyntaxError: missing variable name

 

Na koniec dodam tylko, że pomysł na wpis zrodził się, jak już niejednokrotnie było, przez forum.php.pl. Niestety w ten sposób zmiany VAT-u w swojej aplikacji nie dokonamy :D

 

Inne spojrzenie na style CSS 4 stycznia 2011

Filed under: CSS,Web,Webmastering — Łukasz @ 19:07
Tags: ,

Wstęp


Ostatnio coraz częściej zdarza mi się pracować na frontend-zie. W sumie zawsze myślałem, że to nie może być ciekawe, ale przyznaje – myliłem się… W dobie, cały czas tworzonego jeszcze, HTML5 oraz wdrażanego CSS3 można naprawdę fajnie się pobawić tymi nowymi mechanizmami. Oczywiście największym problemem w tej warstwie aplikacji webowej jest integracja ze wszystkimi popularnymi przeglądarkami które nie zawsze interpretują nasz kod tak jak trzeba, natomiast można też przyczepić się do ograniczeń płynących z samego CSS-a.

 

Jeśli się zastanowić nad tym to dojdziemy do wniosku, że jedyne zmiany dokonywane są przez dodawanie nowych właściwości (rzadziej selektorów czy pseudoklas) Oczywiście, to bardzo duże zmiany – opacity, border-radius, box-shadow etc. otwierają nam drogę ku naprawdę fajnym rozwiązaniom. Natomiast brak zmian w tzw. warstwie core. W sumie to logiczne, bo z tym co mamy możemy zrobić wszystko, tyle, że nie zawsze jest to takie łatwe, proste i czytelne.

 

Czego brakuje

Zapewne zastanawiasz się teraz o czym mowa. Chodzi np. o przekazywanie zmiennych do arkusza styli, dzięki czemu możemy uzyskać efekt personalizacji strony. Obojętnie czy to będzie kolor tła na podstawie pogody/pory roku/pory dnia czy inny styl zależny od miejsca aktualnie zalogowanego użytkownika w rankingu. Z tym co dziś mamy da się to zrobić w całkiem prosty, lecz nie do końca elegancki sposób.

 
(more…)

 

Apcelerator Titanium dla Android`a 24 sierpnia 2010

Filed under: JS — Łukasz @ 14:05
Tags: , , , ,

Jakieś dwa tygodnie temu pokazano mi takie narzędzie jak Appcelerator Titanium. Titanium to platforma która umożliwia tworzyć aplikację deskoptowe jak i mobilne (iPhone, Android, iPad, BlackBerry) w językach czysto webowych (HTML, CSS, JavaScript, PHP, Python i Ruby). Jest to konkurencja dla Adobowego środowiska AIR z tą różnicą, że Titanium jest w pełni otwarte.

 

Przez te dwa tygodnie pracowałem (i dalej pracuję) nad pewną małą aplikacją dla Google Android, dlatego jedynie nad wersją mobilną API będę się rozwodzić.

 
(more…)