Code HTML CSS JavaScript du jeu Pac-Man

Ouvrir dans l'éditeur Publiez votre code

Recommandé

18 December 2023

Animation de texte en HTML et CSS

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

Code HTML CSS JavaScript du jeu Pac-Man

Recommandé

Animation de texte en HTML et CSS

Un code par alejandrokundrah

Un code par bachir123

HTML

CSS

JS

Recommandé

Animation de texte en HTML et CSS

Un code par alejandrokundrah

Un code par bachir123

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS