Codice HTML CSS JavaScript del gioco Pac-Man

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

10 May 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>

Codice HTML CSS JavaScript del gioco Pac-Man

Consigliato

Un codice di jrj332790

Verifica dell'app autorizzata

gioco del lancio della moneta

HTML

CSS

JS

Consigliato

Un codice di jrj332790

Verifica dell'app autorizzata

gioco del lancio della moneta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS