Chimp Hafıza Oyunu Atölyesi 🐒

Bu sayfada sadece şempanze hafıza oyununun (Chimp Test) p5.js ile inşasına odaklanıyoruz. Aşağıdaki örnekler, oyunu sıfırdan kurarken gereken kavramları küçük adımlarla tanıtır.

Adımlar

Önce kareler ve sayıları çizmeyi öğreneceğiz, ardından çakışma kontrolü, çakışmasız yerleşim, grid yaklaşımı, oyun döngüsü, zamanlama ve en sonda seviye+skora geçeceğiz.

CH1: Rastgele Kareler (Koordinatlar)

Tuvalde n adet rastgele kare yerleştirir. Kareler tuval dışına taşmaz.

function setup() {
  createCanvas(400, 400);
  background(240);
  stroke(20);
  noFill();

  let n = 10;
  let s = 40;
  for (let i = 0; i < n; i++) {
    let x = random(0, width - s);
    let y = random(0, height - s);
    rect(x, y, s, s);
  }
}

function draw() { noLoop(); }

🚀 Değiştir ve Gör

n ve s değerlerini değiştirin.
Kareleri dolu yapın: noStroke(); fill(30,150,200,120);

CH2: Karelerin İçine Numara Yazdırma

Kare merkezine sıralı sayılar yazdırır. Nasıl ortalanıyor?

textAlign(CENTER, CENTER): Metnin yatay ve dikey referans noktasını kare merkezine göre alır.
textSize(s * 0.5): Yazı boyutunu kare boyutunun yarısı kadar ayarlar.
text(label, x + s/2, y + s/2): Kare sol-üst köşe koordinatı (x,y) olduğundan, orta nokta (x + s/2, y + s/2).

function setup() {
  createCanvas(400, 400);
  background(250);
  stroke(30);
  fill(255);
  textAlign(CENTER, CENTER);

  let n = 8;
  let s = 50;
  textSize(s * 0.5);
  for (let i = 0; i < n; i++) {
    let x = random(0, width - s);
    let y = random(0, height - s);
    rect(x, y, s, s);
    fill(20);
    text(i + 1, x + s / 2, y + s / 2);
    fill(255);
  }
}

function draw() { noLoop(); }

CH3: Çakışma (Collision) Test Fonksiyonu

İki karenin çakışıp çakışmadığını test eder. Her çalıştırmada kareler rastgele seçilir; sonuç tuvalin üzerine yazdırılır.

Fonksiyon Nedir? Tekrar kullanılabilir bir kod bloğu. Adı vardır, parametreler alır ve genellikle bir değer döndürür. Örn: function f(x, y) { return x + y; }
Parametreler: rectsOverlap(ax, ay, aw, ah, bx, by, bw, bh) içindeki a* A dikdörtgenini, b* B dikdörtgenini tanımlar.
Matematik (çakışmama durumları):
- A sağ kenarı ≤ B sol kenarı: ax + aw ≤ bx
- A sol kenarı ≥ B sağ kenarı: ax ≥ bx + bw
- A alt kenarı ≤ B üst kenarı: ay + ah ≤ by
- A üst kenarı ≥ B alt kenarı: ay ≥ by + bh
Bu dört durumdan herhangi biri doğruysa dikdörtgenler çakışmıyor demektir. Fonksiyonda bunların DEĞİL'i alınır (!) ve çakışma sonucu bulunur.

function rectsOverlap(ax, ay, aw, ah, bx, by, bw, bh) {
  return !(ax + aw <= bx || bx + bw <= ax || ay + ah <= by || by + bh <= ay);
}

function setup() {
  createCanvas(400, 300);
  background(240);
  noFill();
  strokeWeight(2);

  // Rastgele iki dikdörtgen
  let a = { x: random(20, 220), y: random(20, 160), w: random(60, 140), h: random(40, 120) };
  let b = { x: random(20, 220), y: random(20, 160), w: random(60, 140), h: random(40, 120) };

  // Görsel
  stroke(20, 150, 20);
  rect(a.x, a.y, a.w, a.h);
  stroke(200, 40, 40);
  rect(b.x, b.y, b.w, b.h);

  // Sonuç
  let overlap = rectsOverlap(a.x, a.y, a.w, a.h, b.x, b.y, b.w, b.h);
  noStroke(); fill(10);
  textAlign(LEFT, TOP); textSize(16);
  text("Çakışma: " + (overlap ? "EVET" : "HAYIR"), 10, 10);
  noLoop();
}

function draw() {}

🚀 Değiştir ve Gör

Boyut aralıklarını değiştirip çakışma olasılığını artırın/azaltın.

CH4: Çakışmasız Rastgele Kare Üretimi (Dizi + Kontrol)

Her yeni kareyi, önceki karelerle çakışmıyorsa ekle; aksi halde yeni koordinat dene.

Dizi (Array): Birden fazla öğeyi sırayla tutan yapı. Örn: let sayilar = [10, 20, 30]; — erişim: sayilar[0].
push(): Dizi sonuna öğe ekler: sayilar.push(40).
Fonksiyon: Tekrar kullanılabilir kod bloğu. Örn: function kare(x){ return x*x; }
Çakışma matematiği: İki dikdörtgen A(ax,ay,aw,ah), B(bx,by,bw,bh) için çakışmama durumları: A sağ kenarı ≤ B sol kenarı, A sol kenarı ≥ B sağ kenarı, A alt kenarı ≤ B üst kenarı, A üst kenarı ≥ B alt kenarı. Bunlardan biri bile doğruysa çakışma yok. Değili alınırsa çakışma var testi elde edilir.

// Dikdörtgen çakışma testi: çakışmama durumlarının DEĞİL'i
function rectsOverlap(ax, ay, aw, ah, bx, by, bw, bh) {
  return !(ax + aw <= bx || bx + bw <= ax || ay + ah <= by || by + bh <= ay);
}

// ÇAKIŞMASIZ yerleşim üreten fonksiyon
function generateNonOverlapping(count, size, maxTry) {
  let rects = [];
  let tries = 0;
  while (rects.length < count && tries < maxTry) {
    tries++;
    let x = random(0, width - size);
    let y = random(0, height - size);
    let ok = true;
    for (const r of rects) {
      if (rectsOverlap(x, y, size, size, r.x, r.y, r.w, r.h)) { ok = false; break; }
    }
    if (ok) rects.push({ x, y, w: size, h: size });
  }
  return rects;
}

function setup() {
  createCanvas(400, 400);
  background(250);
  textAlign(CENTER, CENTER);
  let n = 10, s = 40;
  textSize(s * 0.5);
  let rects = generateNonOverlapping(n, s, 10000);
  stroke(30);
  fill(255);
  for (let i = 0; i < rects.length; i++) {
    let r = rects[i];
    rect(r.x, r.y, r.w, r.h);
    fill(20);
    text(i + 1, r.x + r.w / 2, r.y + r.h / 2);
    fill(255);
  }
}

function draw() { noLoop(); }

🚀 Değiştir ve Gör

n ve s ile oyna; başarısız yerleştirme için maxTry'ı artır.
Kodun başına kendi kare(x) fonksiyonunuzu ekleyip çağırmayı deneyin.

CH5: Grid Tabanlı Yaklaşım (Eşsiz Hücre Seçimi)

Tuvali hücrelere böler; k adet farklı hücreyi seçip kareleri yerleştirir. shuffle kullanır.

push(): Dizi sonuna öğe ekler. Hücre indekslerini toplarken kullanırız.
shuffle(dizi, true): Diziyi yerinde karıştırır ve rasgele bir sıra elde etmemizi sağlar.
cell - 12: Karelerin kenarlardan içeri 6px boşlukla (padding) çizilmesi için genişlikten 12 çıkarılır (sol 6 + sağ 6).

function setup() {
  createCanvas(400, 400);
  background(245);
  textAlign(CENTER, CENTER);
  let cell = 60;
  let cols = floor(width / cell);
  let rows = floor(height / cell);
  let total = cols * rows;
  let k = 8; // seçilecek kare sayısı
  textSize(cell * 0.4);

  let indices = [];
  for (let i = 0; i < total; i++) indices.push(i);
  shuffle(indices, true);
  let chosen = indices.slice(0, k);

  stroke(40);
  fill(255);
  for (let i = 0; i < chosen.length; i++) {
    let id = chosen[i];
    let cx = id % cols;
    let cy = floor(id / cols);
    let x = cx * cell + (cell - cell) / 2;
    let y = cy * cell + (cell - cell) / 2;
    rect(cx * cell + 6, cy * cell + 6, cell - 12, cell - 12);
    fill(20);
    text(i + 1, cx * cell + cell / 2, cy * cell + cell / 2);
    fill(255);
  }
}

function draw() { noLoop(); }

CH6: Oyun v1 (Rastgele Koordinatlar, Çakışmasız)

Sayılara 5 saniye bakılır; sonra kareler gizlenir. Doğru sırayla tıklayın.

millis(): Sketch başladığından beri geçen milisaniye sayısıdır. startMs = millis() ile başlangıcı kaydeder, millis() - startMs > revealMs ile süre doldu mu kontrol ederiz.

let items = [];
let count = 5;
let sizeS = 56;
let state = "show"; // show, guess, win, lose
let startMs = 0;
let revealMs = 5000;
let expected = 1;
let score = 0;

function rectsOverlap(ax, ay, aw, ah, bx, by, bw, bh) {
  return !(ax + aw <= bx || bx + bw <= ax || ay + ah <= by || by + bh <= ay);
}

function generateNonOverlapping(count, size, maxTry) {
  let rects = [];
  let tries = 0;
  while (rects.length < count && tries < maxTry) {
    tries++;
    let x = random(0, width - size);
    let y = random(0, height - size);
    let ok = true;
    for (const r of rects) {
      if (rectsOverlap(x, y, size, size, r.x, r.y, r.w, r.h)) { ok = false; break; }
    }
    if (ok) rects.push({ x, y, w: size, h: size });
  }
  return rects;
}

function setup() {
  createCanvas(400, 400);
  textAlign(CENTER, CENTER);
  textSize(22);
  resetGame();
}

function resetGame() {
  items = [];
  let rects = generateNonOverlapping(count, sizeS, 10000);
  for (let i = 0; i < rects.length; i++) {
    let r = rects[i];
    items.push({ x: r.x, y: r.y, w: r.w, h: r.h, label: i + 1, clicked: false });
  }
  state = "show";
  expected = 1;
  startMs = millis();
}

function draw() {
  background(250);
  noFill();
  stroke(30);

  if (state === "show") {
    for (const it of items) {
      rect(it.x, it.y, it.w, it.h);
      fill(20);
      text(it.label, it.x + it.w / 2, it.y + it.h / 2);
      fill(255);
    }
    if (millis() - startMs > revealMs) state = "guess";
  } else if (state === "guess") {
    for (const it of items) {
      rect(it.x, it.y, it.w, it.h);
      if (it.clicked) { fill(20); text(it.label, it.x + it.w / 2, it.y + it.h / 2); fill(255); }
    }
  } else if (state === "win") {
    fill(20); noStroke(); textSize(28); text("Kazandınız! Skor: " + score, width/2, height/2); textSize(22); fill(255);
  } else if (state === "lose") {
    fill(20); noStroke(); textSize(28); text("Oyun Bitti! Skor: " + score, width/2, height/2); textSize(22); fill(255);
  }

  // Üst bilgi
  noStroke(); fill(0,80); textSize(14);
  text("Beklenen: " + expected + (state==="show"?" (GÖSTERİM)":""), width/2, 16);
  fill(255);
}

function mousePressed() {
  if (state !== "guess") return;
  for (const it of items) {
    if (!it.clicked && mouseX >= it.x && mouseX <= it.x + it.w && mouseY >= it.y && mouseY <= it.y + it.h) {
      if (it.label === expected) {
        it.clicked = true;
        score += 10;
        expected++;
        if (expected > count) { score += 100; state = "win"; }
      } else {
        state = "lose";
      }
      break;
    }
  }
}

CH7: Oyun v2 (Grid Yaklaşımı)

Grid hücrelerinden eşsiz seçim yapar; aynı oyun akışı.

let items = [];
let cell = 64;
let cols, rows, total;
let k = 6; // kare sayısı
let state = "show"; // show, guess, win, lose
let startMs = 0;
let revealMs = 5000;
let expected = 1;

function setup() {
  createCanvas(400, 400);
  textAlign(CENTER, CENTER);
  textSize(22);
  cols = floor(width / cell);
  rows = floor(height / cell);
  total = cols * rows;
  initLevel();
}

function initLevel() {
  items = [];
  let ids = [];
  for (let i = 0; i < total; i++) ids.push(i);
  shuffle(ids, true);
  let chosen = ids.slice(0, k).sort((a, b) => a - b);
  for (let i = 0; i < chosen.length; i++) {
    let id = chosen[i];
    let cx = id % cols;
    let cy = floor(id / cols);
    let x = cx * cell + 8;
    let y = cy * cell + 8;
    let s = cell - 16;
    items.push({ x, y, w: s, h: s, label: i + 1, clicked: false });
  }
  state = "show";
  expected = 1;
  startMs = millis();
}

