JEU PACK MAN

1,619 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 January 2026

Jeu de moteur Funkin' Kade du vendredi soir

14 December 2025

Chargez et jouez en ligne au jeu Zelda N64

1 April 2026

Configuration du chargeur HTML5 et de Firebase pour le jeu Escape Road

HTML

<!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>

CSS