साँप का खेल

अनुशंसित

10 June 2025

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Yavaş Yılan Oyunu</title>
  <style>
    body {
      background-color: #111;
      color: #eee;
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 0;
      padding: 0;
    }

h1 {
      margin-top: 20px;
      font-size: 32px;
      color: #00ff00;
    }

canvas {
      background-color: #000;
      border: 4px solid #00ff00;
      display: block;
      margin: 20px auto;
    }

#score {
      font-size: 20px;
      color: #fff;
    }

button {
      padding: 10px 20px;
      font-size: 16px;
      margin-top: 10px;
      cursor: pointer;
      background-color: #00aa00;
      color: white;
      border: none;
      border-radius: 5px;
    }

button:hover {
      background-color: #009900;
    }
  </style>
</head>
<body>
  <h1>Yavaş Yılan Oyunu</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <div id="score">Puan: 0</div>
  <button onclick="restartGame()">Yeniden Başla</button>

const box = 20;
    const canvasSize = 400;
    let score = 0;
    let snake;
    let food;
    let direction;
    let gameLoop;

function initGame() {
      snake = [{ x: 200, y: 200 }];
      direction = "RIGHT";
      score = 0;
      food = randomFood();
      clearInterval(gameLoop);
      // Hızı yavaşlatmak için interval süresini 200ms yaptık (önceki 100ms idi)
      gameLoop = setInterval(updateGame, 200);
      document.getElementById("score").innerText = "Puan: 0";
    }

function randomFood() {
      return {
        x: Math.floor(Math.random() * (canvasSize / box)) * box,
        y: Math.floor(Math.random() * (canvasSize / box)) * box
      };
    }

document.addEventListener("keydown", (e) => {
      if (e.key === "ArrowLeft" && direction !== "RIGHT") direction = "LEFT";
      if (e.key === "ArrowRight" && direction !== "LEFT") direction = "RIGHT";
      if (e.key === "ArrowUp" && direction !== "DOWN") direction = "UP";
      if (e.key === "ArrowDown" && direction !== "UP") direction = "DOWN";
    });

function updateGame() {
      const head = { ...snake[0] };

if (direction === "LEFT") head.x -= box;
      if (direction === "RIGHT") head.x += box;
      if (direction === "UP") head.y -= box;
      if (direction === "DOWN") head.y += box;

// Duvara veya kendine çarptıysa oyun biter
      if (
        head.x < 0 || head.y < 0 ||
        head.x >= canvasSize || head.y >= canvasSize ||
        snake.some((segment, i) => i !== 0 && segment.x === head.x && segment.y === head.y)
      ) {
        clearInterval(gameLoop);
        alert("Oyun Bitti! Skor: " + score);
        return;
      }

snake.unshift(head);

// Yem yediyse skor artar, yem yenilenir. Yoksa kuyruk kısalır
      if (head.x === food.x && head.y === food.y) {
        score++;
        document.getElementById("score").innerText = "Puan: " + score;
        food = randomFood();
      } else {
        snake.pop();
      }

drawGame();
    }

function drawGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Yılan
      snake.forEach((segment, index) => {
        ctx.fillStyle = index === 0 ? "#00ff00" : "#007700";
        ctx.fillRect(segment.x, segment.y, box, box);
      });

// Yem
      ctx.fillStyle = "red";
      ctx.fillRect(food.x, food.y, box, box);
    }

function restartGame() {
      initGame();
    }

initGame();
  </script>
</body>
</html>

साँप का खेल

अनुशंसित

मेटे का एक कोड

सरल सीएसएस कार्ड

कार्य प्रबंधक

HTML

CSS

JS

अनुशंसित

मेटे का एक कोड

सरल सीएसएस कार्ड

कार्य प्रबंधक

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS