CodePen - Live Editor

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

// Ayarlar
const boxSize = 20;
const canvasSize = canvas.width / boxSize;
let snake = [{ x: 10, y: 10 }];
let direction = { x: 0, y: 0 }; // Başlangıçta hareket yok
let nextDirection = null; // İlk yön bekleniyor
let food = spawnFood();
let score = 0;
let speed = 150;
let gameOver = false;

// Klavye kontrolü
document.addEventListener("keydown", handleDirection);

// Oyun döngüsü başlatma
setInterval(gameLoop, speed);

// Ana oyun döngüsü
function gameLoop() {
  if (gameOver) {
    // Eğer oyun bitmişse, sadece oyun sıfırlanır ve yeni bir oyun başlar
    resetGame();
    return;
  }

if (!nextDirection) {
    // İlk hareket için bekleme
    clearCanvas();
    drawSnake();
    drawFood();
    updateScore();
    return;
  }

clearCanvas();
  moveSnake();
  drawSnake();
  drawFood();
  updateScore();
}

// Yılanı hareket ettir
function moveSnake() {
  direction = nextDirection || direction; // İlk hareketi başlat
  const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

// Kendine veya duvara çarparsa
  if (
    head.x < 0 || head.y < 0 || 
    head.x >= canvasSize || head.y >= canvasSize || 
    isCollision(head)
  ) {
    gameOver = true;
    return;
  }

snake.unshift(head);

// Yem yerse
  if (head.x === food.x && head.y === food.y) {
    score++;
    food = spawnFood();
  } else {
    snake.pop();
  }
}

// Çarpışma kontrolü
function isCollision(head) {
  return snake.some(segment => segment.x === head.x && segment.y === head.y);
}

// Yem oluştur
function spawnFood() {
  let newFood;
  do {
    newFood = {
      x: Math.floor(Math.random() * canvasSize),
      y: Math.floor(Math.random() * canvasSize),
    };
  } while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));
  return newFood;
}

// Tuvali temizle
function clearCanvas() {
  ctx.fillStyle = "#aad751";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

// Yılanı çiz
function drawSnake() {
  ctx.fillStyle = "#457b25";
  ctx.strokeStyle = "#578a34";
  snake.forEach(segment => {
    ctx.fillRect(segment.x * boxSize, segment.y * boxSize, boxSize, boxSize);
    ctx.strokeRect(segment.x * boxSize, segment.y * boxSize, boxSize, boxSize);
  });
}

// Yemi çiz
function drawFood() {
  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.arc(
    food.x * boxSize + boxSize / 2,
    food.y * boxSize + boxSize / 2,
    boxSize / 2.5,
    0,
    Math.PI * 2
  );
  ctx.fill();
}

// Skoru güncelle
function updateScore() {
  document.getElementById("score").textContent = score;
}

// Yön değiştirme
function handleDirection(event) {
  const directions = {
    ArrowUp: { x: 0, y: -1 },
    ArrowDown: { x: 0, y: 1 },
    ArrowLeft: { x: -1, y: 0 },
    ArrowRight: { x: 1, y: 0 },
  };

const newDirection = directions[event.key];
  if (
    newDirection &&
    (snake.length === 1 ||
      newDirection.x !== -direction.x ||
      newDirection.y !== -direction.y)
  ) {
    nextDirection = newDirection; // İlk yönü başlat
  }
}

// Oyunu sıfırlama
function resetGame() {
  snake = [{ x: 10, y: 10 }];
  direction = { x: 0, y: 0 };
  nextDirection = null;
  food = spawnFood();
  score = 0;
  gameOver = false;
  // Oyun başladığında hemen bir yön beklemeye başlar
}

Görünüm