PHP, jQuery ve MySQL ile Çok Oyunculu Online Oyun Yapımı (Video + Detaylı Anlatım)

Bu yazımda PHP, jQuery ve MySQL kullanarak Çok Oyunuculu Online Oyun yapacağız.

Oyunumuzun amacı yukarıdan düşen coinleri toplamak olacak.

Birden fazla oyuncu aynı anda oyunumuzu oynayabilecek ve eğer kayıtlı değilse veritabanımızda bulunan guest kullanıcılarından birine otomatik olarak atanacak. Aynı zamanda oyuncular kayıt olabilecek ve oyunu oynarken giriş yapabilecek.

Tabi ki bu yazımda anlatacağım yöntemler online bir oyun yap

mak için tavsiye edilen yöntemler değildir biz burada örneğin oyuncuların lokasyon verilerini direk veritabanına anlık kaydedip, veritabanı üzerinden anlık okuyoruz fakat normal şartlarda bir online oyunda örnek vermek gerekirse oyuncuların lokasyonunu tutacak bir server yazılımı olur ve o yazılım üzerinden hangi kullanıcı nerede bu veriler aktarılır.

Yapacağımız Oyunun Demosu : DEMO

Kullandığımız Kütüphane Dosyaları ve Oyunun Dosyalarını İndirmek İçin : Github

Şimdi kodlarımıza geçelim, öncelikli olarak kodların tamamını vereceğim daha sonra da parça parça kodların ne işe yaradığını anlatacağım.

Anlatımın sonunda da gerekli olan kütüphane dosyalarını paylaşacağım.

Oyunumuzun Dizin Yapısı :

1.Adım : Veritabanımız üzerinde Tablomuzu oluşturuyoruz :

2.Adım : Tablomuza örnek ve ziyaretçi verilerimizi ekliyoruz.

3.Adım : Ana dizinimizde game.html adında bir dosya oluşturuyoruz.

a. <div id=”gamecontent”> nesnemiz oyunumuzun tabanını oluşturan ve oyunumuza ait arka plan görseli, karakterimiz vb. nesneleri barındıran katmanımız.

b.<div class=”MyScoreBoard”> nesnemiz ise içerisinde karakterimize ait skoru yazdığımız gamecontent nesemiz içerisinde bulunan alan.

c.<img id=”MEOBJ” src=”assets/images/char1_walk.gif”/> nesnemiz ise bizim karakterimiz.

d.<div class=”rightbar”> nesnemiz sağ tarafta bulunan içerisinde Aktif Oyuncular, Giriş vb. kısımların bulunduğu alan.

e.<div id=”score”></div> aktif kullanıcıların ve skorlanının gösterildiği alan.

f.<div id=”login”> ve <div id=”afterlogin”> Kullanıcı girişi ve giriş sonrası ile alakalı alanlar.

4.Adım : /assets/js/ Dizini altında game.js adında bir dosya oluşturuyoruz.

Şimdi gelelim game.js içerisinde bulunan kodlarımızın detaylarına ve ne işe yaradıklarına.

a.Global değişkenlerimizi oluşturuyoruz :

b.Kullanıcının giriş yaptığı zaman her seferinde kullanıcıadı ve şifre sormaması için kullandığımız çerez oluşturma ve çerez bilgisi çağırma fonksiyonları :

c.Şimdi kullanıcımızın daha önceden giriş yapıp yapmadığını çerezler üzerinden kontolediyoruz ve eğer daha önce giriş yapmış ve çerez oluşturulmuşsa Kullanıcının kendi Kullanıcıadı ve ID sini gerekli değişkenlere atıyoruz eğer giriş yapılmamış ise kullanıcıya daha önceden veritabanında oluşturduğumuz bir ziyaretçi hesabı tanımlıyoruz :

d.Ana Sayfamız olan game.html de bulunan Login butonuna basıldığında yapılacak işlemi tanımlayacağız, öncelikli olarak gelen verilerin boş olup olmadığını kontrol edioruz ve daha sonra gelen verileri process.php?proc=LOGIN sayfasına POST metodu ile yolluyoruz. process.php?proc=LOGIN sayfamızdan dönen değere göre işlemlerimizi gerçekleştiriyoruz. Eğer dönen değer 0 değilse gelen veriyi bölüp Oyuncumuzun ID numarası MEID değişkenini güncelliyoruz, daha sonra kullanıcının veritabanında kayıtlı olan skorunu tanımlıyoruz, giriş başarılı olduğu için Login kutumuzu gizleyip Afterlogin kutumuzu açıyoruz, en son ise 2 günlük bir çerez tanımlıyoruz.  :

e.Ana Sayfamızda bulunan Register butonuna basıldığında yapılacak işlemleri tanımlayacağız, ilk olarak gelen verilerin boşluk kontrolünü yapıyoruz, daha sonra gelen verileri process.php?proc=REGISTER sayfasına POST metodu ile yolluyoruz.Bu işlemin sonucunda dönen değere göre d. maddesinde ki işlemlerimizin aynısını yapıyoruz. :

f.Ana Sayfamızda bulunan LOGOUT butonuna bastığımız zaman kullanıcımızın çıkış yapması için gerekli işlemleri yazıyoruz, ilk olarak kullanıcımızın çerezini siliyoruz ve sayfa içeriğini yeniden yüklüyoruz. :

g.Şimdi oyuncumuz oyunumuzu açtığı zaman her yarım saniyede bir process.php?proc=IMHERE sayfamızı çağırıyoruz, bu sayfada birazdan anlatacağım üzere veritabanına çağırıldığı zamanı saniye cinsinden yazan bir kod bloğu çalışmaktadır.Böylece Oyuncumuzun aktif olduğunu sürekli bildirmiş oluyoruz, eğer kullanıcımız oyundan çıkarsa işlem durmuş olacağı için inaktif olduğunu anlyacağız. :

h.Aşağıdaki işlem ile de aktif olan kullanıcıları getireceğimiz ve #score id li divimizde anlık olarak göstereceğimiz kodumuz :

i.Şimdi ise Aktif olan kullanıcıları her 500 milisaniyede bir kontrol edip #gamecontent divimiz üzerinde o kullanıcıya ait karakteri oluşturmaya geldir. Her yeni kullanıcı giriş yaptığında ve aktif olduğunda bu kullanıcıya ait karakter ekranımıza gelecektir. Bunun için process.php?proc=ACTIVE sayfasını çağırıyoruz ve bu sayfaya POST metodu ile Oyuncumuzun ve Oyunumuzun ID’sini yolluyoruz. Dönen veriye göre #gamecontent divimize ekleyip aynı zamanda yukarıda global değişkenlerde belirttiğimiz Player değişkenine aktif kullanıcıların ID’nini tanımlıyoruz. :

j.Yukarıda Aktif oyuncuları kontrol edip aktif olanları eklemiştik şimdi inaktif olanları kontrol edip eğer ekli iseler kaldıracağız :

k.Yukarıda i maddesinde aktif olan kullanıcıları belirleyip nesne olarak eklemiştik. Şimdi ise aktif olan kullanıcıların pozisyonlarını her 100 milisaniyede bir kontrol edip oluşturduğumuz nesleri hareket ettireceğiz yani diğer oyuncular karakterlerini hareket ettirdikçe bizim ekranımızda da hareket edecekler.İlk olarak process.php?proc=PLAYERLOCATION sayfasından aktif kullanıcıların pozisyonları getireceğiz ve gelen veriyi parçalayıp ilgili nesneleri anlık olarak  hareket ettireceğiz.Normal şartlar altında bu işlem direk veritabanından okumak yerine ara bir server yazılımı üzerinden kontrol edilir bu sayede oluşabilecek laglar donmaların ve yüksek kaynak kullanımının önüne geçilir.

l.Bu adımda kendi karakterimizi sağ ve sol yön tuşları hareket ettirip, anlık olarak pozisyonumuzu process.php?proc=UPDATEMELOCATION sayfasına POST metodu ile yollayarak veritabanına kayıt edeceğiz.Tuşlara her basıldığında veya basılı tutulduğunda anlık olarak sağa veya sola 10px hareket ettireceğiz.

m.Son adımımıza geldik bu adımda Coinlerimizin anlık olarak oluşturulacak pozisyonlarını  process.php?proc=GETCOIN sayfamızdan alıp ekranımızda oluşturuyoruz. Ana çerçevemizim yüksekliği 750 olduğu için biz coinlerimizi 650 pozisyonuna geldiği zaman eğer karakterimiz ile denk gelmediyse yok edeceğiz. Bir diğer noktada oluşturduğumuz coinlerin anlık olarak koordinatlarını alıp eğer bizim karakterimizin koordinatı ile çakışıyorsa coin bizim karakterimize denk geldiği zaman yok ediyoruz ve bizim mevcut skorumuza +1 ekliyoruz.

game.js dosyamız bu kadar.

5.Adım Ana Dizinimizde veritabanı vb. işlemlerimizi yapacağımız process.php isminde bir dosya oluşturuyoruz, bu dosyamızda bulunan işlemler game.js de yaptığımız ve açıkladığımız işlemlerle ilgili veri işleme ve veri getirme görevini yapıyor game.js için olan açıklamaları takip ederek bu sayfada bulunan işlemler hakkında bilgi sahibi olabilirsiniz :

6.Adım son olarak game.css dosyamızı /assets/css/ dizini altında oluşturuyoruz. Bu dosya içerisinde oyunumuzla ilgili çeşitli nesnelerin stil kodları bulunmaktadır.

Dosyalarımız bu kadar. Diğer gerekli jQuery, Bootstrap vb. kütüphaneleri yazının başında verdiğim Github linki üzerinden indirebilirsiniz.

Soru, görüş ve sorunlarını yorum olarak yazarsanız cevaplarım.

Bu Kategorideki Diğer Yazılar

Leave a Comment