[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

[lord_t]

Najpierw trochę odpowiem:
@tiraeth: to nie literówka;) ale fakt, że w wielu miejscach ths można było zastąpić this (co też zrobiłem). W jednym miejscu nie można ( $(document).keypress(function(e){...}), ponieważ tam this odwołuje się do document.
@Babcia@Stefa: a od kiedy angielskie nazewnictwo są wyznacznikiem dobrego kodu? Nazwy metod są po ang, bo wydaja mi się krótsze niż pol. odpowiedniki. Jeśli lepiej i łatwiej czyta Ci się kody pisane całkowicie po ang. to możesz sobie przetłumaczyć ten kod.

Wersja 1.1

Zmiany:
-wyrzucenie 'czytnika' (thx dla bima2)
-punktacja

Kod jQuery (wkleiłem jako php tylko dlatego, żeby były TABy;) )

[PHP] pobierz, plaintext 
<?php ?>
<script type="text/javascript">
<!--
 
function Snake(nazwa_,rozmiarPlanszy_,szybkosc_,maxOwocow_)
{
/* Snake by Pawel 'lord_T' Maruszczyk
 * Silesia, July 2008, version 1.1
 * 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(this.kierunek)
		{
		case 'down': this.niemozliwy='w';++this.i;this.i%=this.rozmiar;break;
		case 'up'  : this.niemozliwy='s';this.i+=(this.rozmiar-1);this.i%=this.rozmiar;break;
		case 'left': this.niemozliwy='d';this.j+=(this.rozmiar-1);this.j%=this.rozmiar;break;
		case 'right':this.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*this.szybkosc;
	setTimeout(this.nazwa+".putFruit()",nastOwoc);
	}
 
//petla czasu - rusza wezem
this.timeLoop=function()
	{
	this.moveHead();
	this.moveTail();
	if(this.ruch)
		setTimeout(this.nazwa+".timeLoop()",this.szybkosc);
	else{
		$('.waz div').css('background','#ccc');
		$('.waz').after($('<div id="gameover">KONIEC GRY<br />Zdobyte punkty: '+Math.round((1+(this.rozmiar*this.rozmiar))/20*this.dlugosc)+'</div>'));// ((1+r*r)*n/2)/10=suma c.arytm/10
		}
	}
 
//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);
 
	$(document).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><?php ?>
[PHP] pobierz, plaintext 

Kod css

[HTML] pobierz, plaintext 
<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:200px;
text-align:center;
}
 
td,tr{
        padding:0;
        margin:0;
        border:0;
}
/* ]]> */
</style>
[HTML] pobierz, plaintext 

[zegarek84]

ogólnie dobrze napisana aplikacja - na głębsze przejżenie kodu nie mam czasu i tylko ogólne uwagi (IMG:style_emoticons/default/winksmiley.jpg)

Najpierw trochę odpowiem:
@tiraeth: to nie literówka;) ale fakt, że w wielu miejscach ths można było zastąpić this (co też zrobiłem). W jednym miejscu nie można ( $(document).keypress(function(e){...}), ponieważ tam this odwołuje się do document.

tak, zmienne prywatne i zasięg - tu ok, ale skoro już takie obtymalizacje i mała "hermetyzacja" kodu to dlaczego używasz eval?? - w ostatniej wersji też jest:

Kod

setTimeout(this.nazwa+".timeLoop()",this.szybkosc);

i w powyższym właśnie jest eval (IMG:style_emoticons/default/winksmiley.jpg) - a wszystko obchodzisz odwołując się do zmiennej globalnej window.Waz...
podczas gdy zwróć uwagę i wklej w pasku adresu poniższy kod i zauważ, że też będzie działał:

Kod

java script:var a={b:function(){alert('ggg')},c:function(){setTimeout(this.b,1000);}};a.c();void(0);

i jeszcze jedna mała uwaga - trochu nie mam czasu analizować kod ale tak na szybko patrząc na metody to chyba nie buforujesz uchwytu do elementów do których się da tylko za każdym razem ich szukasz w DOM??
np. w tej metodzie (tak na szybko nie zauważyłem buforowania uchwytów a i nie zwróciłem głębiej uwagi na logikę gry czy akurat tu da się zbuforować uchwyty):

Kod

this.putHead=function(i,j)
    {
    $('#'+i+'_'+j).addClass('glowa'+this.kierunek);
    this.checkCol(i,j);
    this.i=i;
    this.j=j;
    }

a i nie wiem z jakiego edytora korzystasz więc czy te kreski, że to zmienne prywatne to nie wnikam... ale od razu napiszę jedną uwagę - zmienna prywatna może mieć tą samą nazwę (identyczną) jakby co jak zmienna publiczna i też definiując zmienne w argumentach funkcji danych zmiennych prywatnych nie trzeba definiować (chyba, że sprawdzasz czy jest podany argument) - i tu taki mały teścik:

Kod

java script:function test(){var a=2;this.a=3;this.a1=function(){return a;};this.a2=function(){return this.a;}};b=new test();alert(b.a1());alert(b.a2());void(0)

ps. javascript w tych kodach ma być razem jak będziesz wklejał do paska adresu (IMG:style_emoticons/default/winksmiley.jpg)

EDIT.
ps. zaktualizuj sobie link do gry w temacie z Twoją ofertą do gry gdyż tam nie działa link (IMG:style_emoticons/default/winksmiley.jpg)

Ten post edytował zegarek84 4.02.2010, 21:00:37