[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

[bim2]

zamiast
$('#czytnik').keypress
daj
$('document').keypress
i powinno działac ;P

[lord_t]

$(document).key... pomogło, thx.

Jak zrobię kolejną wersję to tam już ową zmianę zamieszczę.

PS. Ja już myślę, że tu jakaś opinia o skypcie a tu psińco;p No ale dzięki:)

[Szunaj85]

Gierka nawet całkiem całkiem, ale według mnie:
- powinienneś dopracować grafikę
- Na końcu gry wyświetla się GAME OVER i tyle. Brakuje mi tu punktacji

[.radex]

Jest ok, ale nic specjalnego. Można powiedzieć, że sam silnik jest gotowy, ale to trzeba jakoś dokończyć, ładnie "opakować"

Na przykład dobrze by było zrobić, że jeśli input jest odznaczony (czyli jeśli nie jest bodajże focus), to stopuje grę

[Михаил_з_СССР]

Gra bardzo fajna, oceniam na 8/10. Zamiast kolorowych kwadracików można by zastosować prostą grafikę z przezroczystym tłem (tułów poziomy/pionowy, skręt głowy węża w różne strony, ogon itp.).

#EDIT: Literówka.

Ten post edytował Михаил_з_СССР 11.08.2008, 16:27:32

[tiraeth]

Widzę kilka literówek w kodzie, np. ths.niemozliwy zamiast this.niemozliwy - to samo z ths.kierunek.

Ogólnie wężyk spoko Wkurza tylko to focusowanie na pole tekstowe.

[Crozin]

@tiraeth: autor wcześniej zrobił

Kod

var ths=this;

Nie wiem w jakim celu, ale IMHO to nie literówka

[Babcia@Stefa]

Kodu nie oceniam (nie mam czasu przeglądać), ale efekt mi się podoba - na pewno sam bym lepszego nie uzyskał
Co do grafiki też fajna, chociaż nie wiem czy ktoś będzie w to grać (trochę nie praktyczne) ale mi się podoba

8/10 - nic nie jest idealne, w kodzie wiedzę same polskie nazwy chociaż tylko zerknęłem na niego, nie sprawdzałem

Pozdrawiam, WebNuLL(Babcia@Stefa)

Ten post edytował Babcia@Stefa 11.08.2008, 19:20:28

[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 

[vokiel]

Sterowanie w Operze wreszcie działa, aż się skusiłem zagrać

Kod

KONIEC GRY
Zdobyte punkty: 283

Dobra robota

[snovvy]

Straciłem na tej grze około 10 min świetna sprawa :-) gra się przyjemnie :-) Kodu niestety nie ocenie bo na JS nie znam

[lord_t]

Wersja 1.2
Wersja 1.3
Wersja 1.4

Zmiany (1.2):
-sterowanie przeniesione z W,S,A,D na strzałki,
-wąż i owoce w postaci graficznej

Zmiany (1.3):
-buforowanie wszystkich pól
-zwiększenie hermetycznosci

Zmiany (1.4):
-usunięcie niejawnego eval() z setTimeout()
-uproszczenie związane z klasą css

[HTML] pobierz, plaintext 
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
<!--
 
