Código HTML CSS JavaScript del juego Pac-Man

Abrir en el editor Publica tu código

Recomendado

28 April 2024

Botón HTML con efecto de desplazamiento (WEBLEB)

14 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Pac-Man Classic</title>
  <style>
    body {
      background: black;
      color: white;
      font-family: monospace;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    h1 { color: yellow; }
    #game {
      display: grid;
      grid-template-columns: repeat(20, 20px);
      gap: 1px;
      margin-bottom: 10px;
    }
    .cell {
      width: 20px;
      height: 20px;
      position: relative;
    }
    .wall {
      background: #2222aa;
    }
    .dot::after {
      content: '';
      display: block;
      width: 4px;
      height: 4px;
      background: white;
      margin: 8px auto;
      border-radius: 50%;
    }
    .pellet::after {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      background: orange;
      margin: 5px auto;
      border-radius: 50%;
    }
    .pacman {
      background: yellow;
      border-radius: 50%;
      clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
      animation: chomp 0.2s infinite alternate;
    }
    @keyframes chomp {
      0% { clip-path: polygon(0% 0%, 100% 50%, 0% 100%); }
      100% { clip-path: circle(50%); }
    }

.ghost {
      background: red;
      border-radius: 50% 50% 40% 40%;
      position: relative;
    }

.ghost::before, .ghost::after {
      content: '';
      position: absolute;
      top: 4px;
      width: 6px;
      height: 6px;
      background: white;
      border-radius: 50%;
    }
    .ghost::before {
      left: 3px;
    }
    .ghost::after {
      right: 3px;
    }

.ghost.scared {
      background: lightblue !important;
    }

.ghost.scared::before,
    .ghost.scared::after {
      background: white;
    }

.ghost.eye-left, .ghost.eye-right {
      position: absolute;
      width: 3px;
      height: 3px;
      background: black;
      border-radius: 50%;
      top: 6px;
    }

.ghost.eye-left { left: 5px; }
    .ghost.eye-right { right: 5px; }

</style>
</head>
<body>
  <h1>Pac-Man</h1>
  <div>Score: <span id="score">0</span> | Lives: <span id="lives">3</span></div>
  <div id="game"></div>
  <script>
    const width = 20;
    const grid = document.getElementById('game');
    const scoreDisplay = document.getElementById('score');
    const livesDisplay = document.getElementById('lives');
    let score = 0;
    let lives = 3;
    let pacmanIndex = 229;
    let ghostIndex = 210;
    let scared = false;

const layout = new Array(400).fill(0).map((_, i) => {
      if (i < 20 || i % 20 === 0 || i % 20 === 19 || i >= 380) return 1;
      if ([42, 43, 44, 45, 46].includes(i)) return 3; // pellets
      return 0;
    });

const cells = [];

function createBoard() {
      layout.forEach((val, i) => {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        if (val === 1) cell.classList.add('wall');
        if (val === 0) cell.classList.add('dot');
        if (val === 3) cell.classList.add('pellet');
        grid.appendChild(cell);
        cells.push(cell);
      });
    }

function drawPacman() {
      cells.forEach(cell => cell.classList.remove('pacman'));
      cells[pacmanIndex].classList.add('pacman');
    }

function drawGhost() {
      cells.forEach(cell => {
        cell.classList.remove('ghost', 'scared');
        const eyes = cell.querySelectorAll('.eye-left, .eye-right');
        eyes.forEach(e => e.remove());
      });

const ghostCell = cells[ghostIndex];
      ghostCell.classList.add('ghost');
      if (scared) ghostCell.classList.add('scared');

// Eyes
      if (!scared) {
        const eyeLeft = document.createElement('div');
        eyeLeft.classList.add('eye-left');
        const eyeRight = document.createElement('div');
        eyeRight.classList.add('eye-right');
        ghostCell.appendChild(eyeLeft);
        ghostCell.appendChild(eyeRight);
      }
    }

function movePacman(e) {
      cells[pacmanIndex].classList.remove('pacman');
      switch (e.key) {
        case 'ArrowUp':
          if (!cells[pacmanIndex - width].classList.contains('wall')) pacmanIndex -= width;
          break;
        case 'ArrowDown':
          if (!cells[pacmanIndex + width].classList.contains('wall')) pacmanIndex += width;
          break;
        case 'ArrowLeft':
          if (!cells[pacmanIndex - 1].classList.contains('wall')) pacmanIndex -= 1;
          break;
        case 'ArrowRight':
          if (!cells[pacmanIndex + 1].classList.contains('wall')) pacmanIndex += 1;
          break;
      }
      eatDot();
      eatPellet();
      checkGhost();
      drawPacman();
    }

function moveGhost() {
      const directions = [-1, +1, -width, +width];
      const dir = directions[Math.floor(Math.random() * 4)];
      const next = ghostIndex + dir;
      if (!cells[next].classList.contains('wall')) {
        ghostIndex = next;
        drawGhost();
        checkGhost();
      }
    }

function eatDot() {
      if (cells[pacmanIndex].classList.contains('dot')) {
        cells[pacmanIndex].classList.remove('dot');
        score += 10;
        scoreDisplay.textContent = score;
      }
    }

createBoard();
    drawPacman();
    drawGhost();
    document.addEventListener('keydown', movePacman);
    setInterval(moveGhost, 400);
  </script>
</body>
</html>

Código HTML CSS JavaScript del juego Pac-Man

Recomendado

Botón HTML animado

Botón HTML con efecto de desplazamiento (WEBLEB)

Un código de Metehan

HTML

CSS

JS

Recomendado

Botón HTML animado

Botón HTML con efecto de desplazamiento (WEBLEB)

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS