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

Az bilinen bir işletim sistemi: Plan 9

misafir

Bell laboratuvarlarının bilgisayar dünyasına katkısı UNIX(TM) ve C dilinden ibaret değil. İlk kez 1993'te dağıtılan ve 2002'de bir özgür yazılım lisansına kavuşan Plan 9 işletim sistemi de bu katkılardan biri.

Java ve .NET : Derin Rekabet

FZ

Son günlerdeki anketleri inceleyen, yazışmalara,sorulara kulak ve göz misafiri olan FZ dayanamadı ve bulduğu bir röportajı tercüme ederek FM camiası ile paylaşmaya karar verdi. Söz konusu röportaj Java dünyasındaki en kıvrak ve yetkin firmalardan biri olma özelliğini halen koruyan BEA'nın Baş Teknoloji Sorumlusu (Chief Technology Officer - CTO) Dr. Scott Dietzen ile 13 Aralık tarihinde gerçekleştirilmiş. Dr. Dietzen Java camiasında, sunucu tarafındaki Java standartlarının geliştirilmesinde yani J2EE (Java 2 Enterprise Edition) teknolojisinin olgulaşmasındaki öncü rolü ile saygı duyulan bir isim. Kendisi aynı zamanda Java Community Process kurucularından. Bu röportajın ana konusu: Java, .NET, web servisleri, vs.

tspell: Türkçe Doğal Dil İşleme Yazılımı

FZ

İlk kez Bilgi Üniversitesi´nin bilgisayar bilimleri e-posta listesinde görmüştüm tspell projesinin adresini, sanırım Mart ayı civarıydı, gidip baktığımda ortada henüz bir şey yoktu. Geçen hafta uğradığımda ise Java ile geliştirilmiş ve hiç de küçümsenmeyecek bir sistem ve güzel bir web sayfası karşıladı beni. Bilişsel bilim (cognitive science) ve doğal dil işleme (NLP - Natural Language Processing) konuları ile uğraşan biri olarak heyecanlandığımı inkâr edemem.

İki Türk programcı tarafından başlatılan ve Türk diline ciddi bir teknolojik hizmet olarak gördüğüm böyle bir projenin varlığı, açık kodlu olması ve paylaşıma açık olarak sunulması beni çok sevindirdi.

Bir hayli iddialı olan projenin 0.2 numaralı sürümü hem doğrudan çalışabilir olarak (200 KB) hem de istenirse Java kodları ile birlikte Internet´ten çekilebiliyor. Geliştiricilerin Eclipse yazılım geliştirme platformunu önermeleri ve tspell Java kaynak kodlarının Eclipse üzerinden nasıl çekilip derlenebileceğini anlatan teknik bir makale yazmış olmaları ise benim gibi konuya hızlı bir giriş yapmak isteyen ancak Eclipse ve Java konusunda çok deneyimli olmayan programcılar için çok ciddi bir artı puan. Görebildiğim kadarı ile Eclipse bir hayli güçlü bir platform, CVS işlevselliği de dahil olmak üzere her türlü aracı bünyesinde sunuyor ve entegre olarak ekip çalışmasınız kolaylaştırıyor.

Prototype Javascript Framework

tongucyumruk

Web bir uygulama geliştirme platformu olarak kendini kabul ettireli çok oldu. Şimdi Web 2.0 gibi konuar tartışılırken web'in her geçen gün artan popülerliği yanında gerçekleştirilmesi gitgide zorlaşan kullanıcı taleplerini yanında getiriyor. İnsanlar her geçen gün daha etkileşimli, daha hareketli web uygulamaları istiyor. Bu durumun her geçen gün programcıları daha fazla yorması sonucunda bugün ulaştığımız noktada artık JavaScript ile yazılmış etkileşimli web uygulamaları geliştirmeyi kolaylaştıran altyapı yazılımları da ortaya çıkmaya başlıyor. İşte Prototype Javascript Framework'te bu amaçla ortaya çıkmış bir altyapı yazılımı.

Moveabletype ile kişisel web sitesi yönetimi

angeleous

Kişisel web sitenizde günlük olarak yaşadığınız olayları, paylaşmak istediklerinizi insanlara duyurmak, insanların yazdıklarınıza yorumlarını eklemelerine olanak sağlamak istiyorsanız movabletype bu iş için sade ve güçlü bir uygulama. Perl ile yazılmış uygulama MySQL, PostgreSQL, Berkeley DB destekliyor ileride de Oracle desteği verileceği belirtiliyor. Uygulamanın tüm özellikleri için buraya tıklayabilirsiniz.