Snake Game by @italotramontin - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

formSpecifica a quale form appartiene un elemento.
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
formenctypeDefinisce il tipo di codifica dei dati di un elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Registration Form php pazienti

Basketball Legends

Pagina di esempio

Loading Animation

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snake Game</title>
  <style>
    body {
      margin: 0;
      background-color: #222;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
      color: white;
      font-family: Arial, sans-serif;
    }
    canvas {
      background-color: #000;
      display: block;
      border: 2px solid #fff;
    }
    #score {
      position: absolute;
      top: 20px;
      color: white;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <div id="score">Score: 0</div>

  <script>
    // Set up the canvas and context
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const scoreDisplay = document.getElementById('score');

    // Game settings
    canvas.width = 400;
    canvas.height = 400;
    const tileSize = 20;
    const rows = canvas.height / tileSize;
    const cols = canvas.width / tileSize;

    // Snake and game variables
    let snake = [{ x: 10, y: 10 }];
    let direction = { x: 0, y: 0 };
    let food = { x: 15, y: 15 };
    let score = 0;
    let gameOver = false;
    let speed = 200; // Initial speed in milliseconds

    // Draw a rectangle on the canvas
    function drawRect(x, y, color) {
      ctx.fillStyle = color;
      ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);
    }

    // Place food at a random position
    function placeFood() {
      food.x = Math.floor(Math.random() * cols);
      food.y = Math.floor(Math.random() * rows);
    }

    // Game loop
    function gameLoop() {
      if (gameOver) {
        alert(`Game Over! Final Score: ${score}`);
        document.location.reload();
        return;
      }

      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw the food
      drawRect(food.x, food.y, 'red');

      // Move the snake
      const newHead = {
        x: snake[0].x + direction.x,
        y: snake[0].y + direction.y,
      };

      // Check if the snake hits the walls
      if (newHead.x < 0 || newHead.x >= cols || newHead.y < 0 || newHead.y >= rows) {
        gameOver = true;
        return;
      }

      // Check if the snake collides with itself
      for (const segment of snake) {
        if (segment.x === newHead.x && segment.y === newHead.y) {
          gameOver = true;
          return;
        }
      }

      // Add new head to the snake
      snake.unshift(newHead);

      // Check if the snake eats the food
      if (newHead.x === food.x && newHead.y === food.y) {
        score++;
        scoreDisplay.textContent = `Score: ${score}`;
        placeFood();
        speed = Math.max(50, speed - 10); // Increase speed, with a lower limit
      } else {
        snake.pop(); // Remove the last segment if no food is eaten
      }

      // Draw the snake
      snake.forEach((segment, index) => {
        drawRect(segment.x, segment.y, index === 0 ? 'lime' : 'green');
      });

      // Repeat the game loop with updated speed
      setTimeout(gameLoop, speed);
    }

    // Handle keyboard input
    document.addEventListener('keydown', event => {
      const { key } = event;

      // Change direction based on arrow keys, ensuring no reverse movement
      if (key === 'ArrowUp' && direction.y === 0) direction = { x: 0, y: -1 };
      if (key === 'ArrowDown' && direction.y === 0) direction = { x: 0, y: 1 };
      if (key === 'ArrowLeft' && direction.x === 0) direction = { x: -1, y: 0 };
      if (key === 'ArrowRight' && direction.x === 0) direction = { x: 1, y: 0 };
    });

    // Start the game
    placeFood();
    gameLoop();
  </script>
</body>
</html>