Snake Game by @italotramontin - Codewith.it

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

Referenze

<tbody>Definisce il contenuto principale di una tabella.
idIdentifica univocamente un elemento HTML
minImposta il valore numerico o temporale minimo per un elemento input
Inserisce un commento nel codice
selectedPre-seleziona un elemento di input
<em>Formatta il testo in corsivo/italico enfatizzato

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Web Design Final

formattazione_testo.html.(2)

JS Elementi del linguaggio es3

Congressional District Information

Blocco tasto destro mouse

INFORMATICA - ESERCIZIO 1 RISOLTO

Modulo multi Processo

LB Campodarsego(2)(2)(2)

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>