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

 
  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

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.

Wystarczy skrypt PHP generujący i zwracający plik CSS (z odpowiednim nagłówkiem).

   <link href="/css/generator.php?season=<?=$season?>" rel="stylesheet"/>

Dzięki czemu w generator.php mamy dostęp do zmiennej GET o nazwie season i na jej podstawie używamy konkretnych kolorów, obrazków etc.

Tak btw. można by nadpisywać style:

   <link href="/css/general.css" rel="stylesheet"/>
   <link href="/css/<?=$season?>.css" rel="stylesheet"/>

ale dla większej ilości zmiennych chyba tego nie ogarniemy…

Rozwiązanie generatorem styli jest jak najbardziej dobre tyle, że zawsze trzeba by kopiować ten sam początek z pliku generator.php, należało by zadbać o jakiegoś cache-a tak aby dla każdego użytkownika nie generować na nowo tego samego szablonu. Poza tym, taki frontend-owiec tworzący arkusz styli nie powinien być zmuszony znać chociaż w minimalnym stopniu PHP. Warto by stworzyć odrębny mini-język, z pętlami, warunkami, możliwością deklarowania zmiennych, oraz garstką funkcji. Jeśli chodzi o HTML-a, popularne są systemy szablonów jak np. bardzo krytykowane Smarty czy, raczej chwalone polskie, OPT. Dlaczego nie stworzyć czegoś takiego dla CSS-a? A najlepiej jak ten parsowany język byłby taki sam jak w systemach szablonów HTML-owych. Tak aby popularne systemy szablonów miały dwie części: szablony HTML-owe oraz CSS-owe.

Kolejnym powodem dla którego warto stworzyć takie cudo są właśnie nowe właściwości rodem z CSS3. Jak wiadomo, aktualnie przeglądarki wykorzystują swoje odmiany nowych właściwości, najczęściej poprzedzone prefixem, np: aby uzyskać efekt przezroczystości działający cross-browser musimy napisać:

#foo {
  opacity:0.5;
  -moz-opacity:0.5;
  -khtml-opacity:0.5;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter:alpha(opacity=50);
}

Jeśli chcemy nadać przezroczystość większej ilość elementów, musimy albo kopiować te 5 linijek i wklejać je za każdym razem, albo stworzyć klasę .opacity01, .opacity02… .opacity1 i nadawać je w atrybucie class dla wszystkich tych elementów. Oba te rozwiązania nie są zbyt elegancje. Jakże ładniej byłoby gdybyśmy mogli napisać w ten sposób:

function opacity($val){
  opacity:$val;
  -moz-opacity:$val;
  -khtml-opacity:$val;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=$val*100)";
  filter:alpha(opacity=$val*100);
}

#foo {
  opacity(0.5);
}
#bar div a {
  opacity(0.7);
}

Tworzenie funkcji przydałoby się także w „zwykłych” przypadkach, np:

function absolute($top, $left, $zIndex = auto){
  position: absolute;
  top: $top;
  left: $left;
  if(false!==$zIndex){
    z-index: $zIndex;
  }
}

#foo { absolute(50, 100, 9999); }
#bar{ absolute(10, 200, false); }

Zawszę jest też problem z kolorami. Nie oszukujmy się, zapis #45B27F czy rgb(127, 46, 78) nie jest łatwy do zapamiętania. Poza tym głównych kolorów których używamy na stronie jest kilka, warto by tworzyć sobie tablice definicji kolorów i wtedy jest to po prostu dla nas czytelniejsze:

$colors = {
  blueLight:"#0080e0",
  blueDark:"#00599c"
};

#foo { border: 1px solid $colors.blueLight; color: $colors.blueDark; }
#bar{ background-color: $colors.blueDark; }

Już nie mówię o przypadku kiedy w stylach CSS mielibyśmy rozpoznaną wersje i rodzaj przeglądarki:

if(CORE_BROWSER_TYPE == FIREFOX && CORE_BROWSER_VERSION < 2.1){
  //
}
else{
  //
}

Naprawdę fajnie było by gdyby powstał taki framework do CSS-a.
W jednym z kolejnych wpisów spróbuje zaprezentuje pokrótce Scaffold CSS Framework.

Dziś zgoła odmienny wpis. Nie będzie o nudnym klepaniu kodu, rozwiązywaniu błędów i wąskich gardeł, optymalizacji czy bezpieczeństwie. Dziś zajmiemy się projektowaniem i marketingiem, który szczególnie ważny jest właśnie w web aplikacjach. W erze start-up`ów, licznych zakupów internetowych, youtube`a i facebook`a, marketing internetowy jest nieodłącznym elementem pracy web developera. Nie ważne, że kod jest idealny i działa świetnie jak nie umiesz go sprzedać. Po co komu świetna gra przy której Ty męczyłeś się z całym zespołem przez 2 lata wyrywając sobie resztki włosów z głowy, kląc przy niej raz po raz a kiedy już udało się ją skończyć i poprawić wszystkie błędy okazało się, że owszem, grafika super, wykorzystaliście masę nowości technicznych i technologicznych ale grywalność leży…?

Tak naprawdę zawszę najważniejszy jest pomysł. Najlepiej taki który jest niebanalny, ciekawy, taki który budzi podziw ale może być także zdziwienie, ogólnie chodzi o silną emocję (może to też być np. obrzydzenie czy strach). Bardzo ciekawym sposobem dotarcia do potencjalnych klientów jest Marketing partyzancki. Cytując wiki, jest to:

forma marketingu zbliżona do marketingu wirusowego, polegająca na promowaniu dóbr i usług za pomocą niekonwencjonalnych technik, w zależności od grupy docelowej, jak np. napisy sprayem na murach prezentujące daną markę czy vlepki.

W tej technice stosuje się zarówno niekonwencjonalne, mające przykuć uwagę środki, jak również niekonwencjonalne treści, np. widok krwi, drastycznych scen itp. Przede wszystkim jednak technika ta bazuje na tanich środkach. Dodatkowo daje ona taki efekt, że odbiorca infekowany jest memami nawet unikając kontaktu z tradycyjnymi nośnikami reklam. Informacja o produkcie czy usłudze, podobnie jak w marketingu wirusowym, może dalej rozchodzić się w postaci plotki oraz dalszych przekazów informacji drogami niekonwencjonalnymi.

Jednym z najciekawszych przykładów tej formy reklamy, na który natrafiłem jakiś czas temu, jest akcja marketingowa dla firmy Absolut. Koszt całkowity to praktycznie 0 zł. Wystarczył jeden karton z magazynu, butelka promowanego alkoholu (którą oczywiście wróciła z powrotem) oraz jedno lotnisko. Tak, tak, lotnisko ;)

Butelkę zapakowano do otwartego kartonu, tak aby trunek był widoczny, i puszczono razem z bagażami na tej lotniskowej karuzeli (nie mam pojęcia jak to się fachowo nazywa :>). Zresztą oto filmik:

Tak naprawdę ludzie mają dość monotonii, lubią rzeczy ciekawe, lubią się bawić. I tutaj wkracza inicjatywa The Fun Theory. Owa teoria zabawy opiera się na przekonaniu, że zabawa jest najłatwiejszym sposobem na zmianę zachowań ludzi na lepsze. Najbardziej popularnym produktem wywodzącym się z owej inicjatywy są fortepianowe schody. Dzięki nim procent ludzi, korzystający z tradycyjnych schodów w stosunku do schodów ruchomych wzrósł o 66%! (tak przynajmniej twierdzą autorzy). Chociaż mnie osobiście o wiele bardziej podoba się Bottle Bank Arcade:

Jak to ma się do internetu i programistów? Działa dokładnie tak samo! Najważniejszy jest pomysł. Spójrzmy na taki np. serwis podbij.pl. Jeśli prześledzić zasadzę działania wychodzi na to, że serwis zarabia bardzo dużo. Kupuje telewizor za 1000zł, sprzedaje go za 300zł ale za same podbicia dostaje 30 000zł, bo podbicie o 0,01 zł jest tożsamy z jedną realną zlotówką. Fajnie nie? ;)

Kolejnym przykładem który mogę podać jest sytuacja z mojego życia. Podczas promocji mojej szkoły na targach edukacyjnych powstały 2 gry, jedną było moje Catch the block a drugą była banalnie prosta lecz o wiele lepsza marketingowa gra, której autorem jest wolf. Grafika rysowana gdzieś w paincie z wykorzystaniem narzędzia pędzel :) Stojące na przeciwko siebie postacie z bronią w ręku, odliczenie w dół od 3, po zejściu licznika do 0, user musiał nacisnąć grzybek (drewniane pudełko, kolorowe grzybki i mechanizm z normalnej myszki – jeden user miał lewy przycisk, drugi – prawy, wszytko złożone i podpięte pod USB), kto nacisnął pierwszy ten wygrywał, natomiast falstart był nagradzany śmiercią. Gra cieszyła się mega popularnością :]

Jeśli masz własną firmę, kub, pub, restauracje to koniecznie stwórz fanpage na facebook`u. Jak przyciągnąć userów? Najskuteczniej jest stworzyć aplikację (lub jeśli nie umiesz, zleć to komuś) dzięki której można wygrać nagrody (darmowe piwo, karta rabatowa na tydzień, koszulka, tu pomysłów jest naprawdę mnóstwo) dzięki temu jest masa ludzi którzy klikną na „Lubię to”, ich znajomi to widzą, poza tym każda wygrana jest rzucana na ich wall`a, a tym znajomym którzy nie mają jeszcze konta na FB opowiadają jak to wczoraj wygrali darmowe piwo, dzięki czemu nasza firma jest rozpoznawana :)

Ostatecznie należy dążyć do tego aby swoje tytułowe „Kup to. Proszę!” zamienić na czyjeś „Sprzedaj mi to. Proszę!”

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

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ć.

Na początek rzuca się w oczy bardzo kiepska dokumentacja. Już wyjaśniam dlaczego kiepska… Po pierwsze, bardzo, ale to bardzo rzadko można spotkać jakiś przykład, co naprawdę, przynajmniej na początku, jest kłopotliwe. Po drugie, brakuje danych pewnych elementach API, które można wyczytać z cudzych kodów. Pierwszą z nich jest brak w ogóle wspomnienia w dokumentacji o aliasie do głównego obiektu API. Dokumentacja wspomina jedynie o Titanium natomiast wygodniej jest stosować o wiele krótszą nazwę Ti

// to samo
Titanium.userAgent;
Ti.userAgent;

Kolejnym takim elementem którego nie znalazłem w dokumentacji są setery do obiektów, np:

var bnt = Ti.UI.createButton({ title: 'foo' });
bnt.setTitle( 'bar' ); // o tym nie ma ani słowa 

Po trzecie, uważam, że fajnie by było dodać obrazki jak wygląda przykładowy obiekt z kontenera Ti.UI bo nie zawsze nazwa mówi sama za siebie, zresztą nawet jeśli mówi to wolałbym, żeby była możliwość podglądu obiektu, bo przecież nie mam zielonego pojęcia jak będzie wyglądał Ti.UI.Toolbar. Oczywiście każdy wie czym jest Toolbar ale jak ten konkretny obiekt wygląda z różnymi konfiguracjami parametrów już raczej nie bardzo.

W razie problemów i niejasności pomocy możemy szukać w Questions & Answers ale o wiele więcej informacji jest zawartych w panelu dyskusyjnym. Jeśli natomiast chcemy zobaczyć jakieś przykładowe kody to polecam pobrać i zaimportować do Titanium Kitchen Sink

Jadnak patrząc obiektywnie całe API jest bardzo proste, mamy łatwy dostęp do bazy danych urządzenia (jest to SQLite oczywiście), możemy korzystać z obiektu XHR, który obsługuje się dokładnie jak ten klasyczny znany z przeglądarek, tworzenie obiektów User Interface i dodawanie ich na ekran jest prościutkie. Przyszło mi bawić się także funkcjami dotyczącymi Facebooka i muszę powiedzieć, że umieszczenie czegoś na naszym Facebook`owym wall`u jest dziecinnie proste.

Najlepiej pokaże to na przykładnie. Nasza aplikacja będzie sprawdzała czy posiada dane w bazie urządzenia i tworzyła z tego tabele (obiekt TableView), natomiast jeśli nie będzie w bazie tych danych to nasza aplikacja spróbuje je pobrać w formacie JSON z przykładowej strony, zapisze je do bazy a następnie będzie postępować analogicznie jak wyżej. Efektem będzie wyświetlenie czegoś takiego:

Na początek tworzymy elementy GUI:

var loader = Ti.UI.createActivityIndicator({
    height :50,
    width :10,
	message : 'Loading data...'
});
var window = Ti.UI.createWindow({
	backgroundColor	:'#ddd',
	fullscreen : true
});
var table = Ti.UI.createTableView({
	backgroundColor : '#fff',
	width : 300,
	height : 360,
	top : 20,
	left : 10,
	borderRadius : 5,
	borderWidth : 1,
	borderColor : '#444',
	separatorColor : '#444',
	scrollable : true,
	rowHeight : 41
});
window.add( table );
window.open();

Tworzymy obiekt Window oraz TableView, którego dodajemy do okienka, następnie je otwieramy. Obiekt ActivityIndicator natomiast to okienko blokujące cały ekran jednocześnie informujące o wykonywaniu jakichś operacji. Będziemy je wyświetlać podczas pobieranie i zapisywania danych do bazy, po tych operacjach zostanie ukryte. Będzie to wyglądać tak:

Stworzymy sobie bazę danych:

Ti.Database.install( 'mybase.db', 'mybase' );
var db = Ti.Database.open( 'mybase' );
db.execute( 'CREATE TABLE IF NOT EXISTS user ( id INTEGER PRIMARY KEY, name VARCHAR, age INTEGER )' );

function loadData(){
	loader.show(); // pokaż loader
	var data = null;
	
	var xhr = Ti.Network.createHTTPClient();
	xhr.onreadystatechange = function(){
		try{
			if( this.readyState == 4 && this.status == 200  ){
				data = eval( '(' + this.responseText + ')' );
				saveData( data ); // wywołanie kolejnej funckji
			}
		}
		catch( e ){
			Ti.API.info( e.name + ':' + e.message );
		}
	};
				
	xhr.open( 'GET', 'http://wls-team.ovh.org/projects/data.txt' );
	xhr.setTimeout( 5000 );
	xhr.send();
}

function saveData( dataArr ){
	var dataTable = [];
	
	for( var i = 0, len = dataArr.length; i < len; i++ ){
		db.execute( 
			'INSERT INTO user ( id, name, age ) VALUES ( ?, ?, ? )', 
			null,
			dataArr[i].name,
			dataArr[i].age
		);
		
		dataTable[i] = Ti.UI.createTableViewRow({ 
			title : dataArr[i].name + ' : ' + dataArr[i].age 
		});
	}
	
	table.setData( dataTable );
	loader.hide(); // ukryj loader
}

Pozostał nam jeszcze kod główny:

var q = db.execute( 'SELECT name, age FROM user' );

if( q.rowCount == 0 ){
	loadData();	
}
else{
	var dataTable = [];
	var i = 0;
	
	while( q.isValidRow() ){	
		dataTable[i] = Ti.UI.createTableViewRow({ 
			title : q.fieldByName( 'name' ) + ':' + q.fieldByName( 'age' ) 
		});
		
		i++;
		q.next();
	}
	q.close();
	
	table.setData( dataTable );
}

To wszystko. Prawda, że proste? Na koniec dodam tylko cały kod w jednej części:

ffunction loadData(){
	loader.show(); // pokaż loader
	var data = null;
	
	var xhr = Ti.Network.createHTTPClient();
	xhr.onreadystatechange = function(){
		try{
			Ti.API.info( 'state: ' + this.readyState ); //@log
			
			if( this.readyState == 4 && this.status == 200  ){
				data = eval( '(' + this.responseText + ')' );
				saveData( data );
			}
		}
		catch( e ){
			Ti.API.info( e.name + ':' + e.message );
		}
	};
				
	xhr.open( 'GET', 'http://wls-team.ovh.org/projects/data.txt' );
	xhr.setTimeout( 5000 );
	xhr.send();
}

function saveData( dataArr ){
	var dataTable = [];
	
	for( var i = 0, len = dataArr.length; i < len; i++ ){
		db.execute( 
			'INSERT INTO user ( id, name, age ) VALUES ( ?, ?, ? )', 
			null,
			dataArr[i].name,
			dataArr[i].age
		);
		
		dataTable[i] = Ti.UI.createTableViewRow({ 
			title : dataArr[i].name + ' : ' + dataArr[i].age 
		});
	}
	
	table.setData( dataTable );
	loader.hide(); // ukryj loader
}

// gui
var loader = Ti.UI.createActivityIndicator({
    height :50,
    width :10,
	message : 'Loading data...'
});
var window = Ti.UI.createWindow({
	backgroundColor	:'#ddd',
	fullscreen : true
});
var table = Ti.UI.createTableView({
	backgroundColor : '#fff',
	width : 300,
	height : 360,
	top : 20,
	left : 10,
	borderRadius : 5,
	borderWidth : 1,
	borderColor : '#444',
	separatorColor : '#444',
	scrollable : true,
	rowHeight : 41
});
window.add( table );
window.open();

// database
Ti.Database.install( 'mybase.db', 'mybase' );
	var db = Ti.Database.open( 'mybase' );
	db.execute( 'CREATE TABLE IF NOT EXISTS user ( id INTEGER PRIMARY KEY, name VARCHAR, age INTEGER )' );
	
// main
var q = db.execute( 'SELECT name, age FROM user' );

if( q.rowCount == 0 ){
	loadData();	
}
else{
	var dataTable = [];
	var i = 0;
	
	while( q.isValidRow() ){	
		dataTable[i] = Ti.UI.createTableViewRow({ 
			title : q.fieldByName( 'name' ) + ':' + q.fieldByName( 'age' ) 
		});
		
		i++;
		q.next();
	}
	q.close();
	
	table.setData( dataTable );
}

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ć.

Baza

Oczywiście potrzebna nam jest baza danych i informacjami nt. mapy. Stworzyłem 2 tabelki:

game_map_sprite
spriteId | posX | posY | isWalkable | memo

game_map_field
fieldId | spriteId | mapPosX | mapPosY

Pierwsza zawiera informacje o kafelkach. posX i posY to dane w którym miejscu leży dana kafelka na obrazku wszystkich spritów, czyli zgodnie z obrazkiem:

isWalkable mówi czy wolno chodzić po tym polu, memo w sumie nie jest używane ale zawiera opis obrazka. Wszystkie moje wpisy w tej tabelce prezentują się w ten sposób (dodałem 2 nowe sprity: wolf i mashroom):

(1, 0, 0, 0, 'tree_top_left'),
(2, 1, 0, 0, 'tree_top_right'),
(3, 0, 1, 0, 'tree_bottom_left'),
(4, 1, 1, 0, 'tree_bottom_right'),
(5, 2, 0, 1, 'extra_grass'),
(6, 2, 1, 0, 'bush'),
(7, 3, 0, 1, 'grass'),
(10, 4, 0, 0, 'mashroom'),
(9, 3, 1, 0, 'wolf');

W drugiej tabelce, której zawartość będzie generowana przez edytor map, są informacje jaki sprit leży na jakiej pozycji x,y na mapie. No i to by było na temat struktury bazy.

Ajax action

Teraz przyszła pora na napisanie akcji jaka będzie odbywać się po wypełnieniu komórki mapy w edytorze map. Oczywiście ta akcja będzie wywoływana przez asynchroniczne zapytanie co będzie sprawiało że nasz edytor będzie aplikacją typu RIA (Rich Internet Aplication). Wrące tylko, że bardzo dobrą praktyką jest tworzenie w jednym pliku wszystkich akcji ajaxowych, dzięki temu łatwiej to zabezpieczyć i zarządzać, np. osobny kontroler i poszczególne akcje w modelu MVC.

/ajax/setFoo/foo
/ajax/getFoo  

ja nie będę w taki sposób pisać bo mnie chodzi o przedstawienie problemu i jego rozwiązania a stosując tutaj jakiś framework pracujący zgodnie z wzorcem MVC kodu byłoby więcej, poza tym nie każdy znałby danego framerowka… Stworzyłem plik ajaxAction.php:

require_once './class/DataBase.class.php';
	
	$action = $_GET['act']; 
	
	switch( $action ){
		case 'set_field':
			$sId	= intval( $_GET['sid'] );
			$x 		= intval( $_GET['x'] );
			$y 		= intval( $_GET['y'] );
			
			$db = new DataBase();
			
			$select = $db->select(
				array( 'fieldId' ),
				'game_map_field',
				"WHERE mapPosX = $x AND mapPosY = $y"
			);
			$fieldId = $select[0]['fieldId'];
			
			if( !$fieldId ){
				$db->insert(
					'game_map_field',
					array(
						'spriteId'	=> $sId,
						'mapPosX'	=> $x,
						'mapPosY'	=> $y
					)
				);
			}
			else{
				$db->update(
					'game_map_field',
					array(
						'spriteId'	=> $sId,
						'mapPosX'	=> $x,
						'mapPosY'	=> $y
					),
					"fieldId = $fieldId"
				);
			}
		break;
}

Dołączona plik DataBase.class.php to nic innego jak klasa zarządzająca bazą, prosty DataBaseHandler umożliwiający w prosty sposób wykonywać zapytania SQL`owe. Nie będę tego opisywać. Skrypt jest prościutki. Wpisując w pasek adresu:

.../ajaxAction.php?act=set_field&x=0&y=0&sId=6

NULL, 6, 0, 0

Ajax request

Teraz wystarczy w odpowiednim miejscu wstawić asynchroniczne wysłanie zapytania HTTP w naszym edytorze map. Dokładniej rzecz biorąc wstawimy to w miejsce komentarza:

// ajax query
// not jet...

$('td').click(function(){
	if( actualField ){
		// set image in HTML table 
		var xSprite, ySprite;
		
		xSprite = actualFieldX * -CORE_SIZE_FIELD;
		ySprite = actualFieldY * -CORE_SIZE_FIELD;

		$(this).css( 'background-image', 'url(../gfx/my_map.png)' );
		$(this).css( 'background-position', xSprite+'px '+ySprite+'px' );
		$(this).text('');
			

// new code
		// ajax query
		$.get( 
			'../ajaxAction.php', 
			{
				act		: 'set_field',
				sid		: actualField, // id wybranego sprita
				x		: $(this).attr( 'x' ), // pozycja X na mapie
				y		: $(this).attr( 'y' ) // pozycja Y na mapie
			}
		);
	}
// ~new code end
});

Jedna funkcja w jQuery i już, gotowe ;)

Tworzenia JSON`a z całej mapy

Teraz jeszcze potrzebne nam jest aby po załadowaniu edytora, komórki przedstawiające pola mapy zostały wypełnione. Powinno być to rozwiązane po stronie PHP ale tymczasowo jest to zrobione tak samo w technologii Ajax, zresztą i tak potrzebne na głównej stronie jest pobieranie JSON`a z mapy (ostatecznie będą to kawałki z mapy a nie cała mapa). W ajaxAction.php mam jeszcze jedną akcję:

(...)
	case 'get_all_map':
		$db = new DataBase();
			
		$fields = $db->select(
			array( 'm.spriteId', 'm.mapPosX', 'm.mapPosY', 's.posX', 's.posY' ),
			'game_map_field AS m LEFT JOIN game_map_sprite AS s ON m.spriteId = s.spriteId',
			'ORDER BY mapPosX, mapPosY'
		);
			
		$map = array();
		foreach( $fields as $k => $v ){
			$map[ $v['mapPosY'] ][ $v['mapPosX'] ] = new JsonField( $v['posX'], $v['posY'] ); 
		}
		echo json_encode( $map );
	break;
}
	
class JsonField
{
	public $x;
	public $y;
		
	public function __construct( $x, $y ){
		$this->x = $x;
		$this->y = $y;
	}
}

[y_mapy][x_mapy] = { 
    x: x_sprita_na_obrazku, 
    y: y_sprita_na_obrazku 
}

ajaxAction.php?act=get_all_map

[
	[
		{"x":"0","y":"1"},
		{"x":"1","y":"1"},
		{"x":"0","y":"1"},
		{"x":"1","y":"1"},
		{"x":"0","y":"1"},
		{"x":"1","y":"1"},
		{"x":"2","y":"1"},
		{"x":"0","y":"0"},
		{"x":"1","y":"0"},
		{"x":"0","y":"1"},
		{"x":"1","y":"1"},
		{"x":"0","y":"0"},
		{"x":"1","y":"0"},
		{"x":"0","y":"0"},
		{"x":"1","y":"0"},
		{"x":"0","y":"1"}
	],
	[
		{"x":"1","y":"0"},
		(...)
	]
	(...)
]

Teraz to załadujemy zaraz po utworzeniu drzewka DOM edytora:

$.get( 
	'../ajaxAction.php', 
	{ act: 'get_all_map' },
	function( data ){
		var JSONmap = JSON.parse( data );
		var x, y;
		var xSprite, ySprite;
			
		$('td').each(function( index ){
			y = $(this).parent().find('th').html();
			x = index - ( y * 15 /* 15 is cnt columns */ ) - y;
			$(this).html(
				x+','+y
			);
		
			$(this).attr( 'x', x );
			$(this).attr( 'y', y );
				
			if( JSONmap[y][x] ){
				xSprite = JSONmap[y][x].x * -CORE_SIZE_FIELD;
				ySprite = JSONmap[y][x].y * -CORE_SIZE_FIELD;
		
				$(this).css( 'background-image', 'url(../gfx/my_map.png)' );
				$(this).css( 'background-position', xSprite+'px '+ySprite+'px' );
					
				$(this).html( '');
			}
		});
	}
);

var x, y;
$('td').each(function( index ){
	y = $(this).parent().find('th').html();
	x = index - ( y * 10 ) - y;
	$(this).html(
		x+','+y
	);
});

• 1 wykonujemy asynchroniczne zapytanie o JSON`a z mapą
• 2 jeśli odbierzemy odpowiedź to:
  • 2.1 parsujemy wynik do JSON`a
  • 2.2 liczymy x i y każdego pola mapy i wpisujemy te dane do komórki (to już mieliśmy), przypisujemy te dane do atrybutów x i y
  • 2.3 jeśli istnieje w naszym JSON`ie wpis mówiący o spricie w danym polu to:
  • 2.3.1 wypełnij go odpowiednim spritem i skasuj z niego tekst.

Na dziś to tyle. Cały edytor został zbudowany na szybko i wiele rzeczy trzeba podrasować, idea będzie niezmieniona ale wiele należałoby zmienić, szablon generowany przez PHP, pobieranie zakresu mapy a nie jej całej, możliwość przesuwania osi x i y (wtedy zostanie pobrany nowy zakres), pobieranie spritów z bazy… Jednak nie będzie to już tutaj opisywane, chodziło mi o przedstawienie właśnie idei a nie gotowego sposobu.

Chciałem jeszcze dziś opisać system przesuwania mapy, który jest już stworzony ale wpis rozrósł by się do ogromnych rozmiarów a więc zrobię to innym razem. Tymczasem można się bawić edytorem i mapą

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ć.

Jak to jest zrobione?

To od początku, index.html
 
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Map Editor for Game by `luq`</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="./style/style.css" />
	
	<script type="text/javascript" src="../js/game.cfg.js"></script>
	
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="./js/map_editor.js"></script>
  </head>
<body>
	
	<table>
		<tr id="scaleX">
			<th>.</th>
			<th>0</th>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>4</th>
			<th>5</th>
			<th>6</th>
			<th>7</th>
			<th>8</th>
			<th>9</th>
			<th>10</th>
		</tr>
		<tr>
			<th class="scaleY">0</th>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
                (...)
	</table>
	
	<div id="fields">
		Sprites<br/>
		
		<div style="background-position: 0px 0px;" x="0" y="0" rel="1"></div>
		<div style="background-position: -40px 0px;" x="1" y="0" rel="2"></div>
		<div style="background-position: -80px 0px;" x="2" y="0" rel="5"></div>
		<div style="background-position: -120px 0px;" x="3" y="0" rel="7"></div>
		<div style="background-position: 0px -40px;" x="0" y="1" rel="3"></div>
		<div style="background-position: -40px -40px;" x="1" y="1" rel="4"></div>
		<div style="background-position: -80px -40px;" x="2" y="1" rel="6"></div>
	</div>
</body>
</html>

W tabelce <th /> to liniuszek/miarka czy jak tam kto woli, <td /> natomiast to pola w które możemy „wklejać” sprity, w div[id=fields] zawarte są wszystkie kafelki, oczywiście z wykorzystaniem CSS Sprites. Dodatkowo, dodałem argumenty x i y, które są przyjaźniejszą alternatywą dla mnogości liczby 40 jaki pozycji sprita na głównym obrazku. Odzwierciedla to rysunek już znany z poprzedniego wpisu.

W sumie chyba nie będzie mi to potrzebne ale zawsze warto pewne informacje mieć. Argument rel, natomiast przechowuje mi id tego sprita zgodnie z bazą, ale o niej nie będziemy dziś mówić. Jest mi on niezbędny do wykonania Ajax`owego zapytania generującego SQLowe zapytanie dodające/edytujące kafelkę w podanej pozycji na mapie.

Należałoby jeszcze podać plik ze stylami, style.css

body { margin: 0; padding: 0; font-family: verdana; font-size: 10px; font-weight: bold; }
table { border-spacing: 0; }

#scaleX { background-color: #000; color: #fff; height: 15px;  }
#scaleX th{ border-right: 1px dashed #fff; text-align: center;  }

th.scaleY { background-color: #000; color: #fff; width: 15px; border-top: 1px dashed #fff; }

td { cursor: pointer; text-align: center; color: #bbb; font-size: 9px; padding: 0; margin: 0; }

#fields { margin-top: 20px; }
#fields div { float: left; margin-right: 5px; background-image: url(../../gfx/my_map.png); border: 2px solid #fff; cursor: pointer; }

Tutaj jedynie

#fields div { border: 2px solid #fff; }

Teraz przyszła pora na map_editor.js

$(document).ready(function(){
        // liniuszek X
	$('#scaleX th').css( 'width', CORE_SIZE_FIELD + 'px' );
	$('#scaleX th:first').css( 'width', 15 + 'px' );
	
        // liniuszek Y
	$('th.scaleY').css( 'height', CORE_SIZE_FIELD + 'px' );

	   // szachownica
	$('tr td:odd').css( 'background-color', '#EFEFFF' );
	
        // komórka
	$('#fields div').css({
		'width': CORE_SIZE_FIELD + 'px',
		'height': CORE_SIZE_FIELD + 'px',
	});

Czyli ustawiamy szerokości i wysokości w tabelce korzystając ze stałej CORE_SIZE_FIELD. Następnie:

var x, y;
$('td').each(function( index ){
	y = $(this).parent().find('th').html();
	x = index - ( y * 10 ) - y;
	$(this).html(
		x+','+y
	);
});

// event`s
var actualField 	= null;
var actualFieldX 	= null;
var actualFieldY 	= null;
$('#fields div').click(function(){
    // kasuj ramke
    if( actualField ){
        $('#fields div[rel='+actualField+']').css( 'border-color', '#fff' );
    }
		
    actualField  = $(this).attr( 'rel' );
    actualFieldX = $(this).attr( 'x' );
    actualFieldY = $(this).attr( 'y' );
		
    $(this).css( 'border-color', '#f00' );
		
});

$('td').click(function(){
	if( actualField ){
		// set image in HTML table 
		var xSprite, ySprite;
		
		xSprite = actualFieldX * -CORE_SIZE_FIELD;
		ySprite = actualFieldY * -CORE_SIZE_FIELD;

		$(this).css( 'background-image', 'url(../gfx/my_map.png)' );
		$(this).css( 'background-position', xSprite+'px '+ySprite+'px' );
		//$(this).css( 'color', '#444' );
		$(this).text('');
			
		// ajax query
		// not jet...
	}
});

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ę.

Mapa – przemyślenia

a)
Najprymitywniejszym sposobem generowania mapy jest stworzenie sobie kafelków w każdy z oddzielnym pliku i wczytywanie ustawianie ich jako tło w siatce div`ów.

1.png

2.png

<style type="text/css">
#map div.row { width: 40px; height: 40px; float: left; }
#map div.clear { clear: both; }
</style>

(...)

<div id="map">
    <div class="row">
        <div style="background: url(1.png) no-repeat;"></div>
        <div style="background: url(2.png) no-repeat;"></div>
        <div style="background: url(1.png) no-repeat;"></div>
        <div style="background: url(1.png) no-repeat;"></div>
        (...)
    </div>
    <div class="clear"></div>
    (...)
</div>

Rozwiązanie niedobre z kilku powodów. Po pierwsze, obrazki w osobnych plikach to więcej wysłanych zapytań do serwera (w celu ich uzyskania) co daje większy czas wczytywania strony i większe obciążenie serwera. Po drugie, siatka div`ów nie umożliwia nam operowaniu na poszczególnych pikselach (co nam oferuje canvas), jest to niefajne i trudno się w to integruje. Może to było dobre rozwiązanie jakieś 2 lata temu, kiedy nikt o canvas nie słyszał (a może i nawet dawniej?), ale dziś należy skorzystać z canvas`a, w końcu po to go wymyślono. W końcu ułatwi nam to pracę :)

b)

Już o wiele lepszym sposobem byłaby taka sama siatka div`ów ale z wykorzystaniem CSS Sprites.

map.png

<style type="text/css">
#map div.row { width: 40px; height: 40px; float: left; }
#map div.clear { clear: both; }
</style>

(...)

<div id="map">
    <div class="row">
        <div style="background: url(map.png) 0px 0px no-repeat;"></div>
        <div style="background: url(map.png) -40px 0px no-repeat;"></div>
        <div style="background: url(map.png) 0px 0px no-repeat;"></div>
        <div style="background: url(map.png) 0px 0px no-repeat;"></div>
        (...)
    </div>
    <div class="clear"></div>
    (...)
</div>

W tym wypadku pobieramy tylko jeden obrazek i wyświetlamy go częściami. A więc jest to jedynie jedno zapytanie do serwera. Zresztą taki wielki szum wokół tego całego CSS Sprites się zrobił, wszyscy reklamują jaki to jest szczyt technologi, takie fajne, zajebiste, a rozwiązanie te w świecie programowania deskoptowego (głównie gier, no w sumie tylko tutaj się z tym spotkałem) jest znane od bardzo dawna. Oczywiście żeby mnie ktoś źle nie zrozumiał, fajnie, że takie coś przeniesiono do web`a, ale czy to jest aż takie wielkie cudo, żeby każdy webdeveloper musiał na swoim blogu opisywać i rozwodzić się nad tą, no… nie odkrywczą „techniką”?

c)

Stosujemy element canvas + kafelki w oddzielnych plikach.

d)

Stosujemy canvas + 1 plik z kafelkami pod mapę. To właśnie to rozwiązanie jest najlepsze (przynajmniej w tym przypadku) i zostanie tutaj zaprezentowane.

Do roboty

No to pierwszy na odstrzał idzie index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Game by `luq`</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="./style/style.css" />
	
	<script type="text/javascript">
		var CORE_SIZE_FIELD = 40; // wielkosc kafleki
	</script>
	
	<script type="text/javascript" src="./js/jquery.js"></script>
	<script type="text/javascript" src="./js/Map.class.js"></script>
	<script type="text/javascript" src="./js/start.js"></script>
  </head>
<body>
	<div id="weather"></div>
	<canvas id="game_map" width="400" height="400">
		Upss.. canvas nie działa na tej przeglądarce.
	</canvas>
</body>
</html>

Tutaj za dużo nie ma do tłumaczenia. Chyba z oczywistych powodów została stworzona zmienna CORE_SIZE_FIELD, natomiast div[id=weather] na razie pominę w opisie, o nim będzie na końcu.

style/style.css

body { margin: 0; padding: 0; }

#weather { width: 400px; height: 400px; position: absolute; top: 2px; left: 2px; display: none; }
#game_map { border: 2px solid #777; }

No i teraz to o co głównie mi chodziło w tym wpisie, Map.class.js ale po kawałku:

function Map( mapId ){
	this.mapId = mapId;										// Map id
	this.canvasMap = document.getElementById( this.mapId ); // DOM canvas object
	this.ctx; 												// Canvas context
	this.img;												// Map image (all sprites of map)
	this.sizeFild = CORE_SIZE_FIELD;						// Size of field
	
	if( this.canvasMap.getContext ){
		this.ctx = this.canvasMap.getContext( '2d' );
		
		if( this.ctx ){
			this.img = new Image();
			this.img.src = './gfx/my_map.png';
		}
	}
}

Konstruktor nie robi nic ciekawego. Podajemy mu id elementu canvas, przypisuje do właściwości niezbędne nam dane, tworzy kontekst canvas`a i tworzy obiekt obrazka z wszystkimi naszymi spritami, zresztą oto on:

gfx/my_map.png (pozostawiłem „nieco” miejsca na kolejne sprity)

Teraz czas na metody:

Map.prototype._drawField = function( xCanvas, yCanvas, xImage, yImage ){
	this.ctx.drawImage( 
		this.img, 
		xImage * this.sizeFild, 
		yImage * this.sizeFild, 
		this.sizeFild, 
		this.sizeFild, 
		xCanvas * this.sizeFild, 
		yCanvas * this.sizeFild, 
		this.sizeFild, 
		this.sizeFild
	);
}

Kolejną metodą jest:

Map.prototype.drawMap = function( JSONmap ){
	for( var i = 0; i < 10; i++ ){
		for( var j = 0; j < 10; j++ ){
			this._drawField( j, i, JSONmap[i][j].x, JSONmap[i][j].y );
		}
	}
}

Po prostu wypełnia całą mapę zgodnie z danymi podanym w 2-wymiarowej tablicy obiektów – czyli jest to JSON. Ostatecznie oczywiście te dane będą odbierane z bazy danych, następnie budowany z nich będzie JSON po stronie PHP a my odbierzemy to przez asynchroniczne zapytanie AJAX`owe. JSON taki będzie musiał wyglądać w ten sposób:

var JSONmap = [
    // 1. wiersz canvasa
    [
        { 'x' : 0, 'y' : 1 }, // 1. kolumna canvasa
		{ 'x' : 1, 'y' : 1 }, // 2. kolumna canvasa
		{ 'x' : 3, 'y' : 0 }, (...)
		{ 'x' : 3, 'y' : 0 },
		{ 'x' : 2, 'y' : 0 },
		{ 'x' : 3, 'y' : 0 },
		{ 'x' : 0, 'y' : 1 },
		{ 'x' : 1, 'y' : 1 },
		{ 'x' : 0, 'y' : 1 },
		{ 'x' : 1, 'y' : 1 }
	],
	// 2. wiersz 
	(...)
]

We właściwościach x i y oczywiście są – odpowiednio – wiersz oraz kolumna spritów, liczone od zera:

No i to w sumie wszystko. js/start.js zawiera:

$(document).ready(function(){
    var oMap = new Map( 'game_map' );
    var JSONmap = (...) // nie bedę tego tu wklejał...
    oMap.drawMap( JSONmap );
});

Jeszcze dopisałem mały bajer. Stworzyłem sobie możliwość efektów pogodowych, świetlnych (dzień/noc) na mapie. Po to jest właśnie ten div[id=weather]. W js/Map.class.js mamy jeszcze:

/**
 * Set night mode
 */
Map.prototype.night = function(){
    $('#weather').css( 'background-color', '#000' );
    $('#weather').fadeTo( 2000, 0.3 );
}

/**
 * Set day mode
 */
Map.prototype.day = function(){
    $('#weather').fadeOut( 2000 );
}

natomiast w js/start.js

$('#game_map').click(function(){
    oMap.night();
});
	
$('#weather').click(function(){
    oMap.day();
});

Co umożliwia po kliknięciu zmienić porę dnia (oczywiście ostatecznie nie będzie to tak działać). Zresztą zobacz sam jak to działa, oraz podejrzyj kod jeśli chcesz.

LINK

    similar_text( 'abrakadabra', 'kadabra', $p );
    echo $p; // 77.7777777778

Wonderfully! Tylko, że mnie potrzeba było pobrać wszystkie podobne dane (powiedzmy 80%) z bazy wobec wpisanego ciągu, więc skrajnym idiotyzmem byłoby pobieranie wszystkich rekordów i mielenie tego przez PHP. Chodzi o zapytanie w stylu:

      SELECT foo.id FROM foo WHERE SIMILAR( foo.name, 'jakis string' ) > 0.8

Oczywiście funkcja SIMILAR nie występuje w MySQL`u a więc trzeba napisać własną. Nigdy nie pisałem własnej funkcji/procedury składowej w MySQL`u więc była to dla mnie ciekawa lekcja. No dobra… nawet nie napisałem tej funkcji, zainstalowałem tylko to co podał mi wookieb na forum php.pl. Ogólnie similar_text korzysta z algorytmu Olivera, natomiast istnieje też coś takiego jak Odległość Levenshteina, którą zresztą ma odzwierciedlenie w PHP levenshtein(). Odległość Levenshteina oczywiście jak można przeczytać na wiki do której podałem linka, zwraca liczbę całkowitą – najmniejsza ilość zmian jakie należy wykonać na ciągu A, aby go zamienić w ciąg B. Ofc. można liczyć z tego procent:

    $word  	= 'kadabra';
    $word2 	= 'abrakadabra';
	$len1 = strlen( $word );
	$len2 = strlen( $word2 );
    $len = $len1 > $len2 ? $len1 : $len2; 
	
    $p = round(( 1 -levenshtein( $word, $word2 ) / $len ) * 100);
    echo $p; // 64

No i właśnie takie rozwiązanie zastosowałem tyle, że na bazie danych. Wykonanie jest w sumie banalne, wystarczy zainstalować (? nie wiem czy to dobre słowo) dwie funkcje i gotowe. Tworzymy plik 1.sql:

DELIMITER //

CREATE FUNCTION LEVENSHTEIN (s1 VARCHAR(255), s2 VARCHAR(255))
  RETURNS INT
    DETERMINISTIC
      BEGIN
        DECLARE s1_len, s2_len, i, j, c, c_temp, cost INT;
        DECLARE s1_char CHAR;
        DECLARE cv0, cv1 VARBINARY(256);
        SET s1_len = CHAR_LENGTH(s1), s2_len = CHAR_LENGTH(s2), cv1 = 0x00, j = 1, i = 1, c = 0;
        IF s1 = s2 THEN
          RETURN 0;
        ELSEIF s1_len = 0 THEN
          RETURN s2_len;
        ELSEIF s2_len = 0 THEN
          RETURN s1_len;
        ELSE
          WHILE j <= s2_len DO
            SET cv1 = CONCAT(cv1, UNHEX(HEX(j))), j = j + 1;
          END WHILE;
          WHILE i <= s1_len DO
            SET s1_char = SUBSTRING(s1, i, 1), c = i, cv0 = UNHEX(HEX(i)), j = 1;
            WHILE j <= s2_len DO
                SET c = c + 1;
                IF s1_char = SUBSTRING(s2, j, 1) THEN SET cost = 0; ELSE SET cost = 1; END IF;
                SET c_temp = CONV(HEX(SUBSTRING(cv1, j, 1)), 16, 10) + cost;
                IF c > c_temp THEN SET c = c_temp; END IF;
                SET c_temp = CONV(HEX(SUBSTRING(cv1, j+1, 1)), 16, 10) + 1;
                IF c > c_temp THEN SET c = c_temp; END IF;
                SET cv0 = CONCAT(cv0, UNHEX(HEX(c))), j = j + 1;
            END WHILE;
            SET cv1 = cv0, i = i + 1;
          END WHILE;
        END IF;
        RETURN c;
      END
//

DELIMITER ;

oraz 2.sql

DELIMITER //

CREATE FUNCTION LEVENSHTEIN_RATIO (s1 VARCHAR(255), s2 VARCHAR(255))
  RETURNS INT
    DETERMINISTIC
      BEGIN
        DECLARE s1_len, s2_len, max_len INT;
        SET s1_len = LENGTH(s1), s2_len = LENGTH(s2);
        IF s1_len > s2_len THEN SET max_len = s1_len; ELSE SET max_len = s2_len; END IF;
        RETURN ROUND((1 - LEVENSHTEIN(s1, s2) / max_len) * 100);
      END
//

DELIMITER ;

Odpalamy konsole, logujemy się, nastepnie:

mysql> use foo;
mysql> source c:/1.sql;
mysql> source c:/2.sql;
mysql> SELECT LEVENSHTEIN_RATIO( 'abrakadabra', kadabra ); // 64 :)

to wszystko co musimy zrobić. Jeśli chodzi o optymalizację (przy tabelce z ~1000 rekordów działa to ~7 sek.) to można by okrajać mielony obszar z tych ~1000 rekordów. Jednym pomysłem jest ucinanie go do rekordów o tej samej literze (ludzie raczej nie popełniają literówki w pierwszym znaku).

SELECT 
    id, name, LEVENSHTEIN_RATIO( name, 'luq' ) AS similar
FROM (
    SELECT id, name
    FROM table
    WHERE SUBSTRING( name, 1, 1 ) = 'l'
) AS foo
HAVING similar > 80

Drugim pomysłem (który wysnuł wookieb) jest stworzenie w tabelce pole zawierającego długość stringa (żeby tego nie liczyć, bo wtedy to byłoby wolniejsze) i okrajać sobie zakres szukania do rekordów mających długość +/- np. 2 znaki.

To by było na tyle. Z tego miejsca, serdeczne dzięki wookieb!