crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. HTML5 Canvas: Çizim Tahtanız
<canvas> etiketi, tarayıcı üzerinde piksellerle doğrudan oynayabildiğiniz boş bir kağıt gibidir. Eğer bir oyun motoru kullanmadan, oyunun her detayını (fizik, çarpışma, render) kendiniz yazmak istiyorsanız Canvas doğru tercihtir.
Temel Mantık: Oyun Döngüsü (Game Loop)
Bir oyunun kalbi, saniyede 60 kez çalışan bir döngüdür. Bu döngü her adımda:
Ekranı temizler.
Karakterlerin pozisyonunu günceller.
Her şeyi tekrar çizer.
JavaScript:
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
function update() {
// Karakter hareket kodları buraya
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Ekranı temizle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 50, 50); // Mavi bir kare çiz
}
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop); // Saniyede 60 FPS için
}2. Phaser.js: Profesyonel 2D Oyun Motoru
Canvas ile her şeyi sıfırdan yazmak zordur. Phaser, bir oyunun ihtiyaç duyabileceği tüm araçları (fizik motoru, animasyon yönetimi, ses, giriş kontrolleri) içinde barındıran dünyanın en popüler JavaScript oyun kütüphanesidir.
Phaser'ın Üç Temel Taşı:
Preload: Resimlerin, seslerin ve haritaların belleğe yüklendiği yer.
Create: Oyun dünyasının kurulduğu, karakterlerin oluşturulduğu yer.
Update: Çarpışmaların ve kontrollerin saniyeler içinde binlerce kez kontrol edildiği yer.
JavaScript:
const config = {
type: Phaser.AUTO,
width: 800, height: 600,
physics: { default: 'arcade' }, // Yerçekimi ve çarpışma için fizik motoru
scene: { preload, create, update }
};
const game = new Phaser.Game(config);
function preload() {
this.load.image('player', 'assets/player.png');
}
function create() {
this.player = this.physics.add.sprite(400, 300, 'player');
this.player.setCollideWorldBounds(true); // Ekran dışına çıkmasını engelle
}3. Hangisini Seçmelisiniz?
| Özellik | HTML5 Canvas (Pure JS) | Phaser.js |
|---|---|---|
| Öğrenme Amacı | Oyun matematiğini anlamak için harika. | Hızlıca oyun bitirmek için mükemmel. |
| Fizik ve Çarpışma | Siz yazmalısınız (Karmaşık). | Hazır motor (Arcade, Matter.js). |
| Performans | Düşük seviyeli erişim, çok hızlı. | Optimize edilmiş büyük projeler için ideal. |
4. Varlıklar ve Assetler
Bir oyun sadece koddan oluşmaz. Oyununuzu canlandırmak için şu kaynaklara ihtiyacınız olacak:
Spritesheet: Karakter animasyonlarının yan yana dizildiği resim dosyaları.
Tilemap: Bölüm tasarımlarını (haritaları) oluşturduğunuz yapılar.
SFX/BGM: Ses efektleri ve arka plan müzikleri.
Sonuç
JavaScript ile oyun geliştirmek, kod yazmayı öğrenmenin en eğlenceli yoludur. Karmaşık algoritmaları bir oyun karakterine can verirken öğrenmek, motivasyonunuzu her zaman yüksek tutar. İster basit bir "Flappy Bird" klonuyla başlayın, ister devasa bir RPG; JavaScript ekosistemi ihtiyacınız olan her türlü desteği size sunacaktır.