Html 5 ile yılan oyunu yapmak.
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.
MSIE desteklemediği için örnek uygulamalarımızı Firefox, Opera veya Google chrome browserleri ile test etmemiz gerekecek.
Ben yıllar önce Pascalda yazdığım snake oyununu kolayca uyarladım. Buyrun efendim naçizane bir örnek:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>hmtl 5 test - hello word </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
#canvas {
border:1px solid black;
}
</style>
<script language="JavaScript" type="text/javascript">
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='<canvas id="canvas" width="'+ZeminW+'" height="'+ZeminH+'"></canvas>';
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 (cx<1 || cx+lineW>ZeminW) burayaKadar(true);
if (cy<1 || cy+lineW>ZeminH) 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;
}
</script>
</head>
<body onload="init()" onkeypress="return YonTuslari(event)">
<div id=Zemin></div>
<p>
<button onclick="burayaKadar(false);baslat();" >Bastan Al</button>
<button onclick="dur();this.disabled=true;" id=BtnStop disabled="disabled">Durdur</button>
<button onclick="baslat(true);this.disabled=true;this.blur()" id=Btnplay disabled="disabled">Devamt Et</button>
<button onclick="YemOlustur()">Yemle</button>
</p>
<div id=log style="width:400px;height:200px;overflow:auto"> </div>
</body>
</html>
Çarş. Ağus. 03, 2011 3:57 am tarafından Misafir
Konu: Html 5 ile yılan oyunu yapmak. 
