Przede wszystkim przebudujmy kilka linijek odpowiedzialnych za wykrywanie zdarzeń klawiatury. O ile kod ten wciąż nie jest doskonały i wymaga dalszego doszlifowania, o tyle aktualnie musi nam wystarczać.

if(keyHandler.isHolded(37)) // LEFT
{
	GameTank.changeDirection(0);
	if(GameTank.x>0)
		GameTank.changePosition(-1,0);
}
else if(keyHandler.isHolded(38)) // UP
{
	GameTank.changeDirection(1);
	if(GameTank.y>1)
		GameTank.changePosition(0,-1);
}
else if(keyHandler.isHolded(39)) // RIGHT
{
	GameTank.changeDirection(2);
	if(GameTank.x<480)
		GameTank.changePosition(1,0);
}
else if(keyHandler.isHolded(40)) // DOWN
{
	GameTank.changeDirection(3);
	if(GameTank.y<480)
		GameTank.changePosition(0,1);
}

Co się zmieniło? Wszelkie polecenia zmiany położenia czołgu są teraz przekazywane do metody GameTank.changePosition(). To ona zabezpiecza grę przed przecinaniem się obiektów.

changePosition: function(x,y)
{
	var newPosition = [this.x+x, this.y+y];
	var newField = [Math.ceil((newPosition[0])/32)-1, Math.ceil((newPosition[1]/32))-1];
 
	if(x)
	{
		var offset = newPosition[1]%32;
		if(x>0)
			var fields = [[1,0],[1,1]];
		else
			var fields = [[0,0],[0,1]];
	}
	else
	{
		var offset = newPosition[0]%32;
		if(y>0)
			var fields = [[0,1],[1,1]];
		else
			var fields = [[0,0],[1,0]];
	}
 
	var checkField = GameBoard.board[newField[1]+fields[0][1]][newField[0]+fields[0][0]];
	if(checkField==0 || checkField==1 || offset==0 || offset>29)
	{
		if(offset>0 && offset<6)
		{
			this.x+=x;
			this.y+=y;
		}
		else
		{
			var checkField = GameBoard.board[newField[1]+fields[1][1]][newField[0]+fields[1][0]];
			if(checkField==0 || checkField==1)
			{
				this.x+=x;
				this.y+=y;
			}
		}
	}
},

Najpierw określam współrzędne nowego położenia czołgu(jego górnego lewego narożnika) oraz współrzędne pola na krórym się znajduje. Następnie wyznaczam odstęp(offset) jaki dzieli czołg od krawędzi kratki(Pamiętajmy, że czołg nie jest szeroki na 32px tak jak pole na mapie). Dzięki określeniu pewnej granicy błędu nie będziemy musieli ustawiać się idealnie aby przejechać między dwoma obszarami blokującymi. Znacznie ułatwi to sterowanie.

Kolejnym krokiem jest określenie 2 pól(fields), na podstawie których badane będą kolizje. To jakie pola wybierze skrypt zależy od kierunku w jakim się poruszamy. A są to:

Następnie jest sprawdzany rodzaj tych pól oraz odległość czołgu o nich. Jeżeli wszystko się zgadza, pozycja czołgu zostaje zmieniona.

Całość działa całkiem sprawnie. Efekt końcowy możesz zobaczyć tutaj

Zasada jest bardzo prosta. To co możemy generować raz, generujemy tylko raz. Następnie zapisujemy wynik do oddzielnego obiektu <canvas> i w razie potrzeby kopiujemy do głównego obiektu naszej gry.

Na potrzeby mojego przykładu stworzyłem dynamicznie dwa nowe obiekty canvas, jeden przechowujący wygenerowaną mapę, drugi czołg(obracanie obrazków jest bardzo czasochłonne).

Uporządkowałem troszkę kod umieszczając wszelkie dane czołgu do klasy GameTank

var GameTank = {
	x:0,
	y:480,
	canvas: null,
	ctx: null,
	direction: 1,  // 0= LEFT 1 =UP, 2 = RIGHT, 3=DOWN
 
	changeDirection: function(newDirection)
	{
		if(newDirection!=GameTank.direction)
		{
			GameTank.direction = newDirection;
 
			GameTank.ctx.clearRect(0,0,32,32);
			GameTank.ctx.save();
			switch(GameTank.direction)
			{
				case 2:
					GameTank.ctx.rotate(90 * Math.PI / 180);
					GameTank.ctx.drawImage(GameMain.img.tank,0,-32);
					break;
				case 3:
					GameTank.ctx.rotate(180 * Math.PI / 180);
					GameTank.ctx.drawImage(GameMain.img.tank,-32,-32);
					break;
				case 0:
					GameTank.ctx.rotate(270 * Math.PI / 180);
					GameTank.ctx.drawImage(GameMain.img.tank,-32,0);
					break;
				default:
					GameTank.ctx.drawImage(GameMain.img.tank,0,0);
			}
			GameTank.ctx.restore();
		}
	},
	init: function()
	{
		this.canvas = document.createElement('canvas');
 
		this.canvas.width = 32; 
		this.canvas.height = 32; 
 
		this.ctx = this.canvas.getContext('2d');
		this.ctx.drawImage(GameMain.img.tank,0,0);
	}
};

