HTML Canvas ile Mini Oyun Yapımı: Kodla, Öğren ve Eğlen! 🎮✨

Selam 💖
Bugün sana retro bir mini oyun yaratmayı göstereceğim. Ama dur, sıkıcı teknik yazılar gibi olmayacak. 😎
Bu rehberde:

• Canvas’ı tam olarak nasıl kullanacağını öğreniyorsun
• JS ile hareket ve çarpışma mantığını keşfediyorsun
• Oyunun hızını, skorunu ve düşmanlarını kontrol ediyorsun
• Kod örnekleri ve ipuçlarıyla hemen kendi oyununu geliştirebiliyorsun 💻🎉

Hadi başlayalım, çünkü sahne senin aşkımmm! 💃🕺

1️⃣ Canvas Nedir ve Neden Kullanırız? 🖼️✨

Canvas, HTML’de piksel tabanlı bir tuvaldir. Tıpkı bir çizim tahtası gibi düşünebilirsin:

• JS ile çizgi, şekil, resim, animasyon yapabilirsin
• Kullanıcının gözünün önünde dinamik ve etkileşimli oyunlar yaratabilirsin

Örnek: Basit Canvas Tanımı

<canvas id="gameCanvas" width="600" height="400" style="border:2px solid #000;"></canvas>

💡 İpucu aşkımmm:

• id ile JS’den erişebilirsin
• width ve height ile oyun alanını ayarlayabilirsin
• style ile sınır çizip görsel olarak oyun alanını gösterebilirsin

2️⃣ Oyun Fikrini Tasarlamak 🎯

Bizim mini oyun:

• Küçük bir kare (player) hareket edebilecek
• Ekrandan rastgele düşmanlar gelecek
• Çarpışma olursa “Game Over!”
• Skor sayacı olacak ve oyun giderek zorlaşacak

💡 Pratik ipucu: Önce kağıt üzerinde bir tasarım yap, hangi elementler olacak ve nasıl hareket edecek, bunu planla. Bu, kodlamayı kolaylaştırır.

3️⃣ JS ile Oyuncuyu Hareket Ettirmek 🕹️

JS’de klavye olaylarını yakalayarak oyuncuyu kontrol edebiliriz.

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

let player = { x: 50, y: 180, width: 40, height: 40, speed: 5 };

document.addEventListener("keydown", movePlayer);

function movePlayer(e) {
  if(e.key === "ArrowUp" && player.y > 0) player.y -= player.speed;
  if(e.key === "ArrowDown" && player.y < canvas.height - player.height) player.y += player.speed;
  if(e.key === "ArrowLeft" && player.x > 0) player.x -= player.speed;
  if(e.key === "ArrowRight" && player.x < canvas.width - player.width) player.x += player.speed;
}

Açıklama Kod Aşkımmm 💖:

• keydown eventi: her tuşa basıldığında tetiklenir
• ArrowUp/Down/Left/Right: yön tuşları
• player.speed: her tuş basışında oyuncunun kaç piksel hareket edeceğini belirler
• Koşullar ile canvas sınırlarını aşıp taşmamasını sağlıyoruz

💡 Pratik İpucu: Hızı oyuncu seviyesine göre ayarlayabilirsin, oyun zorlaştıkça player.speed artırmak güzel bir mekanik olur.

4️⃣ Oyuncuyu Çizmek 🎨

function drawPlayer() {
  ctx.fillStyle = "blue";      // Renk seçimi
  ctx.fillRect(player.x, player.y, player.width, player.height); // Kare çiz
}

Açıklama:

• fillRect(x, y, width, height) ile dikdörtgen çiziyoruz
• fillStyle ile rengi ayarlıyoruz
• Canvas temizlenmediği sürece önceki kareler ekranda kalır, bu yüzden oyun döngüsünde ctx.clearRect() kullanacağız

💡 Pratik İpucu: İleride oyuncuyu sprite ile değiştirerek retro piksel karakterler ekleyebilirsin!

5️⃣ Düşmanları Ekleyelim 🛸

Düşmanlar rastgele yöne gelecek, ekrandan çıkınca silinecek.

let enemies = [];

function createEnemy() {
  let y = Math.random() * (canvas.height - 30);
  enemies.push({ x: canvas.width, y: y, width: 30, height: 30, speed: 3 });
}

function drawEnemies() {
  ctx.fillStyle = "red";
  enemies.forEach(e => ctx.fillRect(e.x, e.y, e.width, e.height));
}

function moveEnemies() {
  enemies.forEach(e => e.x -= e.speed);
  enemies = enemies.filter(e => e.x + e.width > 0); // ekrandan çıkanları sil
}

Kod Açıklaması 💖:

• Math.random() ile düşmanlar rastgele konumlanıyor
• filter ile ekrandan çıkan düşmanları temizliyoruz
• speed ile düşmanların hızı belirleniyor

💡 Pratik İpucu: Oyunu zorlaştırmak için düşman hızını veya boyutunu zamanla artırabilirsin.

6️⃣ Çarpışma Mantığı 🛑

Çarpışma olunca oyun biter.

function checkCollision(player, enemy) {
  return player.x < enemy.x + enemy.width &&
         player.x + player.width > enemy.x &&
         player.y < enemy.y + enemy.height &&
         player.y + player.height > enemy.y;
}

function gameOver() {
  alert("Game Over! 😱");
  document.location.reload();
}

Açıklama:

• Basit dikdörtgen çarpışması (AABB collision)
• Koşullar sağlanırsa gameOver() çağrılır

💡 Pratik İpucu: Daha ileri seviye için çarpışmayı sprite veya şekillerle de yapabilirsin.

7️⃣ Oyun Döngüsü ve Animasyon 🔄

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Canvas temizle

  drawPlayer();
  drawEnemies();
  moveEnemies();

  enemies.forEach(enemy => {
    if(checkCollision(player, enemy)) gameOver();
  });

  requestAnimationFrame(gameLoop); // Tekrar döngü
}

// Her 2 saniyede yeni düşman
setInterval(createEnemy, 2000);

gameLoop();

Kod Açıklaması:

• requestAnimationFrame = akıcı animasyon
• clearRect = önceki frame’i silmek
• setInterval = düşmanları düzenli aralıkla oluşturmak

💡 Pratik İpucu: Oyun hızını artırmak için düşman oluşturma aralığını düşürebilir veya düşman sayısını artırabilirsin.

8️⃣ Skor Sistemi ✨

let score = 0;

function drawScore() {
  ctx.fillStyle = "black";
  ctx.font = "20px Arial";
  ctx.fillText("Score: " + score, 10, 20);
}

// Oyun döngüsüne ekle
score++;
drawScore();

💡 Pratik İpucu:

• Oyuncu ne kadar süre hayatta kalırsa o kadar puan kazanır
• Çarpışma öncesi skor kaydını saklayabilirsin
• Daha eğlenceli hale getirmek için puanla birlikte renkli efektler veya sesler ekle

9️⃣ Bonus: Gelişmiş İpuçları 😎

• Farklı düşman tipleri: Hızlı, yavaş, büyük veya küçük düşmanlar ekle
• Sprite kullan: Kare yerine karakter resimleri veya animasyonlar
• Level sistemi: Zamanla düşman hızı ve sayısını artır
• Ses efekti: Çarpışma, puan ve seviye atlaması için JS Audio kullan

💡 Küçük değişiklikler ile oyun sonsuz eğlenceye dönüşür! 🎉

🔟 Özet ve Son Sözler

Artık:

• Canvas = sahnen
• JS = büyülü fırça
• Player ve enemies = karakterler
• requestAnimationFrame = akıcı hareket
• Çarpışma = oyun zorluğu

Senin retro mini oyunun hazır! 💻🎮✨

💡 Mini ipucu son: Renkleri değiştir, düşman hızını artır, oyuncuya power-up ekle… Böylece oyun hem eğlenceli hem öğretici oluyor! 😎💖