साँप का खेल

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

2 July 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>

साँप का खेल

अनुशंसित

मेटे का एक कोड

3D फ़्लिप्स कार्ड प्रभाव

इंटरैक्टिव आकार नृत्य

HTML

CSS

JS

अनुशंसित

मेटे का एक कोड

3D फ़्लिप्स कार्ड प्रभाव

इंटरैक्टिव आकार नृत्य

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS