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

Miranda, ICQ´ların en güzeli...

butch

Uzun çabalar sonunda Sundance muradına erdi. Diskte onlarca mb yer kaplayan, %3 işlemci gücü yiyen ve arka planda ne işler çevirdiğini bilemediğimiz Mirabilis ICQ´nun alternatifini buldu. Bana da haberini yazmak düştü... Konumuz Miranda, ICQ´ların en güzeli.

HTML kodunun içine C++ yazabilir misiniz?

FZ

COMDEX etkinliğinde dikkate değer bir çıkış yapan ve "Best of COMDEX Awards Internet Software Finalist" ünvanını kazanan Rivar Technologies "CODE: NEO" adlı ürünü ile dinamik web sayfası geliştirme kavramına yeni ve radikal bir boyut getirmeye hazırlanıyor.

Matematik ve programlama gerçek hayatta ne işe yarar:emeksensin.com ve rengarenk

FZ

Emeksensin.com'da en son yaptığımız yeniliğin adı Rengarenk. Rengarenk özelliği ile eserleri renklerine göre arayabiliyorsunuz. Buradan deneyip görebilirisiniz: http://www.emeksensin.com/rengarenk. Renk arama özelliği dünyada az sitede görebildiğimiz bir özellik çünkü bunu yapabilmek için bazı zor problemleri çözmek gerekiyor. İlk problem eserin resmindeki binlerce renkten önemlilerini seçmek. Bunu yapan birçok görüntü işleme algoritması var. Biz OpenCV kütüphanesini kullanarak bir gerçekleme yaptık.

Ch: C/C++ Yorumlayıcısının 6.0 Sürümü Duyuruldu.

Tarık

SoftIntegration' un daha evvel şurada tanıtmaya çalıştığımız ürünü Ch: C/C++ Yorumlayıcısı 6.0 sürümüne ulaştı. Bu sürümde gömülü uygulamalarda kullanacağınız yorumlayıcı için hata ayıklama aracı (debugger) ve uygulamalar için çoklu iş parçacığı(multi thread) desteğide beraberinde geliyor.

Augmented Reality: Gerçeklik Anlayışımızda Yeni Bir Boyut

FZ

Önce VR vardı yani Virtual Reality, yani Sanal Gerçeklik, kafaya geçirdiğiniz kask ile tamamen bilgisayar tarafından oluşturulmuş dünya gözlerinizin önüne geliyordu. Şimdi ise yeni bir kavramla yüz yüzeyiz, Augmented Reality. Nasıl tercüme edilir doğru düzgün bilmiyorum ama bu kavramla anlatılmak istenen gerçek dünya görüntüleri üzerine bilgisayar grafiklerini bindirmek ve böylece mevcut algılayışınızı çok öteye götürmek.

Tyler Mitchell´in blogunda anlatılanlara bakılacak olursa Avustralyalı araştırmacılar bir hayli aşama kaydetmiş durumdalar. Fiziksel ortamınızda 3B modelleri nasıl yaratıp onlarla oynayabileceğinizi videolarla gösteren Tinmith Technologies sitesine ve benzer bir teknolojinin kullanıldığı Augmented Reality Quake sitesine göz atmakta fayda var.

Düşünsenize bu Avustralyalı amcaların hazırladığı sırt çantasını ve kaskı giyiyorsunuz, sonra terk edilmiş ve tekinsiz bir binada ilerlemeye başlıyorsunuz, her an koridorun köşesinden korkunç bir canavar çıkabilir ya da belki arkadaşınız sizi vurmaya çalışıyor olabilir. Hangisi gerçek, hangisi hayal? Tabii insanlar bunu coğrafi bilgi sistemleri gibi daha faydalı işler için de kullanmayı düşünüyorlar ;-)