YangkunSprite

Luke Lutman  tarafından geliştirilmiş olan bir Sprite uygulaması.  Her türlü sprite çalışmasında kullanabileceğiniz bir örnektir. Demo sayfasında göreceğiniz üzere iki adet örnek bulunuyor. Bir tanesi menü şeklinde hazırlanmış ve mouse ile noktaların üzerine geldiğiniz anda ikonlar  yukarı doğru animasyonlu bir şekilde çıkıyormuş  gibi görünüyor. Tabi bu özellik ikonlara direk olarak uygulanmıyor. Çizgi film gibi ard arda tekrar eden kareler gibi hazırlanmış olan bir resim parçasını bu şekilde oynatıyor. Menü örneğinde kullanılan resim : Resimde de gördüğünüz  gibi nokta genişliyor bulanıklaşıyor ve içinden resim fırlıyor gibi bir görüntü var. Bu tarz bir resim hazırlayabilmek için iyi derecede resim düzenleme programları kullanabiliyor olmanız gerek. İkinci demo ise bir oyun şeklinde hazırlanmış. Klavyeden W, A, S ve D tuşlarına bastığınızda resim hareket ediyor bastığınız tuşun yönüne göre. Gördüğünüz üzere resimde sekiz tane farklı karakter bulunuyor. Her karakter için ayrı sprite pozisyonları atanmış ve JavaScript kodlar içinde ve Html kodlar içinde kullanmak istediğiniz karakteri+pozisyonunu belirtmeniz gerekmekte.  Demo sayfasında birinci karakteri görebilirsiniz. Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js ve stil dosyaları : 

<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.sprite.js"></script>

JavaScript :  Her iki demo kodu.

$(function() {
	var googleOpts = {
		cellSize: [52,37],
		cells: [7, 7],
		initCell: [0,0],
		wrap: false,
		interval: 50
	};
	$('#animate span.google-sprite').each(function(i) {
		var sprite = $(this).sprite(googleOpts).hover(function() {
			sprite.go();
		},function() {
			sprite.revert();
		});
		sprite.row(i);
	});

	$('#swap span.google-sprite').each(function(i) {
		var sprite = $(this).sprite(googleOpts).hover(function() {
			sprite.col(6);
		},function() {
			sprite.col(0);
		});
		sprite.row(i);
	});

	var player = $('#player1').sprite({
		cellSize: [32,32],
		cells: [4, 3],
		initCell: [0,0],
		offset: [0, 0],
		wrap: true
	}).css({left: 0, top:0});

	var UP = 87,
		DOWN = 83,
		LEFT = 65,
		RIGHT = 68,
		direct = DOWN,
		speed = 4,
		prop = 'top',
		BOARD_WIDTH = 400,
		BOARD_HEIGHT = 200,
		char = false;

	$(window).keydown(function(e) {
		var key = e.which;
		console.log(key);
		if($.inArray(key, [UP,DOWN,LEFT,RIGHT]) >= 0) {
			if (key == direct) {
				player.next();
				var nextPos = parseInt(player.css(prop),10) + speed;
				if (prop == 'top') {
					if(nextPos < 0) nextPos = BOARD_HEIGHT - 1;
					player.css(prop, nextPos % BOARD_HEIGHT);
				} else if (prop == 'left') {
					if(nextPos < 0) nextPos = BOARD_WIDTH - 1;
					player.css(prop, nextPos % BOARD_WIDTH);
				}
			} else {
				switch(key) {
					case UP: player.row(3); speed = -4; prop = 'top'; break;
					case DOWN: player.row(0); speed = 4; prop = 'top'; break;
					case LEFT: player.row(1); speed = -4; prop = 'left'; break;
					case RIGHT: player.row(2); speed = 4; prop = 'left'; break;
				}
				direct = key;
			}
		} else if (key == 13) {
			char = !char;
			player.offset(char ? 93 : 0,0);
		}
	});
});

•  Body etiketleri arasına eklemeniz gereken bölümler.

Menü kodları : 

<h2>Animate</h2>
<div id="animate">	
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>

</div>
	<h2>Swap</h2>
<div id="swap">	
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
</div>

Oyun :

<div id="board">
	<span id="player1" class="player"></span>
</div>