Snake Game by @italotramontin - Codewith.it

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

Referenze

styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
getDefinisce un metodo di invio di dati al server
<b>Formatta il testo in grassetto
<option>Serve ad inserire una voce in un menu di selezione.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
postDefinisce un metodo di invio di dati al server

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

tedesco ad ita sito canzo

stringhe casuali

Countdown fine anno

Portfolio Base Freelance – Web,

Esercitazione 1

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>