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

Garip Bir Hata Mesajı

PCW

Error Message: Your Password Must Be at Least 18770 Characters and Cannot Repeat Any of Your Previous 30689 Passwords. Çok tanıdık bir işletim sisteminde karşılaşılan bir hata mesajı bu. Tabi ki çözümü de var. En son servis paketini yüklemek.. Tahmin edebildiniz mi? Ayrıntılar bu linkte...

OpenAFS: Dağıtık Dosya Sistemi

acemi_

openafs.org: Dosyalarımı tek bir sunucu makinede toplayıp Internet'e bağlı her makineden dosyalarımı rahatca kullanabileceğim bir çözüm arıyordum. Bu işi, bir müddet Samba ile yapmıştım ama performansından pek memnun kalmamıştım. Güvenlik konusundaki kötü ününden dolayı da NFS kullanmaktan çekiniyordum.

Knowlan: Ağınız Kontrolünüzde

FZ

Knowlan, ARP protokolunu kullanan yerel ag IP ve MAC adresi tarayicidir. Knowlan, kodun daha kolay tasinabilmesi icin libpcap ve libnet kutuphanelerini kullanarak yazildi.

Knowlan, yerel agdaki erisilebilen (acik) bilgisayar' larin IP adreslerini ve MAC adreslerini yerel agdaki butun ip adreslerine bir kereye mahsus ARP REQUEST paketi atma ve ARP REPLY paketi gonderen bilgisayarlarin IP ve MAC adreslerini kullaniciya sunma seklinde calismaktadir.

Açık Kodlu Özgür Bir Yazılım Projesi: FlightGear Uçuş Simülatörü

FZ

1995 yılında havacılık simülasyonları konusunda uzmanlaşmış Curtis Olson isimli bir mühedis Microsoft Flight Simulator´a bir eklenti (add-on) yapmaya çalışırken vaktinin büyük bir kısmını asıl iş yerine bu yazılımın dosya formatlarını, iç yapısını, işleyişini, vs. anlamak için enerji harcayarak geçirdiğini fark etti. Ve kendine şöyle dedi: Oturup kendi uçuş simülatörümü yazmaya başlasam, bunu açık kodlu ve GPL lisanslı olarak kamuoyuna sunsam ve sonra...

Olson´un bu çabası ABD´de çılgın bir mühendisin delidolu idealizmi olarak algılanmadı tahmin edebileceğiniz gibi. Proje başladıktan kısa bir süre NASA´daki uzay mekiği programının önemli mühendislerinden biri olan Jon Berndt de projeye destek vermeye başladı. Bu katılımı takiben, bir başka mühendis Tony Peden de projeye katılmakta tereddüt etmedi. Ve gerisi büyük hızla geldi.

FlightGear isimli bu özgür yazılım projesine destek veren deneyimli programcı ve mühendislerin yaş ortalaması 35´in üstünde. Hepsi de kendi alanlarındaki mühendislik ve fizik konularında usta isimler. Geliştirdikleri sistem uç noktadaki havacılık mühendisliği modellerini, grafik (OpenGL) ve ağ programlama tekniklerini kullanıyor. Herkesi sistemlerini incelemeye ve katkıda bulunmaya davet ediyorlar.

FJAX - Flash ve Ajax

larweda

AJAX, son dönemde çok sıklıkla adını duyduğumuz, ve çoktandır başarılı örneklerini görmeye başladığımız (Gmail, Flickr, Hotmail, Pageflakes vs.) bir web teknolojisi. Bu konuda bir çok kütüphane ve geliştirme aracı da hali hazırda mevcut. Bu araçlara yeni eklenmiş, ama farklı bir bakış açısı getiren bir teknoloji var: FJAX. Araçların hemen hemen hepsi bi javascript kütüphanesi sunarken, FJAX tarayıcı tarafında yapılacak XML yorumlama işini boyut olarak küçük bir flash objesine yaptırıyor. Bu, hem tarayıcının işini kolaylaştırıyor, hem de diğer araçlar gibi geliştirme sürecini azaltmayı hedefliyor. Üstelik bu konuda çalışan insanların çoğunun başının belası olan tarayıcı uyumluluğu problemlerini de azalttığını iddia ediyor.
İncelemek ve indirmek için: www.fjax.net
Fjax'ın geliştiricileri Jay ve Steve McDonald ile webmonkey'in yaptığı detaylı bir röportaj da burada.