function Snake(nazwa,rozmiar/*planszy*/,szybkosc,maxOwocow)
{
/* Snake by Pawel 'lord_T' Maruszczyk
 * Silesia, February 2010, version 1.4
 * License MIT
 */
 
var ileOwoc=0;
var maxOwoc=(maxOwocow-1||2);
var dlugosc=2; //glowa + ogon
var ogon=[];
var ruch=true;
var i;
var j;
var macierz;
var ths=this;
 
this.kierunek='d';//'u','r','l'
this.niemozliwy=40;//w dol - kierunek niemozliwy do wybrania (kod klawisza)
 
 
//aktualizacja ogona
this.addTail=function(a,b){
 
	var tmpK=null;
	if(ogon[0])
		switch(ogon[0].uklad.p){
			case 'l': tmpK='r'; break;
			case 'r': tmpK='l'; break;
			case 'u': tmpK='d'; break;
			default:  tmpK='u';
		}
 
	ogon.unshift({i:a, j:b, uklad:{p/*oczatek*/:this.kierunek, k/*oniec*/:tmpK} });
 
	if( (ogon.length+1) >dlugosc ){
		var usuniety=ogon.pop();
		macierz[usuniety.i][usuniety.j].removeClass();
	}
}
 
//sprawdzanie kolizji glowy z ogonem i owocami
this.checkCol/*isions*/=function(i,j){
 
	var count=ogon.length;
	for(var k=1;k<count;++k)
		if(ogon[k].i==i && ogon[k].j==j){
			ruch=false;
			break;
		}
 
	if(macierz[i][j].hasClass('owoc')){
		++dlugosc;
		--ileOwoc;
		macierz[i][j].removeClass().addClass('glowa'+this.kierunek);
	}
}
 
//kolorowanie glowy i sprawdzenie kolizji
this.putHead=function(a,b){
 
	macierz[a][b].addClass('glowa'+this.kierunek);
	this.checkCol(a,b);
	i=a;
	j=b;
}
 
//kolorowanie ogona
this.moveTail=function(){
 
	for(var k=0;k<ogon.length;++k)
		{
			//budowanie nazwy klasy
			var tmp='ogon'+ogon[k].uklad.p;
 
			if(k<ogon.length-1)
				tmp+= ogon[k].uklad.k;
 
			macierz[ogon[k].i][ogon[k].j].removeClass().addClass(tmp);
		}
}
 
//ruch glowy w wybranym kierunku i aktualizacja ogona
this.moveHead=function(){
 
	this.addTail(i,j);
	switch(this.kierunek){
		case 'd': this.niemozliwy=38; ++i; i%=rozmiar;break;
		case 'u': this.niemozliwy=40; i+=(rozmiar-1); i%=rozmiar;break;
		case 'l': this.niemozliwy=39; j+=(rozmiar-1); j%=rozmiar;break;
		case 'r': this.niemozliwy=37; ++j; j%=rozmiar; break;
	}
	this.putHead(i,j);
}
 
//wstawianie owocow na plansze
this.putFruit=function(){
 
	if(ileOwoc <= maxOwoc){
		var losI=Math.floor(Math.random() * rozmiar);
		var losJ=Math.floor(Math.random() * rozmiar);
		var wolne=true;
 
		if(i==losI && j==losJ) wolne=false;
 
		if(wolne){
			var count=ogon.length;
			for(var k=0;k<count;++k)
				if(ogon[k].i==losI && ogon[k].j==losJ){
					wolne=false;
					break;
				}
		}
 
		if(wolne){
			macierz[losI][losJ].addClass('owoc');
			++ileOwoc;
		}
	}
 
	nastOwoc=Math.floor(Math.random())+8.5*szybkosc;
	setTimeout(ths.putFruit,nastOwoc);
}
 
//petla czasu - rusza wezem
this.timeLoop=function(){
 
	ths.moveHead();
	ths.moveTail();
	if(ruch)
		setTimeout(ths.timeLoop,szybkosc);
	else{
		$('#waz div').css('background','#ccc');
		$('#waz').after($('<div id="gameover">KONIEC GRY<br />Zdobyte punkty: '+Math.round((1+(rozmiar*rozmiar))/20*dlugosc)+'<input type="button" value="Nowa gra" onclick="window.location.reload()"></div>'));// ((1+r*r)*n/2)/10=suma c.arytm/10
	}
}
 
//przygotowanie planszy
this.makeSnakesPlace=function(){
 
	macierz=new Array(rozmiar);
	var tabelaPola=$('<table id="waz"></table>');
	for(var i=0;i<rozmiar;++i){
		macierz[i]=new Array(rozmiar);
		var wiersz=$('<tr>');
		for(var j=0;j<rozmiar;++j){
			macierz[i][j]=$('<div>').appendTo($('<td>').appendTo(wiersz));
		}
 
		tabelaPola.append(wiersz);
	}
 
	$('body').append(tabelaPola);
 
	$(document).keydown(function(e){
			var key=(e||window.event).keyCode;
			if(key!=ths.niemozliwy)
				switch(key){
					case 40:ths.kierunek='d';	break;
					case 38:ths.kierunek='u';	break;
					case 37:ths.kierunek='l';	break;
					case 39:ths.kierunek='r';	break;
				}
	});
 
	this.putHead(0,2);
	this.putFruit();
	this.timeLoop();
 
}//make
 
this.makeSnakesPlace();
}//objekt snake
 
$('document').ready(function(){
Waz=new Snake('Waz',10,300);
});
//-->
</script>
 
<style type="text/css">
/* <![CDATA[ */
div{
height:20px;
width:20px;
}
 
div.owoc{background-image:url('fruit.png');}
 
div.glowar{background-image:url('head-r.png');}
div.glowal{background-image:url('head-l.png');}
div.glowad{background-image:url('head-d.png');}
div.glowau{background-image:url('head-u.png');}
 
div.ogonl{background-image:url('tail-l.png');}
div.ogonr{background-image:url('tail-r.png');}
div.ogonu{background-image:url('tail-u.png');}
div.ogond{background-image:url('tail-d.png');}
 
div.ogonll,
div.ogonrr,
div.ogonrl,
div.ogonlr{background-image:url('r-l.png');}
 
div.ogonud,
div.ogonuu,
div.ogondd,
div.ogondu{background-image:url('u-d.png');}
 
div.ogonru,
div.ogonur{background-image:url('u-r.png');}
 
div.ogonlu,
div.ogonul{background-image:url('u-l.png');}
 
div.ogonrd,
div.ogondr{background-image:url('d-r.png');}
 
div.ogonld,
div.ogondl{background-image:url('d-l.png');}
 
table#waz,#gameover{
margin:20px auto;
padding:0;
border-spacing:0px;
}
 
table#waz div{
background-color:#217F25;
}
 
#gameover{
width:200px;
text-align:center;
}
 
td,tr{
padding:0;
margin:0;
border:0;
}
 
input{margin:10px;}
/* ]]> */
</style>
[HTML] pobierz, plaintext 

Ten post edytował lord_t 5.02.2010, 12:09:41

[zegarek84]

ogólnie dobrze napisana aplikacja - na głębsze przejżenie kodu nie mam czasu i tylko ogólne uwagi

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

EDIT.
ps. zaktualizuj sobie link do gry w temacie z Twoją ofertą do gry gdyż tam nie działa link

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

[lord_t]

Dzięki za konstruktywny komentarz - Twoje rady uwzględniłem, a teraz kilka słów polemiki odnośnie eval(): Przedstawiony przez Ciebie kod nie działa w przypadku, gdy klasę tworzysz przy użyciu function(){}. Chętnie dowiem się jak to zrobić bez eval, może masz jakiś pomysł

Updejtowany kod w poście powyżej (+ link do wersji 1.3).

[zegarek84]

teraz jadę w pociągu i deczo się "znieczuliłem " 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 - 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

podobnie z buforowaniem chodziło mi tez o to, że to jest wtedy szybsze - w sumie tu nie było potrzeby ale...

pozdro

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

[lord_t]

eval: bingo!

Uważam, że nie ma sensu już nic buforować - pozostały tylko odwołania na początku (budowanie planszy- wcale nie musi iść jakoś ekstra szybko) i na końcu (nie ma sensu - dwa jednorazowo wywoływane odwołania).

var nie skrócę, bo nie lubię jak mi się ktoś czepia formatowania kodu;] A ponadto tak jest przejrzyściej.

P.S. Kod poprawiłem dwa moje posty wstecz. Wersja online.

[ShadowD]

318, nie było już za bardzo gdzie się zmieścić, powiększ mapę.

Może możliwość stawiania jakiś kamieni na środku, jakiś edytorem mapy, takie marzenia, ogólnie 9/10 - SUPER!

[lord_t]

Wersja 1.5

Zmiany (1.5):
-grafika (w pełnym tego słowa znaczeniu)
-pauza (spacja)
-Snake() zwraca uchwyt do gry
-preload obrazów(owoce, części węża)
-restartowanie (bez odświeżania strony)

P.S. Byłbym wdzięczny na sprawdzenie wyglądu w IE7 i ewentualnie jakiś zrzut ekranu w przypadku błędu.
P.S.2. @ShadowD: jeśli rozwinę to pomyślę nad tymi przeszkodami:)

[HTML] pobierz, plaintext 
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script type="text/javascript">
<!--
 
function Snake(rozmiar/*planszy*/,szybkosc,maxOwocow)
{
/* Snake by Pawel 'lord_T' Maruszczyk
 * Silesia, February 2010, version 1.5
 * License MIT
 */
 
var ileOwoc;
var maxOwoc;
var dlugosc; 
var ogon;
var ruch;
var i;
var j;
var macierz;
var kierunek;
var niemozliwy;
var rama;
var stOwoce;	//st = setTimout
var stRuch;
var pauza;
var padding;
 
//ustawienie parametrow poczatkowych
var setParams=function(){
 
	ileOwoc=0;
	maxOwoc=(maxOwocow||3);
	dlugosc=2;//glowa + ogon
	ogon=[];
	ruch=true;
	kierunek='d';//'u','r','l'
	niemozliwy=40;//w dol - kierunek niemozliwy do wybrania (kod klawisza)
	padding=Math.floor((rozmiar-1)/2)*20;
}
 
 
//aktualizacja ogona
var addTail=function(a,b){
 
	var tmpK=null;
	if(ogon[0])
		switch(ogon[0].uklad.p){
			case 'l': tmpK='r'; break;
			case 'r': tmpK='l'; break;
			case 'u': tmpK='d'; break;
			default:  tmpK='u';
		}
 
	ogon.unshift({i:a, j:b, uklad:{p/*oczatek*/:kierunek, k/*oniec*/:tmpK} });
 
	if( (ogon.length+1) >dlugosc ){
		var usuniety=ogon.pop();
		macierz[usuniety.i][usuniety.j].removeClass();
	}
}
 
//sprawdzanie kolizji glowy z ogonem i owocami
var checkCol/*isions*/=function(i,j){
 
	var count=ogon.length;
	for(var k=1;k<count;++k)
		if(ogon[k].i==i && ogon[k].j==j){
			ruch=false;
			break;
		}
 
	if(macierz[i][j].hasClass('owoc')){
		++dlugosc;
		--ileOwoc;
		macierz[i][j].removeClass().addClass('glowa'+kierunek);
	}
}
 
//kolorowanie glowy i sprawdzenie kolizji
var putHead=function(a,b){
 
	macierz[a][b].addClass('glowa'+kierunek);
	checkCol(a,b);
	i=a;
	j=b;
}
 
//kolorowanie ogona
var moveTail=function(){
 
	for(var k=0;k<ogon.length;++k)
		{
			//budowanie nazwy klasy
			var tmp='ogon'+ogon[k].uklad.p;
 
			if(k<ogon.length-1)
				tmp+= ogon[k].uklad.k;
 
			macierz[ogon[k].i][ogon[k].j].removeClass().addClass(tmp);
		}
}
 
//ruch glowy w wybranym kierunku i aktualizacja ogona
var moveHead=function(){
 
	addTail(i,j);
	switch(kierunek){
		case 'd': niemozliwy=38; ++i; i%=rozmiar;break;
		case 'u': niemozliwy=40; i+=(rozmiar-1); i%=rozmiar;break;
		case 'l': niemozliwy=39; j+=(rozmiar-1); j%=rozmiar;break;
		case 'r': niemozliwy=37; ++j; j%=rozmiar; break;
	}
	putHead(i,j);
}
 
//wstawianie owocow na plansze
var putFruit=function(){
 
	if(ileOwoc < maxOwoc){
		var losI=Math.floor(Math.random() * rozmiar);
		var losJ=Math.floor(Math.random() * rozmiar);
		var wolne=true;
 
		if(i==losI && j==losJ) wolne=false;
 
		if(wolne){
			var count=ogon.length;
			for(var k=0;k<count;++k)
				if(ogon[k].i==losI && ogon[k].j==losJ){
					wolne=false;
					break;
				}
		}
 
		if(wolne && !macierz[losI][losJ].hasClass('owoc') ){
			macierz[losI][losJ].addClass('owoc owoc'+Math.floor(Math.random()*3));
			++ileOwoc;
		}
 
	}
 
	var nastOwoc=Math.floor(Math.random())+8.5*szybkosc;
	stOwoce=setTimeout(putFruit,nastOwoc);
}
 
//petla czasu - rusza wezem
var timeLoop=function(){
 
	moveHead();
	moveTail();
	if(ruch)
		stRuch=setTimeout(timeLoop,szybkosc);
	else{
		var rest=$('<div>Nowa gra</div>').click(function(){makeSnakesPlace(1);});
		var govr=$('<div id="gameover">KONIEC GRY<br>Zdobyte punkty: '+Math.round((1+(rozmiar*rozmiar))/20*dlugosc)+'</div>');
		govr.width(rozmiar*20).height(rozmiar*20-padding).css('padding-top',padding).append(rest);
 
		$('table#waz').replaceWith(govr);
	}
}
 
//wlacza/wylacza pauze
var togglePause=function(){
 
	if(stRuch!=null && ruch){
		clearTimeout(stOwoce);
		clearTimeout(stRuch);
		stRuch=null;
		pauza.css({display:'block',zIndex:1001});
	}
	else{
		putFruit();
		timeLoop();
		pauza.css({display:'none',zIndex:0});
	}
}
 
//wczytuje do pamieci wszystkie obrazki i wspomaga png w IE
var preloadImages=function(){
 
	var klasy=['owoc0','owoc1','owoc2','glowar','glowal','glowad','glowau','ogonr','ogonl','ogond','ogonu','ogonlr','ogondu','ogonur','ogonul','ogondl','ogondr'];
	for(var p in klasy)
		$('body').append($('<div class="cache">').addClass(klasy[p]));
 
	//tylko IE
	if($.browser.msie){
		DD_belatedPNG.fix('div#t, div#b,div#l, div#r,div#tl,div#tr,div#bl,div#br');
 
		var png=['div.owoc0','div.owoc1','div.owoc2','div.glowar','div.glowal','div.glowad','div.glowau','div.ogonl','div.ogonr','div.ogonu','div.ogond','div.ogonll', 'div.ogonrr','div.ogonrl','div.ogonlr','div.ogonud','div.ogonuu','div.ogondd','div.ogondu','div.ogonru','div.ogonur','div.ogonlu','div.ogonul','div.ogonrd', 'div.ogondr','div.ogonld','div.ogondl'];
 
		for(var i=0;i<document.styleSheets.length;++i){
			var css=document.styleSheets[i].rules;
 
			if (document.styleSheets[i].title=="waz"){
				for(var j=0;j<css.length && png.length>0;++j){
					var r=css[j];
 
					for(var k=0;k<png.length;++k){
						if(r.selectorText.toLowerCase()==png[k]){
 
							var src=r.style.backgroundImage.toString();
							src=src.substring(4,src.lastIndexOf(')'))
 
							r.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"',sizingMethod='crop');";
							r.style.background='none';
 
							png.splice(k,1);
							k=100;//zakonczy biezaca petle
						}
					}
				}
 
				break;
			}
		}
	}
}
 
//przygotowanie planszy
var makeSnakesPlace=function(restart){
 
	setParams();
 
	macierz=new Array(rozmiar);
	var tabelaPola=$('<table id="waz"></table>');
	for(var i=0;i<rozmiar;++i){
		macierz[i]=new Array(rozmiar);
		var wiersz=$('<tr>');
		for(var j=0;j<rozmiar;++j){
			macierz[i][j]=$('<div>').appendTo($('<td>').appendTo(wiersz));
		}
 
		tabelaPola.append(wiersz);
	}
 
 
	if(restart)
		rama.find('#gameover').replaceWith(tabelaPola);
	else{
		//budowa obramowania i pauzy
		var szerokosc=rozmiar*20;
		pauza 	  =$('<div id="pause"><div style="padding-top:'+padding+'px">PAUZA</div></div>').css({width:szerokosc,height:szerokosc,opacity:'0.7'});
		var boki  =$('<div id="b"></div><div id="t"></div>').width(szerokosc);
		var brzegi=$('<div id="r"></div><div id="l"></div>').height(szerokosc);
		rama  =$('<div id="rama"><div id="tl"></div><div id="tr"></div><div id="bl"></div><div id="br"></div></div>');
		rama.width(szerokosc+20).height(szerokosc+20).append(pauza).append(boki).append(brzegi).append(tabelaPola);
 
		$('body').append(rama);
	}
 
	$(document).keydown(function(e){
		var key=(e||window.event).keyCode;
		if(key==32)
			togglePause(); //pauzowanie na spacji
		else if(key!=niemozliwy && stRuch!=null)
			switch(key){
				case 40:kierunek='d';	break;
				case 38:kierunek='u';	break;
				case 37:kierunek='l';	break;
				case 39:kierunek='r';	break;
			}
	});
 
	putHead(0,2);
	putFruit();
	timeLoop();
 
	return rama;//uchwyt do weza
}//make
 
preloadImages();
return makeSnakesPlace();
}//objekt snake
 
$('document').ready(function(){
var waz=Snake(12,230);
//$('#srodek').prepend(waz); //przykład wklejenia węża w div o id "srodek"
 
});
 
 
//-->
</script>
 
 
 
<style type="text/css" title="waz">
/* <![CDATA[ */
 
/*css dostępny pod linkiem z grą - forum nie pozwoliło mi dać tak długiego postu, więc wyciąłem. */
</style>
[HTML] pobierz, plaintext 

Ten post edytował lord_t 21.02.2010, 17:53:00

[darko]

Kozackie! Tylko brakuje mi liczenia punktów za zebrane owoce. Ale i tak jestem pod wrażeniem.

[koderrr]

swietne !

przydalaby sie jedynie lista graczy z najlepszymi wynikami

[thomson89]

Świetna gierka, a i postępy znakomite. Jak patrzę na pierwszą wersję i ostatnią, jestem pod zachwytem.

Przydałaby się jeszcze większa mapka i możliwość dopasowania szybkości węża...

[frytek92]

Naprawdę super jeszcze lepiej by było jak bym widział wynik oraz by były bonusy na czas ale i tak jest super chyba.

Twoja gra zmobilizuje mnie żeby douczyć się jQuery

Ocena : 9/10