Merhaba Arkadaşlar,
Geçenlerde Ping pong oyununun demosunu sizlere sundum. ancak geliştirmek için pek vaktim olmadı ve kodları isteyen arkadaşlar için kodları paylaşıyorum.
kodların nasıl çalıştıgını yanlarına yazdım.
iyi çalışmalar herkese

http://bilalisler.net/index.php/jquery-ping-pong-oyunu-nasil-yapilir-ping-pong-oyunu-ping-pong-jquery-oyun-yapimi/

Merhaba Arkadaşlar,

Bu makalemde jQuery ile Ping Pong Oyunu Yapımından Bahsedeceğiz.

Klasik Ping pong oyunlarından esinlenerek jQuery İle ping pong oyunu kodladık..

geliştirmelerine devam edeceğiz şuanlık demo sürümüyle kullanıcılara yayınlayarak şunlarda olsun dediğiniz yerleri yapmaya çalışacağız.

Oyundan Burada Bahsedilmiş Mantığı daha iyi kavramak için linke göz atabilirsiniz.

Geliştirmelerde PHP desteği ile 2 kişilik ve Socket Programıyla online oynamayı yapmaya çalışacağız :)

inşallah kodları birkaç güne kadar yayınlayacağım şuan tasarım oldukca dandik duruyor tasarımıda Şekillendirip son kodlamayı yaptıkdan sonra siz değerli takipcilerimize yayınlayacağız.

umarım Oyun yapımcılara faydalı olur.

Ping Pong Oyun Çalışma Mantığını Kısaca açıklamak gerekirse,

Oyunumuz dikdörtgenlerden oluşmakta. Oyunda, mouse ile haraket ettirebileceğimiz bir dikdörtgen var. Bir de hareketli bir dikdörtgen var. Eğer duvara çarparsa hızı ters yönde olacak(vx, vy yerine -vx, vy gibi). Oyun döngüsü boyunca bu kontroller bulunmakta.





DEMO PİNG PONG OYUNU

HTML Kodları Aşağıdaki gibidir;








jQuery Kodları Aşağıdaki gibidir;

Kodların açıklamalarını yanlarına yazdım. umarım faydalı olur. takıldığınız yerleri yorum bırakarak sorabilirsiniz



var ok = 0, zaman;
var diffTime = 0;
var alanX=100, // alanın x konumu
alanY=50, // alanın y konumu
alanW=500, // alanın genişliği
alanH=600, // alanın yüksekliği
alanC="#ccf", // alan rengi
topX=200, // topun x konumu
topY=300, // topun y konumu
topS=10, // topun boyutu(kare)
topC="#f66", // topun rengi
cubukX=250, // çubukun x konumu
cubukY=500, // çubukun y konumu
cubukW=100, // çubukun genişliği
cubukH=15, // çubukun yüksekliği
cubukC="#6f6"; // çubuk rengi

var topHizX = 6, //x hızı
topHizY= 4; // y hızı

var tasSayisi=0;

function ana(){

divYap();

konumla();

tasYap(100);

guncelle();
}

function divYap(){

// alanı yapılandırıyor
$("#alan").css({
position: 'absolute', // üzerlerinden geçmeleri için
top: alanY+"px",
left: alanX+"px",
width: alanW+"px",
height: alanH+"px",
backgroundColor: alanC
});

// topu yapılandırıyor
$("#top").css({
position: 'absolute', // üzerlerinden geçmeleri için
top: topY+"px",
left: topX+"px",
width: topS+"px",
height: topS+"px",
backgroundColor: topC
});

// cubuğu yapılandırıyor
$("#cubuk").css({
position: 'absolute', // üzerlerinden geçmeleri için
top: cubukY+"px",
left: cubukX+"px",
width: cubukW+"px",
height: cubukH+"px",
backgroundColor: cubukC
});

}
function konumla(){
$( "body" ).mousemove(function( e ) {

var tX = e.pageX; // mouse un x konumu

if(tX < alanX) // çubuk, alanın solunu geçtiyse
tX=alanX;
else if(tX+cubukW > alanX+alanW ) // çubuk(konum+genişlik), alanın sağının(konum+genişlik) geçtiyse
tX=alanX+alanW-cubukW; // x konumu sağa yerleştir ama genişiliğininde dolayı genişiliğini çıkart

cubukX=tX;
$("#cubuk").css("left", cubukX+"px");

});
}
function guncelle(){
var tzaman = zaman;
zaman = Date.now();

diffTime += zaman - tzaman;

if(diffTime < 20)
return;

diffTime = 0;

//console.log( zaman - tzaman );

if(!cubukCollision() && !tasCollision()) // çubuğa ve taşlara değmediyse alanCollision çalıştır
alanCollision();

// css ile divlere uygula

$("#top").css("left",topX);
$("#top").css("top",topY);

// setTimeout(guncelle,10); // 10 mili saniye de bir guncelle fonksiyonunu çalıştır
}

function alanCollision(){
var yeniKonumX=topX+topHizX, yeniKonumY = topY+topHizY; // hızla toplayınca şmidiki zamandaki konumları

var alanSol=alanX, alanSag=alanX+alanW, alanYukari=alanY, alanAsagi=alanY+alanH; // alanın sınırlarını bulduk

if(yeniKonumX != topX){ // x konum değiştirdiyse
if(yeniKonumX < alanSol){
topX = alanSol; // sol sınıra eşitle
topHizX = -topHizX; // hız zıt olur( x konumunda çarpışma varsa x hızı zıt olur)
}
else if(yeniKonumX+topS > alanSag){ // sağ sınırını aştıysa
topX=alanSag-topS; // sağ sınırına eşitle
topHizX = -topHizX; // hız zıt olur( x konumunda çarpışma varsa x hızı zıt olur)
}
else
topX=yeniKonumX; // çarpışma yoksa sorun yok, yeni konumu uygula direk
}

if(yeniKonumY != topY){ // y konum değiştirdiyse
if(yeniKonumY < alanYukari){ // yeni konum y yukarıyı geçtiyse
topY = alanYukari; // yukarı sınıra eşitle
topHizY= -topHizY; // hız zıt olur( y konumunda çarpışma varsa y hızı zıt olur)
}
else if(yeniKonumY+topS > alanAsagi){ // aşağı sınırını aştıysa
topY=alanAsagi-topS; // sağ sınırına eşitle
topHizY= -topHizY; // hız zıt olur( y konumunda çarpışma varsa y hızı zıt olur)
}
else
topY=yeniKonumY; // çarpışma yoksa sorun yok, yeni konumu uygula direk
}
}

function cubukCollision(){
var yeniKonumX=topX+topHizX, yeniKonumY = topY+topHizY; // hızla toplayınca şmidiki zamandaki konumları

var cubukSol=cubukX, cubukSag=cubukX+cubukW, cubukYukari=cubukY, cubukAsagi=cubukY+cubukH;

if(yeniKonumX+topS > cubukSol && yeniKonumX < cubukSag){ // x konumları çakışıyorsa
if(yeniKonumY+topS > cubukYukari && yeniKonumY < cubukAsagi){ // y konumları da çakışıyorsa
// çubuğun sadece üst kısmı için yapılıcak(yanlar ve alt kısım için yok)
topHizY = -topHizY; // sadece y değişicek çünkü üst kısmı var(yanlar yok)
topY = cubukYukari-topS; // çubuğun üst kısmına konumlanacak
return true; // true döndürüp fonksiyondan çıktık

}
}
return false; // yukarıda true dönmezse burası çalışıcak ve false dönücek
}

function tasYap(n){
var maxDizilis=15;
var tasW=25,
tasH=15,
tasKatsayiX=30, // taşların arasındaki uzaklık(x konumunda)
tasKatsayiY=30; // taşların arasındaki uzaklık (y konumunda)

for(var i=0; i
var konumX =(i%maxDizilis), // yan yana dizilecklerin hesabı
konumY=parseInt(i/maxDizilis); // alt alta dizilenlerin hesabı

$("body").append("
"); // div ekle

$("#tas_"+tasSayisi).css({ // konum, boyut, renk ver
position: 'absolute', // üzerlerinden geçmeleri için
top: (alanY+100+tasKatsayiY*konumY)+"px",
left: (alanX+konumX*tasKatsayiX+10)+"px",
width: tasW+"px",
height: tasH+"px",
backgroundColor: "#edf"
});

tasSayisi++;
}

}

function tasCollision(){

var ret=false; // çarpışma varsa true olacak
var topSol=topX, // en solunu aldık
topSag=topSol+topS, // en sağını aldık
topYukari=topY, // en yukarısını aldık
topAsagi=topYukari+topS; // en aşağısını aldık

for(var i=0; i
if($("#tas_"+i).length > 0){ // 0 dan büyükse vardır

var tasSol = parseInt($("#tas_"+i).css("left")), // en solunu aldık
tasSag = tasSol+parseInt($("#tas_"+i).css("width")), // en sağını aldık
tasYukari = parseInt($("#tas_"+i).css("top")), // en yukarısını aldık
tasAsagi = tasYukari+parseInt($("#tas_"+i).css("height")); // en aşağısını aldık

if(degmeVar(topSol,topSag,tasSol,tasSag) && degmeVar(topYukari,topAsagi,tasYukari,tasAsagi)){ // x ve y konumu için değme varsa

$("#tas_"+i).remove(); // sildik
ret=true; // çarpışma var true dönücek
}

}
}
return ret; // ret dönücek çarpışma varsa true yoksa false
}

function degmeVar(ma, mb, na, nb){ // herhangibir konumun için çakışma var mı diye bakar
return (ma < nb && mb > na); // değme varsa true döndürür
}

$( document ).ready(function() {
ana();
});
zaman = Date.now();
setInterval(guncelle, 10);