function draw() {
  background(245);
  noFill(); stroke(30);

  if (state === "show") {
    for (const it of items) { rect(it.x, it.y, it.w, it.h); fill(20); text(it.label, it.x + it.w/2, it.y + it.h/2); fill(255); }
    if (millis() - startMs > revealMs) state = "guess";
  } else if (state === "guess") {
    for (const it of items) { rect(it.x, it.y, it.w, it.h); if (it.clicked) { fill(20); text(it.label, it.x + it.w/2, it.y + it.h/2); fill(255);} }
  } else if (state === "win") {
    noStroke(); fill(20); textSize(28); text("Kazandınız!", width/2, height/2); textSize(22); fill(255);
  } else if (state === "lose") {
    noStroke(); fill(20); textSize(28); text("Oyun Bitti!", width/2, height/2); textSize(22); fill(255);
  }

  noStroke(); fill(0,80); textSize(14); text("Beklenen: " + expected + (state==="show"?" (GÖSTERİM)":""), width/2, 16); fill(255);
}

function mousePressed() {
  if (state !== "guess") return;
  for (const it of items) {
    if (!it.clicked && mouseX >= it.x && mouseX <= it.x + it.w && mouseY >= it.y && mouseY <= it.y + it.h) {
      if (it.label === expected) { it.clicked = true; expected++; if (expected > k) state = "win"; }
      else { state = "lose"; }
      break;
    }
  }
}

CH8: Ayrık HUD + Oyun Alanı (Çakışmasın)

Bilgi alanını (HUD) üstte sabit bir şerit olarak ayırır, oyun tahtasını altta çizeriz. Böylece metinler karelerle çakışmaz.

let cell = 64;
let hudH = 56; // üst bilgi alanı yüksekliği
let cols, rows;
let level = 1;
let score = 0;
let state = "show"; // show, guess, win, lose
let revealMs = 4000;
let startMs = 0;
let expected = 1;
let items = [];

function setup() {
createCanvas(400, 400);
textAlign(CENTER, CENTER);
cols = floor(width / cell);
rows = floor((height - hudH) / cell); // sadece board alanı için
startLevel();
}

function startLevel() {
items = [];
let k = 3 + (level - 1);
// eşsiz hücre seçimi
let ids = [];
for (let i = 0; i < cols * rows; i++) ids.push(i);
shuffle(ids, true);
let chosen = ids.slice(0, k);
chosen.sort((a, b) => a - b);

for (let i = 0; i < chosen.length; i++) {
  let id = chosen[i];
  let cx = id % cols;
  let cy = floor(id / cols);
  // board alanı y-ofseti: hudH
  let pad = 8;
  let x = cx * cell + pad;
  let y = hudH + cy * cell + pad;
  let s = cell - pad * 2;
  items.push({ x, y, w: s, h: s, label: i + 1, clicked: false });
}
expected = 1;
state = "show";
startMs = millis();
}

function drawHUD() {
noStroke();
fill(245);
rect(0, 0, width, hudH);
fill(20);
textSize(14);
text("Seviye: " + level + "  Skor: " + score + "  Beklenen: " + expected + (state==="show"?" (GÖSTERİM)":""), width/2, hudH/2);
}

function draw() {
background(255);
drawHUD();

// Board alanı
stroke(30); noFill();
if (state === "show") {
  for (const it of items) { rect(it.x, it.y, it.w, it.h); fill(20); textSize(22); text(it.label, it.x + it.w/2, it.y + it.h/2); fill(255); }
  if (millis() - startMs > revealMs) state = "guess";
} else if (state === "guess") {
  for (const it of items) { rect(it.x, it.y, it.w, it.h); if (it.clicked) { fill(20); textSize(22); text(it.label, it.x + it.w/2, it.y + it.h/2); fill(255);} }
} else if (state === "win") {
  noStroke(); fill(20); textSize(20); text("Seviye tamam! SPACE ile devam.", width/2, hudH + (height-hudH)/2);
} else if (state === "lose") {
  noStroke(); fill(20); textSize(20); text("Hatalı tık! R ile yeniden dene.", width/2, hudH + (height-hudH)/2);
}
}

function mousePressed() {
if (state !== "guess") return;
for (const it of items) {
  if (!it.clicked && mouseX >= it.x && mouseX <= it.x + it.w && mouseY >= it.y && mouseY <= it.y + it.h) {
    if (it.label === expected) {
      it.clicked = true;
      score += 10;
      expected++;
      if (expected > items.length) { score += 100; state = "win"; }
    } else {
      state = "lose";
    }
    break;
  }
}
}

function keyPressed() {
if (state === "win" && (key === ' ' || keyCode === 32)) { level++; startLevel(); }
if (key === 'r' || key === 'R') { level = 1; score = 0; startLevel(); }
}