Ejemplo de código HTML del juego de la serpiente

Abrir en el editor Video Publica tu código

Recomendado

6 August 2025

Plantilla de sitio web de cartera de desarrolladores HTML CSS

26 June 2024

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const blockSize = 20;
let snake = [{ x: 10, y: 10 }];
let food = { x: 15, y: 10 };
let dx = 1;
let dy = 0;
let score = 0;
let isGameOver = false;

function drawBlock(x, y) {
  ctx.fillStyle = "green";
  ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
  ctx.strokeStyle = "black";
  ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
}

function drawSnake() {
  snake.forEach(segment => drawBlock(segment.x, segment.y));
}

function drawFood() {
  drawBlock(food.x, food.y);
}

function gameOver() {
  isGameOver = true;
  clearInterval(gameLoop);
  document.getElementById("gameOverText").innerText = "Game Over! Your score: " + score;
  document.getElementById("score").innerText = "0";
}

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

function updateGame() {
  if (isGameOver) return;
  clearCanvas();
  drawSnake();
  drawFood();
  moveSnake();
  checkCollision();
}

function startGame() {
  snake = [{ x: 10, y: 10 }];
  dx = 1;
  dy = 0;
  score = 0;
  isGameOver = false;
  document.getElementById("gameOverText").innerText = "";
  document.getElementById("score").innerText = score;
  generateFood();
  gameLoop = setInterval(updateGame, 100);
}

document.addEventListener("keydown", keyDownHandler);

Ejemplo de código HTML del juego de la serpiente

Recomendado

Un código de Mete

Plantilla de sitio web de cartera de desarrolladores HTML CSS

Botón luminoso de discordia

HTML

CSS

JS

Recomendado

Un código de Mete

Plantilla de sitio web de cartera de desarrolladores HTML CSS

Botón luminoso de discordia

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS