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

Ch: C/C++ Yorumlayıcısı

Tarık

Ne kadar başarılı olduğu tartışılır fakat C/C++ programlama dillerini kullanarak yorumlanabilir programlar yaratma fikri oldukça ilginç olsa gerek. Zira birçok yorumlanabilir dilin C dilinden esinlenerek geliştirildiğini ama C dilinin yapı itibariyle yerli çalıştırılabilir dosya (native executable) üretmeye daha yatkın olduğunu düşünürsek.

Nanoweb, PHP ile web sunucusu

butch

Niye sorusuna "Ağırlıklı olarak web uygulamaları için geliştirilmiş bir programlama diliyle web sunucusu yazma fikri çok komik" diye cevap vermiş programın yaratıcısı. Evet, Nanoweb PHP ile yazılmış, PHP, CGI, SSL, Mysql destekleyen bir web sunucusu. Fikrin komikliği kadar aslında programın gayet ilgi görmesi ve modüler yapısı sayesinde hızla gelişiyor olması da komik. Bir inceleyin derim.

Vim 7 çıktı!

sundance

Unix camiasının en eski editörlerinden vi'ın steroidli hali, VİM'in 7.0 sürümü Bram Moolenar tarafından anons edildi.

Yeni özelliklerini görmek ve kullanmak istiyorsanız buradan indirebilirsiniz. Daha Amiga sürümü çıkmadı, Amiga'cılar bir zahmet Subversion'a.

Tabi bir de unutmadan; cat flames.txt > /dev/null

Yeni bir YSA Eğitme Algoritması

FZ

Idaho State University´deki Vitit Kantabutra ve ekibi YSA (Yapay Sinir Ağları) sistemlerinin eğitilmesi için yeni ve öncekilere kıyasla çok daha yüksek performanslı ve doğru çalışan bir eğitim algoritması geliştirdiler.

Nokia: Python Kullanmak İçin Bir Sebep Daha

FZ

Cep telefonu üreticisi Nokia, S60 serisi cep telefonlarının artık Python ile programlanabileceğini duyurdu. Açık kodlu olarak geliştirilen bu proje ile cep telefonlarını programlamak çok daha kolay hale gelmiş durumda. Bir kıyaslama yapmak gerekirse Hello World in C++, Epoc style (for Symbian OS) koduna bakılabilir. Benzer işi yapan bir Python programı ise 4-5 satır uzunlukta. (C++ linki için Hakan Latifaoğlu'na teşekkürler.)