W analogiczny sposób tworzony jest obiekt <cavas> dla mapy

var GameBoard = {
	canvas: null,
	ctx: null,
	TEXTURE_ID: {ICE: 1, BRICK: 2, WATER: 3}, 
	textures: [null, 'images/ice.png', 'images/brick.png', 'images/water.png'],
 
	board:[
		[1,1,1,1,1,1,2,2,2,2,1,1,1,1,1,1],
		[1,1,1,2,2,2,2,2,2,2,2,2,2,1,1,1],
		[1,1,2,2,2,2,2,2,2,2,2,2,2,2,1,1],
		[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
		[1,2,2,1,1,2,2,2,2,2,2,1,1,2,2,1],
		[2,2,2,1,3,2,2,2,2,2,2,1,3,2,2,2],
		[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
		[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
		[2,2,2,2,2,2,2,1,1,2,2,2,2,2,2,2],
		[0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0],
		[0,2,2,2,1,2,2,2,2,2,2,1,2,2,2,0],
		[0,2,2,2,2,1,1,1,1,1,1,2,2,2,2,0],
		[0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0],
		[0,0,0,2,2,2,2,2,2,2,2,2,2,0,0,0],
		[0,0,0,0,0,0,2,2,2,2,0,0,0,0,0,0],
		[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
		],
	drawBoard: function() {
 			this.ctx.clearRect(0,0,512,512);
 
			for(var y=0; y<16; y++)
			{
				for(var x=0; x<16; x++)
				{
					if(this.board[y][x]>0)
					{
						this.ctx.save();
						this.ctx.fillStyle = this.textures[this.board[y][x]];
						this.ctx.fillRect(x*32,y*32,32,32);
						this.ctx.restore();
					}
				}
			}
	},
	preloadTextures: function(i){
		var img = new Image();
		img.src = this.textures[i];
		img.onload = function() {
 
			GameBoard.textures[i] = GameBoard.ctx.createPattern(img, 'repeat');
			if(GameBoard.textures[i+1])
				GameBoard.preloadTextures(i+1);
			else{
				GameBoard.drawBoard();
				GameTank.init();
				window.setInterval(GameMain.mainLoop,10);
			}
		}
	},
	init: function (){
		this.canvas = document.createElement('canvas');
		this.canvas.width = 512; 
		this.canvas.height = 512; 
 
		this.ctx = this.canvas.getContext('2d');
 
		this.preloadTextures(1);
	}
};

Główna klasa gry jedynie składa obraz ze wszystkich elementów

var GameMain = {
	canvas: null,
	ctx: null,
	img: {},
	mainLoop: function(){
 			GameMain.ctx.clearRect(0,0,512,512);
			GameMain.ctx.drawImage(GameBoard.canvas, 0, 0,512,512,0,0,512,512);
 
			if(keyHandler.isHolded(37)) // LEFT
			{
				GameTank.changeDirection(0);
				if(GameTank.x>0)
					GameTank.x-=1;
			}
			else if(keyHandler.isHolded(38)) // UP
			{
				GameTank.changeDirection(1);
				if(GameTank.y>0)
					GameTank.y-=1;
			}
			else if(keyHandler.isHolded(39)) // RIGHT
			{
				GameTank.changeDirection(2);
 
				if(GameTank.x<480)
					GameTank.x+=1;
			}
			else if(keyHandler.isHolded(40)) // DOWN
			{
				GameTank.changeDirection(3);
				if(GameTank.y<480)
					GameTank.y+=1;
			}
 
			GameMain.ctx.drawImage(GameTank.canvas, 0, 0,32,32,GameTank.x,GameTank.y,32,32);
 			FrameCounter.updateFPS();
	},
 
	init: function(){
		this.canvas = document.getElementById('game');
		if (this.canvas.getContext)
			this.ctx = this.canvas.getContext("2d");
 
		this.img.tank = new Image();
		this.img.tank.src = 'images/btank.png';
		this.img.tank.onload = function(){
			GameBoard.init();
		}
		document.addEventListener('keydown', keyHandler.keyDown, false);
		document.addEventListener('keyup', keyHandler.keyUp, false);
	}
}

Kolejną, obok generowania grafiki, czasochłonną operacją jest liczenie czasu. Spróbujmy ograniczyć wywoływanie pewnych funkcji w liczniku FPS. Czas liczył będę co 10 klatek.

var FrameCounter = {
	x: 0,
	lastFrameTime: new Date().getTime(),
	updateFPS: function(){
		if(this.x==10)
		{
			var currentTime = new Date().getTime();
 
			document.getElementById('fps').innerHTML = Math.floor(10000/(currentTime-this.lastFrameTime),2)+'fps';
			this.lastFrameTime = currentTime;
			this.x=0;
		}
		else
			this.x++
	}
};

Poza przyspieszeniem gry zauważymy również zmiany w działaniu samego licznika. Jego odświeżanie będzie rzadsze i jednocześnie przyjemniejsze dla ludzkiego oka.

Technika, którą tutaj pokazałem bardzo przypomina tą ze zwykłych gier DHTML budowanych w oparciu o odpowiednio pozycjonowane znaczniki <div>. Dlaczego nie robię tak samo w przypadku znaczników <canvas>? Po prostu sądzę, że takie rozwiązanie jest mniej eleganckie. Tworzenie jednego obrazu lepiej przypomina klasyczne gry komputerowe. Czas( oraz licznik FPS) pokaże, czy nie zmienię zdania…

Działające demo dostępne jest TUTAJ.

Dlaczego tak długo nie pisałem? No cóż miałem sporo pracy, a czerwiec to nie najlepszy czas aby odnaleźć dodatkowych kilka godzin. Jutro postaram się opisać coś bardziej skomplikowanego .

UWAGA: Artykuł jest kontynuacją poprzedniego: Canvas — Rysujemy mapę

Przede wszystkim potrzebujemy czołgu. Na potrzeby artykułu oraz mojej gry stworzyłem prosty szkic w GIMP-ie:

Zanim umieścimy go na planszy, przeanalizujmy kilka innych ważnych aspektów.

Obsługa klawiatury

Aby sterować naszym czołgiem musimy stworzyć obiekt przechwytujący zdarzenia klawiatury. Najbardziej problematyczny jest jednak sposób ich działania w JavaScript. Dla przeciętnego klawisza są wywoływane 4 zdarzenia:

1. keydown
2. keypress
3. textInput
4. keyup

Zdarzenie textInput zdefiniowane niedawno przez W3C obsługują, bodajże, tylko przeglądarki w oparciu o silnik WebKit. Z pozostałymi zdarzeniami jest różnie. Keypress jest pomijane w przypadku klawiszy specjalnych takich jak shift, alt i ctrl. Niestety nie ma jasno zdefiniowanej listy klawiszy specjalnych. Przeglądarki w oparciu o WebKit zaliczają do nich np. klawisze strzałek, FireFox już nie. Co więcej identyfikacja klawiszy w różnych przeglądarkach jest realizowana w oparciu o inne pola(event.keyCode, event.which oraz event.charCode). Na szczęście wszystkie całkiem sprawnie obsługują pole keyCode, więc nie jest to aż tak ogromny problem(pomijając fakt, że czasami keyCode dla tego samego klawisza jest inny w różnych przeglądarkach). Podsumowując. Obsługa klawiatury w JavaScript to istny koszmar i moim zdaniem powinna zostać przebudowana. Wystarczy pozostawić keydown, textInput oraz keyup oraz ujednolicić kody klawiszy. Jest jednak lista klawiszy bezpiecznych(działających identycznie lub bardzo podobnie w różnych środowiskach). Znalazłem w sieci ciekawe zestawienie na ten temat.

Warto wiedzieć w jaki sposób działa zdarzenie przytrzymania klawisza. Przeglądarki realizują to bardzo dziwnie. W przypadku wciśnięcia klawisza jest wywoływana akcja keydown, keypress oraz keyup. Następnie wywoływane jest ponownie zdarzenie keydown, po nim keypress oraz znów keyup. I tak, aż do momentu puszczenia klawisza. W naszym przypadku zdarzenie keypress pominiemy(tym bardziej, że w przypadku strzałek nie zawsze jest ono wywoływane) więc zaobserwujemy:

keydown
keyup
keydown
keyup
(…)
keydown
keyup

Oczywiście w przypadku naszej gry akcja utrzymywania klawisza musi być ciągła dlatego musimy opóźnić zwolnienie klawisza. Napiszmy prostą klasę.

var keyHandler = {
 
    keyLastEvent: [], //true = keyDown, false = keyUp
    keyStatus: [],
 
    keyDown: function(e){
        // ustawienie statusu na jeden(klawisz wcisniety po raz pierwszy)
        if(keyHandler.keyStatus[e.keyCode]===undefined)
        {
            keyHandler.keyStatus[e.keyCode] = 1;
            keyHandler.keyLastEvent[e.keyCode] = 1;
        }
        else
        {
            if(!keyHandler.keyLastEvent[e.keyCode]) // ostatnia akcja byl keyUp => powtarzane down, up; down, up
                keyHandler.keyStatus[e.keyCode]++;
 
            keyHandler.keyLastEvent[e.keyCode] = 1;
        }
    },
 
    keyUp: function(e){
        keyHandler.keyLastEvent[e.keyCode] = 0;
 
        // odcisniecie klawisza z 10ms opóźnieniem
        window.setTimeout(keyHandler.decreaseKeyStatus(e.keyCode), 20);
    },
 
    decreaseKeyStatus: function(keyCode){
        this.keyStatus[keyCode]--;
    },
    isHolded: function(key){
        return (this.keyStatus[key]>0);
    }
};

Klasa zawiera tablicę klawiszy. W przypadku wciśnięcia np. strzałki w lewo(keyCode = 37) następuje zwiększenie o jeden wartości keyStatus[37]. Jeżeli ta wartość jest większa od zera metoda isHolded() zwraca true co informuje nas, że klawisz jest przytrzymywany. W przypadku systemów z rodziny Windows zdarzenie keyUp nie jest powtarzane. Zatem zwiększenie wartości naszego licznika powinno nastąpić tylko raz w przypadku pierwszego pojawienia się zdarzenia keyDown. Aby wiedzieć jakiego rodzaju zdarzenie zostało ostatnio wywołane(up czy down) stworzyłem zmienną keyLastEvent i modyfikuję ją wg. potrzeb. Dzięki takiej budowie naszej klasy(tj. bez warunkowych lini kodu zależnych od systemu operacyjnego lub przeglądarki) akcja przytrzymania klawisza zostanie poprawnie rozpoznana nawet w przypadku poprawienia błędów w jednej z przeglądarek.

Aby kod ten zadziałał potrzebujemy dodatkowo określić, które z naszych funkcji nasłuchują. Zrobimy to w metodzie init() obiektu GameBoard tuż pod kodem ładującym tekstury.

        this.preloadTextures(1);
 
        document.addEventListener('keydown', keyHandler.keyDown, false);
        document.addEventListener('keyup', keyHandler.keyUp, false);

Pętla główna

W przypadku gier ważne jest utworzenie pętli głównej programu. Będzie ona za każdym razem sprawdzała stan zdarzeń pochodzących z klawiatury, sieci oraz sztucznej inteligencji. W przypadku małych gier(np. kółko i krzyżyk, sudoku, saper) jest to nieistotne, u nas — w grze pełnej animacji — po prostu konieczne.

Stwórzmy dodatkowy obiekt będący centralną sterownią naszej gry.

var GameMain = {
    img: {},
    x:0,
    y:480,
    direction: 1,  // 0= LEFT 1 =UP, 2 = RIGHT, 3=DOWN
    mainLoop: function(){
 
            GameBoard.drawBoard();
 
            if(keyHandler.isHolded(37)) // LEFT
            {
                GameMain.direction = 0;
                if(GameMain.x>0)
                    GameMain.x-=1;
            }
            else if(keyHandler.isHolded(38)) // UP
            {
                GameMain.direction = 1;
                if(GameMain.y>0)
                    GameMain.y-=1;
            }
            else if(keyHandler.isHolded(39)) // RIGHT
            {
                GameMain.direction = 2;
 
                if(GameMain.x<480)
                    GameMain.x+=1;
            }
            else if(keyHandler.isHolded(40)) // DOWN
            {
                GameMain.direction = 3;
                if(GameMain.y<480)
                    GameMain.y+=1;
            }
 
 
            for(var i=37; i<41; i++)
            {
                if(keyHandler.isHolded(i))
                    document.getElementById('key-'+i).style.background = 'red';
                else
                    document.getElementById('key-'+i).style.background = 'white';
            }
 
            GameBoard.ctx.save();
            GameBoard.ctx.translate(GameMain.x,GameMain.y);
            switch(GameMain.direction)
            {
                case 2:
                    GameBoard.ctx.rotate(90 * Math.PI / 180);
                    GameBoard.ctx.drawImage(GameMain.img.tank,0,-32);
                    break;
                case 3:
                    GameBoard.ctx.rotate(180 * Math.PI / 180);
                    GameBoard.ctx.drawImage(GameMain.img.tank,-32,-32);
                    break;
                case 0:
                    GameBoard.ctx.rotate(270 * Math.PI / 180);
                    GameBoard.ctx.drawImage(GameMain.img.tank,-32,0);
                    break;
                default:
                    GameBoard.ctx.drawImage(GameMain.img.tank,0,0);
 
            }
            GameBoard.ctx.restore();
             FrameCounter.updateFPS();
    },
 
    init: function(){
        this.img.tank = new Image();
        this.img.tank.src = 'images/btank.png';
        this.img.tank.onload = function(){
            GameBoard.init();
        }
    }
}

Metoda mainLoop() będzie wywoływana co określony, bardzo krótki czas. Dzięki temu będziemy w stanie na bierząco wychwytywać nadchodzące zdarzenia.

Podzielona jest ona na kilka akcji. Pierwszą z nich jest rysowanie mapy. Następnie sprawdzamy poszczególne klawisze strzałek. W przypadku przytrzymania jedngo z nich, zmieniamy współrzędne naszego czołgu — pola x oraz y klasy GameMain. Kolejnym krokiem jest zapisanie stanu obiektu canvas. Translacja o wektor, obrót w odpowiednim kierunku oraz rysowanie czołgu. Następnie przywracamy stan obszaru canvas i wywołujemy licznik FPS

Odczyt grafiki czołgu umieściłem w metodzie init(). Jest to nasza nowa metoda inicjalizująca, którą musimy wywołać aby uruchomić grę.

Licznik FPS

Ważnym elementem podczas testowania gry jest licznik FPS. Dzięki niemu będziemy mogli określić, które elementy gry są napisane nieoptymalnie oraz, który kod należy wymienić. Oko ludzkie jest w stanie zaobserwować jedynie 25 klatek filmu w każdej sekundzie. Dla mnie jest to jednak mało. Spróbujmy sprawdzić aby gra posiadała przynajmniej 40fps. Moja klasa licząca ilość klatek wygląda następująco:

var FrameCounter = {
 
    lastFrameTime: new Date().getTime(),
    updateFPS: function(){
        var currentTime = new Date().getTime();
 
        document.getElementById('fps').innerHTML = Math.floor(1000/(currentTime-this.lastFrameTime),2)+'fps';
        this.lastFrameTime = currentTime;
    }
};

Jak ten kod działa? W każdej klatce obliczana jest różnica pomiędzy aktualnym czasem oraz czasem wyświetlania poprzedniej klatki. W ten sposób możemy obliczyć czas(w milisekundach) wykonywania się jednej klatki. Dzieląc przez tą wartość 1000 otrzymujemy ilość klatek na sekundę.

Uruchomienie

Zmieniona została klasa inicjująca naszą grę więc w metodzie GameBoard.preloadTextures() musi zajść lekka zmiana:

    preloadTextures: function(i){
        var img = new Image();
        img.src = this.textures[i];
        img.onload = function() {
 
            GameBoard.textures[i] = GameBoard.ctx.createPattern(img, 'repeat');
            if(GameBoard.textures[i+1])
                GameBoard.preloadTextures(i+1);
            else
                window.setInterval(GameMain.mainLoop,10);
        }
    },

Gotowe! Pełny kod źródłowy z dzisiejszego artykułu jest dostępny również online, jako działająca całość. Zapraszam do testów.

Optymalizacja

Po uruchomieniu gry zapewne zauważyłeś, że działa ona bardzo wolno. Jedynie przeglądarki działające w oparciu o WebKit potrafią osiągnąć oczekiwane 40 klatek. Poniżej dołączam małe zestawienie przeglądarek(aktualne ustawienia — odświeżanie klatki co 10ms — powoduje, że maksymalna ilość klatek na sekundę to 100).

Oczywiście jest to zbyt mało aby gra była w pełni grywalna, ponieważ na mapie poruszać będzie się kilka czołgów otoczonych szeregiem animacji. Pamiętajmy jednak, że kod, który umieściłem na serwerze jest niezoptymalizowany. W kolejnych artykułach przedstawię sztuczki jak przyspieszyć rysowanie elementów w obiekcie canvas oraz jak skrócić czas wykonywania się zwykłego kodu JavaScript.

Przede wszystkim potrzebujemy obiektu canvas o rozmiarach 512x512px(16x16 pól o rozmiarach 32x32px).

<canvas id="gameBoard" width="512" height="512"></canvas>

Do wygenerowania mapy potrzebujemy również kilku tekstur. Tymczasowo posiadam jedynie trawę, wodę, cegłę oraz lód.

Trawę ustawiłem jako tło elementu canvas bezpośrednio w pliku CSS. Spróbujmy stworzyć główną klasę o nazwie GameBoard.

var GameBoard = {
    ctx: null,
    TEXTURE_ID: {ICE: 1, BRICK: 2, WATER: 3}, 
    textures: [null, 'images/ice.png', 'images/brick.png', 'images/water.png'],
 
    board:[
        [1,1,1,1,1,1,2,2,2,2,1,1,1,1,1,1],
        [1,1,1,2,2,2,2,2,2,2,2,2,2,1,1,1],
        [1,1,2,2,2,2,2,2,2,2,2,2,2,2,1,1],
        [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
        [1,2,2,1,1,2,2,2,2,2,2,1,1,2,2,1],
        [2,2,2,1,3,2,2,2,2,2,2,1,3,2,2,2],
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
        [2,2,2,2,2,2,2,1,1,2,2,2,2,2,2,2],
        [0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0],
        [0,2,2,2,1,2,2,2,2,2,2,1,2,2,2,0],
        [0,2,2,2,2,1,1,1,1,1,1,2,2,2,2,0],
        [0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0],
        [0,0,0,2,2,2,2,2,2,2,2,2,2,0,0,0],
        [0,0,0,0,0,0,2,2,2,2,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],
 
    drawBoard: function() {
        for(var y=0; y<16; y++)
        {
            for(var x=0; x<16; x++)
            {
                if(this.board[y][x]>0)
                {
                    this.ctx.save();
                    this.ctx.fillStyle = this.textures[this.board[y][x]];
                    this.ctx.fillRect(x*32,y*32,32,32);
                    this.ctx.restore();
                }
            }
        }
    },
 
    preloadTextures: function(i){
        var img = new Image();
        img.src = this.textures[i];
        img.onload = function() {
 
            GameBoard.textures[i] = GameBoard.ctx.createPattern(img, 'repeat');
            if(GameBoard.textures[i+1])
                GameBoard.preloadTextures(i+1);
            else
                GameBoard.drawBoard();
        }
    },
 
    init: function (){
        this.canvas = document.getElementById('gameBoard');
        if (this.canvas.getContext)
        {
            this.ctx = this.canvas.getContext("2d");
            this.preloadTextures(1);
        }
    }
};

Pierwsze pole naszego obiektu — ctx(context) to kontekst obiektu canvas. Po przez niego odwołujemy do wszystkich metod rysujących. Następny obiekt — TEXTURE_ID — jest niczym innym jak zbiorem stałych(troszkę to przypomina enum znane z c++). W tym przykładzie nie jest on w ogóle używany jednak w przyszłości wygodniejsze będzie odwoływanie się za pomocą nazw. Kolejne pole — textures — to tablica adresów do naszych tekstur. Zauważ, że indeksy w tej tablicy odpowiadają wartościom stałych w TEXTURE_ID( TEXTURE_ID.ICE = 1 oraz textures[1] = ‚images/ice.png’). Przyjąłem, że tekstura zerowa to po prostu tekstura pusta(pełna przezroczystość). Na końcu widnieje tablica board zawierająca informacje o każdym polu. Liczba od 0 do 3 określa rodzaj tekstury.

init()

Metoda ta wyłapuje kontekst naszego pola canvas zapisuje go do pola ctx oraz wywołuje metodę preloadTextures(1). Rozpoczniemy ładowanie tekstur rozpoczynając od tej o identyfikatorze jedynki(zero jest zarezerwowane dla tekstury pustej).

preloadTextures()

Jako parametr metoda ta przyjmuje identyfikator tekstury(jej indeks w tablicy textures). Najpierw tworzymy pusty obraz, a następnie ustalamy jego adres. Po załadowaniu pliku z grafiką generujemy nowy wzór za pomocą ctx.createPattern() oraz nadpisujemy nim adres przechowywany w tablicy textures. Następnie sprawdzamy czy tekstura o identyfikatorze o jeden większym istnieje. Jeśli tak ładujemy ją. Jeśli nie wyświetlamy mapę

drawBoard()

Ta metoda rysuje pole po polu przechodząc przez wszystkie elementy z tablicy board. Sądzę, że kod jest oczywisty.

Efekt działania skryptu:

Co następnym razem?

Umieścimy na planszy naszą postać oraz zaprogramujemy metody odpowiedzialne za wyłapywanie zdarzeń klawiatury. Możliwe stanie się płynne poruszanie po mapie.

Jako obraz poglądowy wybrałem jedno z moich zdjęć:

Spróbujmy najpierw stworzyć obiekt canvas, nadać mu identyfikator oraz po prostu wczytać do niego obrazek.

<canvas id="myCanvas" width="600" height="150">Brak obsługi Canvas</canvas>

// wybranie elementu <canvas>
var myCanvas = document.getElementById('myCanvas');
 
// sprawdzenie czy można pobrać kontekst
if (myCanvas.getContext) {
  // pobranie "kontekstu 2d"
  var ctx = myCanvas.getContext('2d');
  if (ctx) {
 
  // stworzenie nowego obrazka
  var img = new Image();
  // okreslenie adresu
  img.src = '/examples/canvas1/mini.jpg';
 
  // stworzenie zdarzenie wywołanego po wczytaniu obrazka
  img.addEventListener('load', function () {
 
    // rysuj obrazek rozpoczynajac od wspolrzednych 0,0 pola canvas
    ctx.drawImage(this, 0,0, 150, 150);

Kolejnym krokiem jest wczytanie informacji o pliku. Chcę stworzyć 3 modyfikacje mojego zdjęcia więc robię to trzykrotnie.

   // Get the pixels.
    var imgdata = ctx.getImageData(0, 0, 150, 150);
    var imgdata2 = ctx.getImageData(0, 0, 150, 150);
    var imgdata3 = ctx.getImageData(0, 0, 150, 150);

Spróbujmy wykonać pierwsze przekształcenie polegające na konwersji zdjęcia do palety szarości.

   var pix = imgd.data; 
   for (var i = 0, n = pix.length; i < n; i += 4) {
      pix[i] = 0.2989*pix[i] + 0.5870*pix[i+1] + 0.1140*pix[i+2]; // czerwony
      pix[i+1] = 0.2989*pix[i] + 0.5870*pix[i+1] + 0.1140*pix[i+2]; // zielony
      pix[i+2] = 0.2989*pix[i] + 0.5870*pix[i+1] + 0.1140*pix[i+2]; // niebieski
    }
    ctx.putImageData(imgdata, 150, 0);

Krótkie wytłumaczenie:
Najpierw została pobrana tablica pikseli. Sposób zapisu danych na ich temat jest troszkę nietypowy. Każdy piksel jest mieszaniną trzech(czerwony, zielony, niebieski) kolorów oraz współczynnika przezroczystości. Dlatego, nasza tablica posiada 90 tys. elementów(150x150x4). Skacząc w pętli co cztery elementy, za każdym razem otrzymujemy nowy piksel do przebadania. Każdy z nich jest przekształcany na jeden z odcieni szarości. Na końcu obraz jest umieszczany w miejscu o współrzędnych 150,0(pierwszych 150 pikseli zajmuje nieprzekształcone zdjęcie, które umieściliśmy już wcześniej.

Spróbujmy odwrócić kolory:

 
   var pix = imgdata2.data;
   for (var i = 0, n = pix.length; i < n; i += 4) {
      pix[i] = 255 - pix[i]; // czerwony
      pix[i+1] = 255 - pix[i+1]; // zeilony
      pix[i+2] = 255 - pix[i+2]; // niebieski
    }
    ctx.putImageData(imgdata2, 300, 0);

Ostatnim przekształceniem będzie zabawa z kolorami . Wydzieliłem również pas pikseli, który będzie przekształcany w inny sposób. W ten sposób można tworzyć efekty punktowe(np. podświetlić na biało oczy).

   var pix = imgdata3.data;
 
   for (var i = 0, n = pix.length; i < n; i += 4) {
	  if(i<15000 || i> 75000){
              pix[i  ] = 25+pix[i]/2+pix[i+1]/5; // czerwony
              pix[i+1] = 25+pix[i+1]/2+pix[i+2]/5 ; // zielony
              pix[i+2] = 25+pix[i+2]/2+pix[i]/2; // niebieski
	  }
	  else
	  {
              pix[i  ] = pix[i]; // czerwony
              pix[i+1] = pix[i+1]/2+50 ; //zielony
              pix[i+2] = pix[i+2]/2+40; // niebieski
	  }
    }
    ctx.putImageData(imgdata3, 450, 0);

Oczywiście musimy jeszcze uzupełnić parametry funkcji oraz zamknąć wszystkie nawiasy.

  }, false);
 
  }
}

Pamiętajmy jednak, że element canvas jest niedostepny w starszych przeglądarkach Internet Explorer. Jeśli się nie mylę dopiero 9 wersja zacznie go obsługiwać poprawnie.

Cały przykład dostępny w postaci pliku js: canvas.js

Efekt działania:
Brak obsługi Canvas

Sposób działania

Nie da się(a przynajmniej nie w takiej postaci jaką dzisiaj pokażę) przeglądać całej historii. Jest jednak sposób aby wyciągnąć informację o tym czy użytkownik odwiedził konkretny adres www. Wszystko dlatego, że CSS posiada pseudoklasę :visited dzięki której można określij inne ostylowanie dla linków odwiedzonych. Przy użyciu JavaScript w łatwy sposób można sprawdzić, które linki mają inny styl i wysłać o nich informację na serwer.

Implementacja

Są dwie techniki, dzięki którym możemy wysłać informację na serwer. Pierwsza(moim zdaniem gorsza) w dużym skrócie wygląda tak:

<a href="http://google.pl" class="google">Google!</a>

a.google:visited{background:url('http://example.com?sitevisited=google'); }

Jeśli link jest odwiedzony zostanie wysłane zapytanie o tło do serwera example.com. Serwer wcale nie musi zwracać obrazka. Wystarczy, że doda użytkownika do swojej bazy danych.

Druga — znacznie ciekawsza — wykorzystuje JS, również działa w tle i także jest praktycznie nie widoczna dla użytkownika(trzeba zajrzeć do kodu). Co więcej nie musimy określać oddzielnych klas CSS dla każdego adresu. Przejdzmy do kodowania. Przede wszystkim potrzebujemy kontener na linki oraz styl dla odnośników odwiedzonych.

  #tempLinkContainer a:visited{display:none;}

Używam display a nie np. color ponieważ poszczególne przeglądarki różnie interpretują kolory — Opera przechowuje je w postaci heksadecymalnej #RRBBGG, a Firefox w systemie dzisiętnym rgb(R,G,B). Display jest jednolity więc nie będzie z nim problemów. Czas na rdzeń skryptu JavaScript.

function checkLink(url) {
  var myLink = document.createElement('a');
  myLink.href= url;
  var container = document.getElementById('tempLinkContainer');
  container.appendChild(myLink);
  if(myLink.currentStyle)
    var visited = myLink.currentStyle.display=='none';
  else
    var visited = document.defaultView.getComputedStyle(myLink, null).display=='none';
  container.removeChild(myLink);
  return visited;
}

Funkcja jako parametr przyjmuje adres url strony którą chcemy sprawdzić. Najpierw tworzony jest element a i uzupełniany jest jego parametr href. Następnie ten element jest umieszczany w naszym elemencie div. W ten sposób link otrzymuje odpowiednie ostylowanie jeśli jest odwiedzony. Jedyne co nam pozostaje to sprawdzenie parametru display. W tym celu należy pobrać styl obliczany naszego linku. Niestety IE(wraz z Operą) obsługują to troszke inaczej niż Firefox, Safari i inne przeglądarki — stąd ta instrukcja warunkowa. Wynik jest zapisywany do zmiennej visited, link niszczony i wartość na końcu zwracana. Efekt można zobaczyć tutaj. Zauważ, że linki odwiedzone otrzymują klasę visited(ustawienie koloru na zielony). Żadna pseudoklasa :visited, nie definiuje zielonego koloru — jest to zasługa JavaScript.

Oczywiście ta technika nie jest idealna — rozróżnia np. linki typu:

• http://httpd.apache.org/docs/2.0/mod/core.html#errorlog
• http://httpd.apache.org/docs/2.0/mod/core.html
• http://httpd.apache.org

Jednak łatwo domyśleć się, że większość użytkowników odwiedzających np. Facebook.com najpierw uruchamia jego stronę główną. Technikę tą można użyć nie tylko do szpiegowania użytkowników. Można dzięki niej uatrakcyjnić stronę internetową serwując różne rzeczy w zależności od historii np. można umieścić informację na temat profilu na Facebook.com zamiast na nasza-klasa.pl jeśli użytkownik nie odwiedza naszej-klasy a odzwiedza facebooka.

W weekend planuję przysiąść do poprawek mojego blogu więc prawdopodobnie spróbuję dodać kilka ciekawych opcji.

Rozpocznijmy od małej gry, którą napisałem przy użyciu jQuery na potrzeby tego artykułu. Polega ona na bardzo szybkim klikaniu w pojawiający się czerwony prostokąt. Dasz radę? Zagraj!

ClickJacking polega na — tłumacząc dosłownie — „porywaniu kliknięć“. Zasada jest prosta. Niewidzialna ramka jest ukrywana pod stroną za pomocą css(a dokładniej z-index). Czeka ona w tle, aż potencjalna ofiara zechce kliknąć w pewne pole na ekranie. Wtedy warstwa ramki przechodzi nad warstwę gry. Użytkownik myśląc, że klika w prawdziwy element w rzeczywistości uruchamia mechanizm z ramki. Brzmi niepozornie? Atak taki wykorzystywany jest na wiele sposobów. Można np. umieścić w ramcę stronę facebook.com oraz odpowiednio sprecyzować pola w które należy kliknąć. Dzięki temu użytkownik zmieni swoje ustawienia dotyczące prywatności umożliwiając kradzież swoich danych osobowych i możliwość przeglądania zdjęć. Wbrew pozorom są setki niezabezpieczonych stron internetowych. Jedną z nich była kiedyś witryna konfiguracyjna wtyczki flash. Odpowiednio sprecyzowana strona pozwalała na zmianę ustawieć wtyczki tak aby możliwy był dostęp do kamery internetowej(sic!). Dzięki temu hakerzy mogli nawet podglądać swoje ofiary. Na szczęście Adobe wprowadziło zabezpieczenia, które uniemożliwiają przeprowadzenie takiego ataku.

Jak się chronić?

Zwykli użytkownicy mogą zainstalować wtyczkę NoScript, która chroni przed tym atakiem. W przypadku twórców stron internetowych sprawa jest prosta. Nie wolno pozwalać uruchamiać naszej strony w ramce(tym bardziej, że ramki to już przestarzała technologia). Robi tak GMail, nasza-klasa, o2 i inni.
Kod(tzw. Framekiller) jest bardzo prosty:

<script type="text/javascript">
    if (top!=self){
        top.location.href=self.location.href;
    }
</script>

W przypadku uruchomienia strony w ramce strona nadrzędna zostanie przekierowana na stronę w ramce.