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

F# ile Programlama - Microsoft Dil Teknolojilerinde Nereye Gidiyor?

FZ

Don Syme’in F# programlama ile ilgili tanıtım ve demo videolarını gördükten sonra Pazartesi mutlaka F# derleyicisini ve etkileşimli kabuğunu indirip denemem gerektiğini düşünmüştüm.

Emacs + SLIME + Common Lisp tarzında rahat bir etkileşim ve hızlı geliştirme, deneme, sonuçları anında görme imkanı sunan F# bir betik dilinin kıvraklığı ile fonksiyonel programlamadan ve ileri programlama tekniklerinden faydalanmayı sağlıyor. Derlenen programlar .NET IL (Intermediate Language) koduna derlendiği ve bunlar da JITlenerek (Just In Time compilation) çalıştırıldığı için performans gayet iyi görünüyor.

PAS (Printer Accounting Server)

episode

Mükemmel bir program yapılmış. Adı PAS yazıcıya gönderilen dökümanların yönetiminde çığır açan bir yazılım. Üretici firma yanlış hatırlamıyorsam bir fransız şirketi. Peki nedir bu PAS? Bir manyetik kartımız var fotokopi makinesinin başına gidiyoruz. Makinanın ekranında "Please insert a card" yazıyor, kartımızı kart okuyucudan geçiriyoruz ve fotokopi çekmemiz için makineyi açıyor. Kaç sayfa fotokopi çekersek hesabımıza işliyor. Tabi bunun için ilk önce kartımızı doldurmamız gerekiyor. Ne kadar para yüklemişsek o kadar çekiyor. Print içinde aynı şey geçerli. Bu programın çalışması için bir linux veya NT server'a ihtiyaç var. Program sayesinde Fotokopi ve Yazıcılarınızın analizlerini otomatik olarak alabiliyorsunuz. Fiyatına bakamadım web sitesi www.metrics.com

Çevik Yöntemler ve Süreç Bazlı Yöntemler: CMMI / XP

anonim

4 Kasım 2007

Çevik Yöntemler ve Süreç Bazlı Yöntemler: CMMI / XP

Proje Yönetiminde, süreçlere ve dokümanlara dayalı yöntemlerle çevik yöntemler iki ayrı yaklaşımı temsil ediyormuş gibi görünüyor.Bu 2 yaklaşımın detaylandırılması, uygulama örneklerinin verilmesi ve birlikte çalışabilirliği Orhan Kalaycı tarafından bu seminerde aktarılacaktır.

YER : Kadir Has Üniversitesi – Cibali Kampüsü

KATILIM KOŞULLARI : Katılım için kayıt yaptırmak gerekir.

KATILIM ÜCRETİ : 30 YTL (IPYD Üyesi Olmayan), 25 YTL (IPYD/TBD Üyesi)

Komodo 2.0 Çıktı

FZ

Perl, Python, PHP, Tcl, XML, XSLT için optimize edilmiş ve Ruby, JavaScript gibi pek çok dili de doğrudan destekleyen Komodo 2.0 IDE ActiveState tarafından piyasaya sürüldü.

Söz konusu IDE Mozilla tabanlı olup Windows ve Linux ortamında çalışıyor.

Dikkati çeken özellikleri arasında CGI emülasyonu, Regular Expression desteği, ASPN (ActiveState Programmers' Network) kod deposuna (code repository) erişim de bulunuyor.

Unreal'i Yapan Adam Programlama Dillerinin Geleceğini Anlatıyor

FZ

Epic Games'ten Tim Sweeney, SIGPLAN ve SIGACT tarafından 33.sü düzenlenen Programlama Dillerinin İlkeleri Sempozyumunda The next mainstream programming language: a game developer's perspective başlıklı bir konuşma gerçekleştirdi.