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