CodeWeek 2025 - Yeşil Vatan (Ağaç Dikme Oyunu)

tarih:

 CodeWeek 2025 kapsamında Yeşil Vatan temasıyla Kahramanmaraş TOBB Fen Lisesi kodlama etkinliği başlatıyor. Bu kapsamda HTML tabanlı bir ağaç dikme oyunu geliştiriyoruz. Oyunun bitmiş haline ve kaynak kodlarına aşağıdan erişebilirsiniz.  



Tam versiyon: https://tobbfenyesilvatan.netlify.app/

  1. Aşağıdaki kodları kopyalayın. 
  2. Visual Studio Code'da File menüsünden New File alt menüsüne tıklayın. 
  3. index.html adında yeni bir dosya oluşturun ve aşağıdaki kodları sayfaınıza yapıştırıp kaydedin. 
  4. Ardından kodlarınınızı F5 tuşuyla çalıştırın. 
  5. Kodlarda değişiklik yaparak kendi özelleştirilmiş versiyonunuzu geliştirebilirsiniz.
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>TOBB Fen Lisesi Kodluyor - Yeşil Vatan 🌳</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
  html,body { height:100%; margin:0; background:#87CEEB; font-family: Arial, Helvetica, sans-serif; }
  #gameCanvas { display:block; margin:0 auto; background: linear-gradient(#87CEEB 0%, #87CEEB 60%, #8B5A2B 60%, #8B5A2B 100%); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
  .overlay {
    position:fixed; left:0; right:0; top:0; bottom:0;
    display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,0.5); color:white; z-index:10; font-size:20px;
  }
  .panel { background: #8c928c; padding:20px; border-radius:12px; text-align:center; box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
  button { margin-top:10px; padding:8px 14px; border-radius:6px; border:none; background:#fff; color:#2e7d32; font-weight:bold; cursor:pointer;}
  small { color: #eef7ee; display:block; margin-top:6px; }
  .hud { position:fixed; left:10px; top:10px; color:rgb(0, 0, 0); font-weight:bold; text-shadow:0 1px 3px rgba(0,0,0,0.6); }
</style>
</head>
<body>

<canvas id="gameCanvas" width="900" height="600"></canvas>

<div class="hud" id="hud">
  <div id="score">Skor: 0</div>
  <div id="time">Süre: 15</div>
  <div id="hint" style="font-weight:normal;font-size:13px;margin-top:6px;">Ok ← → ile hareket, SPACE ile dik</div>
</div>

<div id="startPanel" class="overlay">
  <div class="panel">

    <img src="https://tobbfenlise.meb.k12.tr/meb_iys_dosyalar/46/12/760166/dosyalar/2022_12/28112221_Okul-Logo-Png.png" height="100px">
    <h1>Kahramanmaraş TOBB Fen Lisesi</h1>
    <h2>CodeWeek 2025 - Yeşil Vatan 🌱</h2>
    <p>Belirli süre içinde olabildiğince çok fidan dik.</p>
    <p>Taş/çöpe dikersen ceza alırsın.</p>
    <button id="startBtn">Oyuna Başla</button>
    <small>Ok tuşları: hareket • SPACE: dik</small>
  </div>
</div>

<div id="endPanel" class="overlay" style="display:none">
  <div class="panel" id="endPanelInner">
    <h2 id="endTitle">Oyun Bitti!</h2>
    <p id="finalScore">Skorun: 0</p>
    <button id="restartBtn">Tekrar Oyna</button>
  </div>
</div>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const WIDTH = canvas.width, HEIGHT = canvas.height;

let score = 0, gameTime = 15, startTime = 0, running = false;

// Oyuncu
const player = { w:44, h:44, x:WIDTH/2-22, y:HEIGHT-110, speed:6 };

// Parseller
const plotCount = 12, plots = [];
const plotWidth = Math.floor((WIDTH - 80) / plotCount);
const plotY = HEIGHT - 80;
const baseObstacleChance = 0.2;
const growthMs = 7000;

// Efektler (puan artışı görseli)
const floatingTexts = [];

const keys = { left:false, right:false, space:false };
let lastPlantTime = 0;
const plantCooldown = 300;

function initPlots() {
  plots.length = 0;
  const margin = 40;
  for (let i=0;i<plotCount;i++) {
    const x = margin + i * plotWidth + 8;
    const w = plotWidth - 16;
    const isObstacle = Math.random() < baseObstacleChance;
    plots.push({ x, y: plotY, w, h: 48, type: isObstacle?'obstacle':'empty', plantedAt:null });
  }
}

function resetGame() {
  score = 0;
  startTime = performance.now();
  running = true;
  initPlots();
  document.getElementById('hud').style.display = 'block';
  updateHud();
}

function drawBackground() {
  ctx.fillStyle = '#87CEEB';
  ctx.fillRect(0,0,WIDTH,HEIGHT*0.6);
  ctx.fillStyle = '#8B5A2B';
  ctx.fillRect(0, HEIGHT*0.6, WIDTH, HEIGHT*0.4);
}

function drawPlots() {
  for (let p of plots) {
    ctx.fillStyle = '#6C3D18';
    ctx.fillRect(p.x, p.y, p.w, p.h);
    ctx.strokeStyle = '#4b2a12';
    ctx.strokeRect(p.x, p.y, p.w, p.h);

    if (p.type === 'obstacle') {
      ctx.fillStyle = '#8f8f8f';
      ctx.beginPath();
      ctx.ellipse(p.x + p.w/2, p.y + p.h/2, 18, 12, 0, 0, Math.PI*2);
      ctx.fill();
    } else if (p.type === 'sapling') {
      const age = performance.now() - p.plantedAt;
      const t = Math.min(1, age / growthMs);
      const leafSize = 8 + 20 * t;
      const stemHeight = 10 + 20 * t;
      ctx.fillStyle = '#6b3a1b';
      ctx.fillRect(p.x + p.w/2 - 3, p.y + 40 - stemHeight, 6, stemHeight);
      ctx.fillStyle = '#4CAF50';
      ctx.beginPath();
      ctx.ellipse(p.x + p.w/2, p.y + 40 - stemHeight, leafSize, leafSize*0.8, 0, 0, Math.PI*2);
      ctx.fill();
      if (t===1) { // büyüdü
        p.type = 'tree';
        score += 2;
        addFloatingText("+2", p.x + p.w/2, p.y + 20, "lime");
        updateHud();
      }
    } else if (p.type === 'tree') {
      ctx.fillStyle = '#5D3311';
      ctx.fillRect(p.x + p.w/2 - 8, p.y + 18, 16, 40);
      ctx.fillStyle = '#2E7D32';
      ctx.beginPath();
      ctx.ellipse(p.x + p.w/2, p.y + 12, 28, 28, 0, 0, Math.PI*2);
      ctx.fill();
      ctx.beginPath();
      ctx.ellipse(p.x + p.w/2 - 18, p.y + 28, 22, 22, 0, 0, Math.PI*2);
      ctx.fill();
      ctx.beginPath();
      ctx.ellipse(p.x + p.w/2 + 18, p.y + 28, 22, 22, 0, 0, Math.PI*2);
      ctx.fill();
    }
  }
}

function drawPlayer() {
  ctx.fillStyle = '#111';
  ctx.fillRect(player.x, player.y, player.w, player.h);
  ctx.fillStyle = '#ffdcb2';
  ctx.beginPath();
  ctx.arc(player.x + player.w/2, player.y - 6, 10, 0, Math.PI*2);
  ctx.fill();
}

function updateHud() {
  const elapsed = Math.floor((performance.now() - startTime) / 1000);
  const remaining = Math.max(0, gameTime - elapsed);
  document.getElementById('score').textContent = 'Skor: ' + score;
  document.getElementById('time').textContent = 'Süre: ' + remaining;
}

// +puan efektleri
function addFloatingText(text, x, y, color="yellow") {
  floatingTexts.push({ text, x, y, color, alpha:1 });
}
function drawFloatingTexts(dt) {
  for (let t of floatingTexts) {
    t.y -= dt * 0.05;
    t.alpha -= dt * 0.001;
    ctx.globalAlpha = Math.max(0, t.alpha);
    ctx.fillStyle = t.color;
    ctx.font = "bold 20px Arial";
    ctx.fillText(t.text, t.x, t.y);
    ctx.globalAlpha = 1;
  }
  // sil bitenleri
  for (let i=floatingTexts.length-1;i>=0;i--) if (floatingTexts[i].alpha<=0) floatingTexts.splice(i,1);
}

function plantAtNearestPlot() {
  const now = performance.now();
  if (now - lastPlantTime < plantCooldown) return;
  lastPlantTime = now;

  const px = player.x + player.w/2;
  let nearest = null, bestDist = Infinity;
  for (let p of plots) {
    const cx = p.x + p.w/2;
    const dist = Math.abs(cx - px);
    if (dist < bestDist) { bestDist = dist; nearest = p; }
  }
  if (bestDist <= 80 && nearest) {
    if (nearest.type === 'empty') {
      nearest.type = 'sapling';
      nearest.plantedAt = now;
      score += 5;
      addFloatingText("+5", nearest.x + nearest.w/2, nearest.y, "gold");
      updateHud();
    } else if (nearest.type === 'obstacle') {
      score -= 2;
      addFloatingText("-2", nearest.x + nearest.w/2, nearest.y, "red");
      updateHud();
    }
  }
}

function maybeAddObstacle(elapsedS) {
  // her 5 saniyede bir yeni engel ekle
  if (elapsedS > 0 && elapsedS % 5 === 0 && Math.random() < 0.05) {
    const emptyPlots = plots.filter(p => p.type==='empty');
    if (emptyPlots.length>0) {
      const p = emptyPlots[Math.floor(Math.random()*emptyPlots.length)];
      p.type = 'obstacle';
    }
  }
}

// input
window.addEventListener('keydown', e => {
  if (e.code === 'ArrowLeft') keys.left = true;
  if (e.code === 'ArrowRight') keys.right = true;
  if (e.code === 'Space') keys.space = true;
});
window.addEventListener('keyup', e => {
  if (e.code === 'ArrowLeft') keys.left = false;
  if (e.code === 'ArrowRight') keys.right = false;
  if (e.code === 'Space') keys.space = false;
});

let lastFrame = performance.now();
function gameLoop(now) {
  if (!running) return;
  const dt = now - lastFrame;
  lastFrame = now;

  if (keys.left) player.x -= player.speed;
  if (keys.right) player.x += player.speed;
  player.x = Math.max(8, Math.min(WIDTH - player.w - 8, player.x));
  if (keys.space) plantAtNearestPlot();

  const elapsedS = Math.floor((now - startTime)/1000);
  maybeAddObstacle(elapsedS);

  ctx.clearRect(0,0,WIDTH,HEIGHT);
  drawBackground();
  drawPlots();
  drawPlayer();
  drawFloatingTexts(dt);
  updateHud();

  const remaining = Math.max(0, gameTime - elapsedS);
  if (remaining<=0) { endGame(); return; }
  requestAnimationFrame(gameLoop);
}

function endGame() {
  running = false;
  document.getElementById('endPanel').style.display = 'flex';
  document.getElementById('finalScore').textContent = 'Skorun: ' + score;
  const trees = plots.filter(p => p.type === 'tree').length;
  document.getElementById('endTitle').textContent = `Oyun Bitti! ${trees} ağaç yetişti 🌳`;
}

// Başlat / Yeniden başlat
document.getElementById('startBtn').addEventListener('click', () => {
  document.getElementById('startPanel').style.display='none';
  document.getElementById('endPanel').style.display='none';
  resetGame(); lastFrame=performance.now(); requestAnimationFrame(gameLoop);
});
document.getElementById('restartBtn').addEventListener('click', () => {
  document.getElementById('endPanel').style.display='none';
  resetGame(); lastFrame=performance.now(); requestAnimationFrame(gameLoop);
});

initPlots(); updateHud();
</script>
</body>
</html>



Yorumlar

Yorum Gönder