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 . 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 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 function divYap function konumla { $ . mousemove(function ); } function guncelle 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 { // x konum değiştirdiyse if else if else topX=yeniKonumX; // çarpışma yoksa sorun yok, yeni konumu uygula direk } if { // y konum değiştirdiyse if else if 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 { // x konumları çakışıyorsa if } return false; // yukarıda true dönmezse burası çalışıcak ve false dönücek } function tasYap { var maxDizilis=15; var tasW=25, tasH=15, tasKatsayiX=30, // taşların arasındaki uzaklık tasKatsayiY=30; // taşların arasındaki uzaklık for(var i=0; i var konumX = , // yan yana dizilecklerin hesabı konumY=parseInt ; // alt alta dizilenlerin hesabı $ . append ; // div ekle $ . css( ); 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($ . length > 0){ // 0 dan büyükse vardır var tasSol = parseInt($ . css , // en solunu aldık tasSag = tasSol+parseInt($ . css , // en sağını aldık tasYukari = parseInt($ . css , // en yukarısını aldık tasAsagi = tasYukari+parseInt($ . css ; // en aşağısını aldık if(degmeVar && degmeVar } } return ret; // ret dönücek çarpışma varsa true yoksa false } function degmeVar $ . ready(function ); zaman = Date. now ; setInterval(guncelle, 10);