HERSEY BURDA

HERSEYİ BULABİLDECEĞİN TEK ADRES
 
AnasayfaTakvimSSSAramaÜye ListesiKullanıcı GruplarıKayıt OlGiriş yap
Arama
 
 

Sonuç :
 
Rechercher çıkıntı araştırma
En son konular
» free slot machines win cash
Çarş. Ağus. 03, 2011 3:57 am tarafından Misafir

» watch naruto hentai watch naruto hentai free
Çarş. Ağus. 03, 2011 3:52 am tarafından Misafir

» major fish oil
Salı Ağus. 02, 2011 10:26 pm tarafından Misafir

» hentai about hentai academy
Salı Ağus. 02, 2011 10:10 am tarafından Misafir

» гинекология ответы
Ptsi Ağus. 01, 2011 9:18 am tarafından Misafir

» x-Hack hack you
Ptsi Ağus. 01, 2011 8:00 am tarafından Misafir

» When the first Whirlpool Duet album was released in December 2001
Ptsi Ağus. 01, 2011 3:05 am tarafından Misafir

» women at work hentai online women at work hentai stream
Ptsi Ağus. 01, 2011 2:56 am tarafından Misafir

» facebook likes xb
Paz Tem. 31, 2011 9:22 am tarafından Misafir

Tarıyıcı
 Kapı
 Indeks
 Üye Listesi
 Profil
 SSS
 Arama
Forum
HABERLER
Fikri Türkel köşe yazıları

Paylaş | 
 

 Html 5 ile yılan oyunu yapmak.

Aşağa gitmek 
YazarMesaj
Admin
Admin


Mesaj Sayısı : 3361
KULLANICI PUANLARI : 9918
Kayıt tarihi : 16/05/10

MesajKonu: Html 5 ile yılan oyunu yapmak.   Paz Haz. 27, 2010 5:28 pm

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>
Sayfa başına dön Aşağa gitmek
Kullanıcı profilini gör http://dessas.yetkinforum.com
 
Html 5 ile yılan oyunu yapmak.
Sayfa başına dön 
1 sayfadaki 1 sayfası
 Similar topics
-
» 27.07.2010 27Temmuz 2010 Salı Oyunu İndirme Adresi
» serverinizdeki lvl sınırını 120 yapmak
» Lütfen Oyunu Açamıyorum moderator ve adminler yardım edin lütfen

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
HERSEY BURDA :: OYUN PROGRAMLAMA :: OYUN PROGRAMLAMA-
Buraya geçin: