[jQuery] Snake, Wężyk z prostą grafą. Opcje

[lord_t]

W ramach ćwiczenia się w js i jQuery(wersja: 1.2.3) postanowiłem popełnić Snake'a, który w praktyce wygląda tak: SNAKE

Info:
-sterowanie na klawiszach W,S,A,D
-jestem świadom, że odznaczenie inputa sprawia, że gra nie działa.

Kody:

jQuery:

[HTML] pobierz, plaintext 
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">
<!--
 
function Snake(nazwa_,rozmiarPlanszy_,szybkosc_,maxOwocow_)
{
/* Snake by Pawel 'lord_T' Maruszczyk
 * Silesia, July 2008, version 1.0
 * License MIT
 */
 
this.rozmiar=rozmiarPlanszy_;
this.ileOwoc=0;
this.maxOwoc=maxOwocow_|2;
this.dlugosc=2; //glowa + ogon
this.ogon=[];
this.szybkosc=szybkosc_;
this.nazwa=nazwa_;
this.ruch=true;
this.i;
this.j;
this.macierz;
this.kierunek='down';//'up','right','left'
this.niemozliwy='s';//kierunek niemozliwy do wybrania (ktory klawisz)
var ths=this;
 
//aktualizacja ogona
this.addTail=function(a,b)
	{
	this.ogon.unshift({i:a,j:b});
	if( (this.ogon.length+1) >this.dlugosc )
		{
		var usuniety=this.ogon.pop();
		$('#'+usuniety.i+'_'+usuniety.j).removeClass().addClass('pole');
		}
	}
 
//sprawdzanie kolizji glowy z ogonem i owocami
this.checkCol/*isions*/=function(i,j)
	{
	var count=this.ogon.length;
	for(var k=1;k<count;++k)
		if(this.ogon[k].i==i && this.ogon[k].j==j){
			this.ruch=false;
			break;
		}
	if($('#'+i+'_'+j).hasClass('owoc')){
		++this.dlugosc;
		--this.ileOwoc;
		$('#'+i+'_'+j).removeClass().addClass('glowa');
		}
	}
 
//kolorowanie glowy i sprawdzenie kolizji
this.putHead=function(i,j)
	{
	$('#'+i+'_'+j).addClass('glowa');
	this.checkCol(i,j);
	this.i=i;
	this.j=j;
	}
 
//kolorowanie ogona
this.moveTail=function()
	{
	for(var k=0;k<this.ogon.length;++k)
		$('#'+this.ogon[k].i+'_'+this.ogon[k].j).addClass('ogon');
	}
 
//ruch glowy w wybranym kierunku i aktualizacja ogona
this.moveHead=function()
	{
	this.addTail(this.i,this.j);
	switch(ths.kierunek)
		{
		case 'down': ths.niemozliwy='w';++this.i;this.i%=this.rozmiar;break;
		case 'up'  : ths.niemozliwy='s';this.i+=(this.rozmiar-1);this.i%=this.rozmiar;break;
		case 'left': ths.niemozliwy='d';this.j+=(this.rozmiar-1);this.j%=this.rozmiar;break;
		case 'right':ths.niemozliwy='a';++this.j;this.j%=this.rozmiar; break;
		}
	this.putHead(this.i,this.j);
	}
 
//wstawianie owocow na plansze
this.putFruit=function()
	{
	if(this.ileOwoc<=this.maxOwoc){
		var losI=Math.floor(Math.random() * this.rozmiar);
		var losJ=Math.floor(Math.random() * this.rozmiar);
		var wolne=true;
 
		if(this.i==losI && this.j==losJ) wolne=false;
		if(wolne){
			var count=this.ogon.length;
			for(var k=0;k<count;++k)
				if(this.ogon[k].i==losI && this.ogon[k].j==losJ){
					wolne=false;
					break;
				}
			}
		if(wolne){
			$('#'+losI+'_'+losJ).addClass('owoc');
			++this.ileOwoc;
			}
		}
 
	nastOwoc=Math.floor(Math.random())+8.5*ths.szybkosc;
	setTimeout(ths.nazwa+".putFruit()",nastOwoc);
	}
 
//petla czasu - rusza wezem
this.timeLoop=function()
	{
	this.moveHead();
	this.moveTail();
	if(this.ruch)
		setTimeout(ths.nazwa+".timeLoop()",ths.szybkosc);
	else{
		$('.waz div').css('background','#ccc');
		$('.waz').after($('<div id="gameover">GAME OVER</div>'));
		}
	}
 
//przygotowanie planszy
this.makeSnakesPlace=function()
	{
	n=this.rozmiar;
	this.macierz=new Array(n);
	var tabelaPola=$('<table class="waz"></table>');
	for(var i=0;i<this.rozmiar;++i)
		{
		this.macierz[i]=new Array(n);
		var wiersz=$('<tr></tr>');
		for(var j=0;j<this.rozmiar;++j)
			{
			this.macierz[i][j]=0;
			wiersz.append($('<td><div class="pole" id="'+i+'_'+j+'"></div></td>'));
			}
		tabelaPola.append(wiersz);
		}
	$('body').append(tabelaPola).append('<input style="width:0;color:white" type="text" id="czytnik"/>');
	$('#czytnik').focus();
 
	$('#czytnik').keypress(function(e){
			$(this).val('');
			var key=String.fromCharCode(e.which);
			if(key!=ths.niemozliwy)
				switch(key){
					case 's':ths.kierunek='down';	break;
					case 'w':ths.kierunek='up';	break;
					case 'a':ths.kierunek='left';	break;
					case 'd':ths.kierunek='right';	break;
				}
		});
	this.putHead(0,2);
	this.putFruit();
	this.timeLoop();
	}//make
 
this.makeSnakesPlace();
}//objekt snake
 
$('document').ready(function(){
Waz=new Snake('Waz',10,300);
});
//-->
</script>
[HTML] pobierz, plaintext 

css:

Kod

<style type="text/css">
/* <![CDATA[ */
div{
height:20px;
width:20px;
}

div.pole{
background:#217F25;
}

div.glowa{
background:yellow;
}

div.ogon{
background:red;
}

div.owoc{
background:blue;
}

table.waz,#gameover
{
margin:20px auto;
padding:0;
}

#gameover{
width:100px;
}

td,tr{
    padding:0;
    margin:0;
    border:0;
}
/* ]]> */
</style>

Trochę mi ten kod przycięło do lewej, no ale tak działa forum na tabulacje;) Ładniejszy w źródle strony:)

Ten post edytował lord_t 18.07.2008, 21:19:39

[zegarek84]

teraz jadę w pociągu i deczo się "znieczuliłem (IMG:style_emoticons/default/winksmiley.jpg) " ale udało się - tzn lekkich problemów nastręczyła mi metoda timeLoop (okazuje się, że przy kompilacji do pamięci interpretera zachodziła mała rozbieżność - nie wiem czemu a że jestem deczko znieczulony to nie będę dokładniej szukał - w każdym bądź razie tam musiałem też this zastąpić nie tylko w setTimeout)...

a i nie chce mi się analizować (teraz znowu się drzemne ;p), ale chyba dało by się jeszcze kilka uchwytów do DOM zbuforować...

a i nie musiałeś co chwila pisać var - jeśli masz pod rząd to mogłeś oddzielać przecinkiem... działający kod z setTimeout bez eval pod mozillą i operą:

________
EDIT

usunąłem tego html'a bo rozwalał stronę a jest podane już rozwiązanie u lord_t

PS. down
nie czepiałem się kodu ;p - tylko pisałem, że tak można (IMG:style_emoticons/default/winksmiley.jpg) - podobnie jak z eval - już nie chodzi o to, że wszyscy piszą, iż jest niebezpieczny, chodziło o to, że przede wszystkim bardzo ogranicza gdyż:
- kod musi być zinterpretowany po raz kolejny i jego interpretacja jest znacznie wolniejsza...
- odwoływać się można w nim tylko do zmiennych globalnych będących w obiekcie window - co nie sprzyja hermetyzacji kodu (IMG:style_emoticons/default/winksmiley.jpg)

podobnie z buforowaniem chodziło mi tez o to, że to jest wtedy szybsze - w sumie tu nie było potrzeby ale... (IMG:style_emoticons/default/winksmiley.jpg)

pozdro (IMG:style_emoticons/default/winksmiley.jpg)

Ten post edytował zegarek84 5.02.2010, 12:43:59