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

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