HTML 5 Yenilikleri ve JavaScript ile Canvas elementini Kullanan Yılan Oyunu

0
kulker
HTML 5, Web 2.0 teknolojisinin bize sunduğu en büyük nimetlerden biri. Canvas,video ve audio gibi 3 önemli elementle daha gelişmiş web uygulamaları geliştirmek mümkün.

Ne vahimdir ki MSIE desteklemediği için kullanım oranının az olduğunu görüyoruz. Buna rağmen Firefox, Opera ve Google chrome HTML5 i desteklediği için bu güzelim teknolojiyi test edip kullanmaya başlamak fazla zaman kayıp etmemek lazım.
Kişisel kanaatim HTML 5'i JavaScript'le beraber kullandığımızda, applet kullanmaya gerek kalmadan dinamik web uygulamaları geliştirebileceğiz.

http://rainbow9.org/view/99708250/index.html linkinde bunun bariz bir örneğini görebiliriz.

Özellikle canvas elementinin JavaScript fonksiyonlarını kontrol ettiğimizde Pascal, Java, C++ kullanılan graph fonksiyonlarına çok yakın olduğunu görebiliriz: http://dev.w3.org/cvsweb/~checkout~/html5/html4-differences/Overview.html?rev=1.8&content-type=text/html;%20charset=iso-8859-1 adresinden incelemeye başlıyabilirsiniz.

Ben yıllar önce Pascalda yazdığım snake oyununu kolayca uyarladım. Buyrun efendim naçizane bir örnek:

hmtl 5 test - hello word



		
			#canvas {
border:1px solid black;
			}
		

var ctx;

var step=10;
var ZeminW=300;
var ZeminH=300;
var yon=2;
var x=10;var y=10;
var x2=10;var y2=10;
var izbirak= new Array(parseInt(ZeminW/step)*parseInt(ZeminH/step));
var izbirakCordinat= new Array(parseInt(ZeminW/step));
var iz=0;
var iz2=0; 
var  bekle=200;  // bekle değeri ile ilerleme hızı ters orantılıdır. Yani burdan yılanı hızlandırabiliriz
var Int1,Int2;
var lineW=step;
var yemX,yemY;

function zeminHazirla() {
  ctx.strokeStyle = "red";
  ctx.fillStyle = "yellow";
  ctx.lineWidth = lineW;
  ctx.lineCap = "round";
   ctx.fillRect(0,0,ZeminW,ZeminH);
   ctx.moveTo(x,0);
}

function baslat(isPause) {
	if (!isPause) {
 x=10; y=10;
 x2=10; y2=10;
 izbirak= new Array(parseInt(ZeminW/step)*parseInt(ZeminH/step));
 izbirakCordinat= new Array(parseInt(ZeminW/step));
 iz=0;
 iz2=0; 
yon=2;

	  ilerle(); YemOlustur();
	    Int1=setInterval(ilerle,bekle);
  setTimeout("Int2=setInterval(izsur,bekle)",3000);
	} else {
  Int1=setInterval(ilerle,bekle);
  Int2=setInterval(izsur,bekle);
	}
	
	if(document.getElementById("BtnStop"))
	document.getElementById("BtnStop").disabled=false;
	document.body.focus();
}
function dur() {
clearInterval(Int1);
	clearInterval(Int2);	
		if(document.getElementById("Btnplay"))
	document.getElementById("Btnplay").disabled=false;
	
}

function init(){
var domZem=(document.getElementById("Zemin"))?document.getElementById("Zemin"):0;
if (!domZem) return false;
domZem.innerHTML='';
ctx = document.getElementById('canvas').getContext('2d');	

   zeminHazirla();
   baslat();
}

function YemOlustur() {

 yemX=Math.ceil(ZeminW*Math.random()); 
 yemY=Math.ceil(ZeminH*Math.random());
yemX= yemX - ( yemX % step);
yemY= yemY - ( yemY % step); // yılanın adımlarına göre yem kordinatlarını yuvarlıyoruz

if (yemX>(step*2))  yemX=yemX-step; // yem tam sınırlara denk gelmesin
if (yemY>(step*2))  yemY=yemY-step;


//addlog('['+yemX+','+yemY+']');

if (typeof izbirakCordinat[parseInt(yemX/step)]!="undefined" ) 
{
if (typeof izbirakCordinat[parseInt(yemX/step)][parseInt(yemY/step)]!="undefined" && izbirakCordinat[parseInt(yemX/step)][parseInt(yemY/step)]!=0)
  { 
  addlog("!");//üzerine geldi yem, bidaha dene
  YemOlustur(); }
}
//
ctx.save();
ctx.fillStyle = "blue";	
  ctx.fillRect(yemX,yemY,lineW,lineW);
  
}

function YonTuslari(evt) {
var kcode=(evt.charCode || evt.keyCode);	
//alert(kcode);
 switch (kcode) {
 	case 38 : yon=3;break; //yukari tusu
 	case 37 : yon=1;break; //sol tus 
 	case 39 : yon=2;break; //sag tus
 	case 40 : yon=4;break; //asagi tusu
 	
 }
return false;
	
}
function izsur() {
 switch (izbirak[iz2]) {
 	case 2:  x2=x2+step; break;
 	case 1:  x2=x2-step; break;
 	case 4:  y2=y2+step; break;
 	case 3:  y2=y2-step; break;
 	case 5:  return true; break;
 	default: return true; break; 	
 }
 	
 ctx.save();
ctx.fillStyle = "yellow";	
  ctx.fillRect(x2,y2,lineW,lineW);
  izbirak[iz2]=0;
  izbirakCordinat[parseInt(x2/step)][parseInt(y2/step)]=0;
  iz2++;
}

function burayaKadar(IsGameOver){
	if (IsGameOver) alert("Game Over");
clearInterval(Int1);
	clearInterval(Int2);	
	zeminHazirla();
	
}

function nereyeGidiyorBuMahlukat(cx,cy) {
if (typeof izbirakCordinat[parseInt(cx/step)][parseInt(cy/step)]!="undefined" && izbirakCordinat[parseInt(cx/step)][parseInt(cy/step)]!=0) 
{
	burayaKadar(true);//kendi üzerine geldi
	//addlog('!') 
}
         
//if ( parseInt(izbirak[chkiz])!=0) burayaKadar(true);
	
	if (cxZeminW) burayaKadar(true);
	if (cyZeminH) burayaKadar(true);
	
	if (cx==yemX && cy==yemY)
	 {
          //tam isabet
          	YemOlustur(); 
          	clearInterval(Int2); // uza bakalım biraz
          	 setTimeout("Int2=setInterval(izsur,bekle)",800);
	 }
	
}
function ilerle() {
 ctx.save();
ctx.fillStyle = "red";
 switch (yon) {
 	case 2:  x=x+step; break;
 	case 1:  x=x-step; break;
 	case 4:  y=y+step; break;
 	case 3:  y=y-step; break;
 	
 }
  if (typeof  izbirakCordinat[parseInt(x/step)] =="undefined") izbirakCordinat[parseInt(x/step)] =new Array(parseInt(ZeminH/step));
  
  nereyeGidiyorBuMahlukat(x,y);
  izbirak[iz]=yon;

  
  izbirakCordinat[parseInt(x/step)][parseInt(y/step)]=1;
    ctx.fillRect(x,y,lineW,lineW);
  iz++;
  
	}
	
function addlog(str) {
var domLog=(document.getElementById("log"))?document.getElementById("log"):0;
if (!domLog) return false;//domLog.innerHTML+
domLog.innerHTML=domLog.innerHTML+str;
}


	
		
		

Bastan Al Durdur Devamt Et Yemle

Görüşler

0
kulker
Haberi gönderince html taglari temizlendiği için kod haliyle eksik olmuş. Kodu çalıştırmak için id=Zemin özelliğinde bir div tagini body arasına koymanız ve init fonksiyonun 3. satırında bulunan domZem.innerHTML=''; kodunu

domZem.innerHTML='<canvas id="canvas" width="'+ZeminW+'" height="'+ZeminH+'" > </canvas>';

olarak değiştimeniz yeterli. Tabi body onload a init fonksiyonunuda çağırmayı unutmayın.
Görüş belirtmek için giriş yapın...

İlgili Yazılar

Pavuk???

m1a2

Hemen söyleyelim, bu `Pavuk` ne oluyor? Pavuk özellikle son haliyle `wget`e ciddi bir rakip oluyor... Malum, `wget` Linux`taki temel araçlardan birisidir. Bendeniz de lynx, wget vb. kod tabanı iyice oturmuş, mature programları değiştirme taraftarı değilimdir. Alışkanlıklar bu tip temel araçların değiştirilmesine de çoğunlukla engeldir. 1-2 yıl önce ismini duyduğum fakat `wget`e duyduğum saygıdan ötürü incelemeye kalkışmadığım :)`pavuk`u bir süredir deniyorum. Pek te memnun kaldım. Siz de bir deneyin isterseniz. Nereden mi? İşte şuradan.

PowerPoint (Ya Da Killer App Gerçekten Öldürür Mü?)

FZ

Yazılımcıların pek çoğu Bob Gaskins'in yerinde olmak ister(di) herhalde. Dünyanın en çok kullanılan programlarından birini geliştiren bu yazılımcı acaba geliştirdiği PowerPoint ile milyonlarca kişiyi zihinsel bir çıkmaza sokacağının farkında mıydı?

PowerPoint insanda beyin hasarı yaratır mı? Karmaşık bilginin gözden kaçmasına yol açar mı? PowerPoint, hayati risk taşıyan durumların fark edilmesini engelleyerek ve konuyu "basitleştirerek" (!) insan hayatını tehlikeye atar mı? Olası çözümler nedir? Pekiyi ya karşıt görüşler? Devam edelim...

Bilişsel Bilim ve YazBoz: Kelimeler Ağlar Anlamlar (yahut Hadoop ve Lucene)

FZ

Boğaziçi Üniversitesi, Bilişsel Bilim bölümünden arkadaşım Hakan Ünlü'nün bugün yolladığı bir e-postayı paylaşmak istiyorum: "Merhaba Son günlerde Yazboz sitesi çok ilgimi çekiyor. Sizlerin de ilgisini çekeceğini düşündüğüm için burada duyurmak istedim: http://www.yazboz.com

Site aslında bir serbest çağrışım oyunu. Size bir kelime veriyor ve bunula ilgili aklınıza gelen ilk kelimeyi yazmanızı istiyor. Bunun sonunda tüm oyuncular tarafından girilen kelimeleri 'connectionist' bir yaklaşımla bağlıyor. Sonuçları da görsel olarak izlemek mümkün.

GCC 4.0 geliyor, RC1 yayınlandı

Soulblighter

C, C++, Objective-C, Fortran, Java ve ADA dillerinde yazılmış programları 15'in üzerinde farklı bilgisayar mimarisi için derlememize imkan veren GCC (GNU Compiler Collection) 4.0 RC1 yayınlandı. Değişiklikleri buradan okuyabilir, buradan da GCC 4.0 RC1'i indirebilirsiniz.

GNU/Linux sistemlerin en önemli, kritik ve olmazsa olmaz bileşenlerinden biri olan GCC derleyici süitinin yeni sürümü ile birlikte bu derleyici ile derlenen Firefox, OpenOffice.org, Linux çekirdeği gibi pek çok yazılımın kalitesinde ve performansında artış bekleniyor.

Kazaa Yolun Sonuna mı geldi?

anonim

Dünyanın en popüler P2P paylaşım araçlarından biri olan kazaa , Müzik endüstrisiyle uzun zamandır amasız bir mücadele vermekteydi. Uzun zamandır bu çarpışmadan galipte çıkıyordu. Fakat son alınan mahkeme kararıyla yolun sonundaki ışık görünmeye başladı..

Kazaa yazılımının sahibi olan Sharman Networks adına Avustralya'da açılan davaların sonuncusunda şirket , kopya hakkı bulunan dosyaların paylaşıma açıldığı gerekçesiyle suçlu bulundu. Uzun zamandır birçok davadan kıl payı kurtulan şirket için bu karar , çok ağır bir darbe olacak gibi..