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

Egzotik Programlama Araçları Yaygınlaşıyor

FZ

TDK sözlüğüne göre "egzotik" kelimesinin anlamı: "Uzak, yabancı ülkelerle ilgili, bu ülkelerden getirilmiş, yabancıl." Bir çoğumuz için yapay sinir ağları, genetik programlama, Common Lisp, PROLOG gibi güçlü teknolojiler "günlük" programlama deneyimlerinin ötesindeki karanlık ve gizemli alanlar, uzak diyarlar. eWeek'e göre ise bu durum hızla değişiyor.

CSD / TINUX İşletim Sistemi

FZ

CSD/TINUX C ve Sistem Programcıları Derneği (CSD) tarafından geliştirilmeye başlanmış olan 32 bit, çokişlemli (multiprocessing & multithreaded) preemptive, birden fazla işlemciyle çalışmayı destekleyen, grafik tabanlı bir işletim sistemi geliştirme projesidir. İşletim sisteminin tasarımı ve geliştirilmesi C ve Sistem Programcıları Derneği'nde oluşturulan bir proje grubunun eşliğinde yürütülecektir. Projenin tahmini süresi iki yıldır.

Design Patterns: Tasarım Şablonları ve Programlama Dillerinin Kötü Yönleri

FZ

Geçen sene Eylül ayında, Volkan Yazıcı programlama dünyasının sıcak konularından biri olan tasarım şablonlarına yani 'design patterns' konusuna değinmişti:

Merhaba, comp.lang.lisp listesinde "This may be a nonsensical question, but I was wondering if it is idiomatic to apply common design patterns to lisp applications." kaşıntısı ile başlayan bir tartışmalar dizisi oldukça ilgimi çekti -- şüphesiz ki bunda bu dönem almaya başladığım Aspect-Oriented Software Development dersinin de etkisi olmuştur -- ve sizin ile oradan çok ufak bir mesajı paylaşmak istedim.


Tasarım Şablonları, nam-ı diğer Design Patterns mevzusu epey bir süredir sıcak konular arasında. Bu gibi durumlarda sık sık karşılaştığımız gibi konu basit bir teknik konu olmaktan çıkıp pek çok yanlış anlamayı, çok çeşitli felsefi bakış açılarını, alakasız yerlere dallanıp budaklanmayı, düpedüz mantıksal hataları, politik ve ekonomik savaşları bünyesinde barındırmaya başlıyor. Acaba neden?

wxWidgets ile bir uygulama: wxCar

mustafa_

wxCar, wxWidgets/C++ ile yazılan oto kiralama/satış firmalarına hitap eden küçük bir uygulamadır.

Serialization olarak Boost kütüphanesi kullanılmıştır.

C++ : `Standard Library´nin Ötesine Geçin

FZ

C++ programlama dilinde ustalaştıktan sonra çoğu programcının yaptığı ilk iş nedir? Standart fonksiyon kitaplığının dışındaki fonksiyon kitaplıklarını öğrenmek. Elbette standart C++ fonksiyon kitaplığının içinde karakter dizisi fonksiyonları, G/Ç kanalları, `container´lar, öteleyiciler (iterators), algoritmalar, vs. mevcuttur ancak modern programlama dünyasında en çok kullanılan kavramlar standart olarak gelmez: ağ programlama, GKA (Grafik Kullanıcı Arayüzü), eşzamanlılık, vs.

C++ in a Nutshell kitabının yazarı Ray Lischner, Blitz++, MTL (Matrix Template Library), ACE (Adaptive Communication Environment), Loki ve Boost gibi kitaplıkları ele aldığı bu yazısında C++ programcısının verimliliğini artırabilecek önemli noktalara dikkat çekiyor.