पैक मैन गेम

1149 kevekıbhack

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

25 January 2026

रफ़ल फ़्लैश गेम प्लेयर HTML टेम्पलेट

24 July 2025

ग्रैपलिंग हुक संरचना वाला HTML स्टिकमैन

19 January 2026

रफ़ल फ़्लैश गेम एम्बेड HTML कोड

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>

पैक मैन गेम

अनुशंसित

रफ़ल फ़्लैश गेम प्लेयर HTML टेम्पलेट

ग्रैपलिंग हुक संरचना वाला HTML स्टिकमैन

रफ़ल फ़्लैश गेम एम्बेड HTML कोड

HTML

CSS

JS

अनुशंसित

रफ़ल फ़्लैश गेम प्लेयर HTML टेम्पलेट

ग्रैपलिंग हुक संरचना वाला HTML स्टिकमैन

रफ़ल फ़्लैश गेम एम्बेड HTML कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS