Kapat

HTML & JavaScript Örnek Oyun

Anasayfa
Genel HTML & JavaScript Örnek Oyun
HTML & JavaScript Örnek Oyun
 

TopYakala

body{padding: 0; margin: 0; overflow:hidden;}

window.animasyonFrameIstegi = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();

window.animasyonFrameIptal = (function(){
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout()
})();

var canvas = document.getElementById(“canvas”),
ctx = canvas.getContext(“2d”),
G = window.innerWidth,
Y = window.innerHeight,
mouse = {},
parcalar = [],
topum = {},
cubuk = [2],
puanlar = 0,
hiz = 30,
carpismaParcacigi = 20,
carpismaDegiskeni = 0,
parcaPozisyonu = {},
kivilcimDegiskeni = 1,
baslatButon = {},
resetButonu = {},
bitti = 0,
res,
cubukCarpisma;

canvas.width = G;
canvas.height = Y;

canvas.addEventListener(“mousemove”, mouseHareket, true);
canvas.addEventListener(“mousedown”, butonTiklandi, true);

carpisma = document.getElementById(“carp”);

topum={
x:50,
y:50,
r:5,
c:”white”,
xh:4,
yh:8,

ciz: function () {
ctx.beginPath();
ctx.fillStyle = this.c;
ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
ctx.fill();
}

};

baslatButon = {
w: 100,
h: 50,
x: G/2 – 50,
y: Y/2 – 25,

ciz: function () {
ctx.strokeStyle = “white”;
ctx.lineWidth = “2”;
ctx.strokeRect(this.x, this.y, this.w, this.h);
ctx.font = “18px Arial, sans-serif”;
ctx.textAlign = “center”;
ctx.textBaseline = “middle”;
ctx.fillStyle = “white”;
ctx.fillText(“Başla”, G/2, Y/2);

}

};

resetButonu = {
w: 100,
h: 50,
x: G/2 – 50,
y: Y/2 – 50,

ciz: function () {
ctx.strokeStyle = “white”;
ctx.lineWidth = “2”;
ctx.strokeRect(this.x, this.y, this.w, this.h);
ctx.font = “18px Arial, sans-serif”;
ctx.textAlign = “center”;
ctx.textBaseline = “middle”;
ctx.fillStyle = “white”;
ctx.fillText(“Tekrar Oyna!”, G/2, Y/2 – 25);

}

};

function parcacikOlustur(x, y, m) {
this.x = x || 0;
this.y = y || 0;

this.radius = 1.2;

this.xh = -1.5 + Math.random () *3;
this.yh = m * Math.random() * 1.5;
}

function hizArttir() {
if (puanlar % 4 == 0 ){
if (Math.abs(topum.xh) < 15){ topum.xh += (topum.xh G) { topum.xh = -topum.xh; topum.x = G - topum.r; } else if (topum.x - topum.r < 0) { topum.xh = -topum.xh; topum.x = topum.r; } } if (carpismaDegiskeni == 1){ for(var k = 0; k < carpismaParcacigi; k++ ){ parcalar.push(new parcacikOlustur(parcaPozisyonu.x, parcaPozisyonu.y, cogalt) ); } } parcalariyay(); carpismaDegiskeni = 0; } function mouseHareket(e) { mouse.x = e.pageX; mouse.y = e.pageY; } function carpismalar(b, p) { if (b.x + topum.r >= p.x && b.x – topum.r = (p.y – p.h) && p.y > 0){
cubukCarpisma = 1;
return true
}else if(b.y 0) {
carpisma.pause();
}
carpisma.currentTime = 0;

carpisma.play();

}
parcaPozisyonu.x = topum.x;
carpismaDegiskeni = 1;

}

function parcalariyay() {
for (var j = 0; j< parcalar.length; j++){ par = parcalar[j]; ctx.beginPath(); ctx.fillStyle = "white"; if (par.radius > 0){
ctx.arc(par.x, par.y, par.radius, 0, Math.PI*2, false);
}
ctx.fill();
par.x += par.xh;
par.y += par.yh;

par.radius = Math.max(par.radius – 0.05, 0.0);
}
}

function skoruGuncelle() {
ctx.fillStyle = “white”;
ctx.font = “16px Arial, sans-serif”;
ctx.textAlign = “left”;
ctx.textBaseline= “top”;
ctx.fillText(“Puan: ” + puanlar , 20, 20);
}

function oyunBitti() {
ctx.fillStyle = “white”;
ctx.font = “20px Arial, sans-serif”;
ctx.textAlign = “center”;
ctx.textBaseline = “middle”;
ctx.fillText(“Oyun Bitti – Toplam Puanın : ” + puanlar, G/2, Y/2 + 25 );

animasyonFrameIptal(res);

bitti = 1;

resetButonu.ciz();
}

function butonTiklandi(e) {

var mx = e.pageX,
my = e.pageY;

if (mx >= baslatButon.x && mx = resetButonu.x && mx

0 0 0 0 0 0

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir