Juego de la serpiente en JavaScript con inicio y reinicio

45 Atif.designer.developer

Abrir en el editor Video Publica tu código

Juego de la serpiente en JavaScript con inicio y reinicio

Recomendado

30 April 2024

Plantilla de calificación de estrellas animadas

28 July 2025

Burbuja de mensaje HTML con diseño SVG

26 October 2024

Plantilla de sitio web de cartera de desarrolladores HTML CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Snake Game with Start & Restart</title>
  <style>
    body {
      background: #111;
      color: #fff;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

canvas {
      background: #000;
      border: 2px solid #00ff99;
      margin: 10px 0;
    }

button {
      padding: 10px 18px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      background: #00ff99;
      border: none;
      border-radius: 6px;
      margin: 5px;
    }

.controls {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 60px 60px 60px;
      grid-gap: 8px;
      justify-content: center;
    }

.empty {
      visibility: hidden;
    }
  </style>
</head>
<body>

<h2>paint Game</h2>
  <p>Score: <span id="score">0</span></p>

<div>
    <button onclick="startGame()">START</button>
    <button onclick="restartGame()">RESTART</button>
  </div>

<div class="controls">
    <div class="empty"></div>
    <button onclick="setDirection('UP')">⬆</button>
    <div class="empty"></div>

const box = 15;
    let score = 0; 
    let game = null;
    let running = false;

let snake;
    let direction;
    let food;

function initGame() {
      score = 0;
      document.getElementById("score").innerText = score;

snake = [{ x: 150, y: 150 }];
      direction = "RIGHT";

food = {
        x: Math.floor(Math.random() * 20) * box,
        y: Math.floor(Math.random() * 20) * box
      };

draw();
    }

function startGame() {
      if (!running) {
        running = true;
        game = setInterval(draw, 120);
      }
    }

function restartGame() {
      clearInterval(game);
      running = false;
      initGame();
    }

document.addEventListener("keydown", (e) => {
      if (e.key === "Enter") startGame();
      if (e.key === "ArrowUp" && direction !== "DOWN") direction = "UP";
      if (e.key === "ArrowDown" && direction !== "UP") direction = "DOWN";
      if (e.key === "ArrowLeft" && direction !== "RIGHT") direction = "LEFT";
      if (e.key === "ArrowRight" && direction !== "LEFT") direction = "RIGHT";
    });

function setDirection(dir) {
      if (dir === "UP" && direction !== "DOWN") direction = "UP";
      if (dir === "DOWN" && direction !== "UP") direction = "DOWN";
      if (dir === "LEFT" && direction !== "RIGHT") direction = "LEFT";
      if (dir === "RIGHT" && direction !== "LEFT") direction = "RIGHT";
    }

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Snake
      for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = i === 0 ? "#00ff99" : "#00cc77";
        ctx.fillRect(snake[i].x, snake[i].y, box, box);
      }

// Food
      ctx.fillStyle = "red";
      ctx.fillRect(food.x, food.y, box, box);

let headX = snake[0].x;
      let headY = snake[0].y;

if (direction === "UP") headY -= box;
      if (direction === "DOWN") headY += box;
      if (direction === "LEFT") headX -= box;
      if (direction === "RIGHT") headX += box;

// Eat food
      if (headX === food.x && headY === food.y) {
        score++;
        document.getElementById("score").innerText = score;
        food = {
          x: Math.floor(Math.random() * 20) * box,
          y: Math.floor(Math.random() * 20) * box
        };
      } else {
        snake.pop();
      }

let newHead = { x: headX, y: headY };

// Game Over
      if (
        headX < 0 || headY < 0 ||
        headX >= canvas.width || headY >= canvas.height ||
        collision(newHead, snake)
      ) {
        clearInterval(game);
        running = false;
        alert("Game Over! Score: " + score);
      }

snake.unshift(newHead);
    }

function collision(head, body) {
      return body.some(part => head.x === part.x && head.y === part.y);
    }

initGame();
  </script>

</body>
</html>

Recomendado

Plantilla de calificación de estrellas animadas

Burbuja de mensaje HTML con diseño SVG

Plantilla de sitio web de cartera de desarrolladores HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS