jeu du serpent

Ouvrir dans l'éditeur Publiez votre code

Recommandé

5 July 2025

Panneau de connexion moderne avec bordure animée et réinitialisation du mot de passe de TheDoc

26 June 2024

<!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>

jeu du serpent

Recommandé

Panneau de connexion moderne avec bordure animée et réinitialisation du mot de passe de TheDoc

Lueur de survol du menu

Jeu du serpent

HTML

CSS

JS

Recommandé

Panneau de connexion moderne avec bordure animée et réinitialisation du mot de passe de TheDoc

Lueur de survol du menu

Jeu du serpent

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS