jeu du serpent

1087 kevekıbhack

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

30 November 2024

Menu du site

16 January 2026

Intégration de jeu Flash avec Ruffle Player

28 August 2025

Studio d'architecture et de design : Design moderne et durable

HTML

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

Menu du site

Intégration de jeu Flash avec Ruffle Player

Studio d'architecture et de design : Design moderne et durable

HTML

CSS

JS

Recommandé

Menu du site

Intégration de jeu Flash avec Ruffle Player

Studio d'architecture et de design : Design moderne et durable

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS