Mini Pac-Man Game HTML Canvas JavaScript

676 iroger7

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Mini Pac‑Man — Fixed Lower Area</title>
  <style>
    :root{
      --bg:#000;
      --wall:#0d4f66;
      --dot:#ffd54f;
      --pac:#ffeb3b;
      --ghost:#ff6b6b;
      --text:#fff;
    }
    html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:#111;color:var(--text)}
    .wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box}
    .game{
      width:560px;height:620px;background:linear-gradient(#071428,#001021);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.6);position:relative;overflow:hidden;
      display:flex;flex-direction:column;align-items:center;padding:12px;
    }
    canvas{background:var(--bg);border-radius:6px}
    .ui{width:100%;display:flex;justify-content:space-between;align-items:center;color:var(--text);padding:6px 10px}
    .panel{background:rgba(255,255,255,0.04);padding:8px 12px;border-radius:8px}
    button{background:#1976d2;color:white;border:none;padding:8px 12px;border-radius:8px;font-weight:700;cursor:pointer}
    .overlay{
      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;
    }
    .panelBig{background:rgba(0,0,0,0.7);padding:18px;border-radius:12px;color:var(--text);text-align:center}
    @media (max-width:640px){
      .game{width:360px;height:520px}
      canvas{width:320px;height:320px}
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="game" id="gameRoot" role="application" aria-label="Mini Pac-Man game">
      <div class="ui">
        <div class="panel">Score: <span id="score">0</span></div>
        <div class="panel">Lives: <span id="lives">3</span></div>
        <div><button id="startBtn">Start</button></div>
      </div>

<div class="overlay" id="overlay" style="display:flex">
        <div class="panelBig">
          <h2 style="margin:0 0 8px 0">Mini Pac‑Man</h2>
          <p style="margin:0 0 12px 0">Use arrow keys to move. Eat all dots to win. Avoid ghosts.</p>
          <button id="overlayStart">Play</button>
        </div>
      </div>
    </div>
  </div>

const COLS = 28;
    const ROWS = 28;
    const TILE = Math.floor(canvas.width / COLS);
    const W = TILE * COLS;
    const H = TILE * ROWS;
    canvas.width = W;
    canvas.height = H;

const COLORS = {
      wall: '#0d4f66',
      floor: '#071428',
      dot: '#ffd54f',
      pac: '#ffeb3b',
      ghost: '#ff6b6b',
      frightened: '#7fd3ff'
    };

let map = [];
    let pac = { x: 14, y: 20, dir: {x:0,y:0}, nextDir: {x:0,y:0}, speed:1 };
    let ghosts = [];
    let score = 0;
    let lives = 3;
    let running = false;
    let lastTime = 0;

// Fixed maze: opened lower corridors so bottom area is reachable.
    const raw = [
      "1111111111111111111111111111",
      "1000000000110000000000000001",
      "1011111110110111111110111101",
      "1020000010000001000000010201",
      "1010111011111101111101010101",
      "1010111010000101000101010101",
      "1000000010110101010100000001",
      "1011111010110101010111111101",
      "1000000010000000000100000001",
      "1011111011111101111101111101",
      "1010000010000101000101000101",
      "1010111110110101010101110101",
      "1010000010000101000100000101",
      "1011111010111101111101111101",
      "1000000010000000000100000001",
      "1011111010110111110111111101",
      "1000000010110000000100000001",
      "1011111010111111110111111101",
      // OPENED corridors below to allow access to lower area
      "1000000000000000000000000001",
      "1011111111111111111111111101",
      "1000000000000000000000000001",
      "1000000000000000000000000001",
      "1000000000000000000000000001",
      "1000000000000000000000000001",
      "1000000000000000000000000001",
      "1000000000000000000000000001",
      "1000000000000000000000000001",
      "1111111111111111111111111111"
    ];

function startGame(){
      initMap();
      resetEntities();
      score = 0;
      lives = 3;
      running = true;
      overlay.style.display = 'none';
      scoreLabel.textContent = score;
      livesLabel.textContent = lives;
      lastTime = performance.now();
      requestAnimationFrame(loop);
    }

window.addEventListener('keydown', (e)=>{
      if (!running && (e.key === 'Enter' || e.key === ' ')) startGame();
      const dir = keyToDir(e.key);
      if (dir) {
        pac.nextDir = dir;
        e.preventDefault();
      }
    });

function canMoveTo(x,y){
      if (y<0 || y>=ROWS || x<0 || x>=COLS) return false;
      return map[y][x] !== 1;
    }

if (map[pac.y][pac.x] === 2){
        map[pac.y][pac.x] = 0;
        score += 10;
        scoreLabel.textContent = score;
        if (!map.some(row => row.includes(2))){
          running = false;
          overlay.querySelector('.panelBig').innerHTML = '<h2 style="margin:0 0 8px 0">You Win!</h2><p style="margin:0 0 12px 0">Score: '+score+'</p><button id="playAgain">Play Again</button>';
          overlay.style.display = 'flex';
          document.getElementById('playAgain').addEventListener('click', ()=>startGame());
        }
      }

for (let g of ghosts){
        if (Math.random() < 0.25){
          const dx = pac.x - g.x;
          const dy = pac.y - g.y;
          let dir;
          if (Math.abs(dx) > Math.abs(dy)) dir = {x: Math.sign(dx), y:0};
          else dir = {x:0, y: Math.sign(dy)};
          const nx = g.x + dir.x, ny = g.y + dir.y;
          if (canMoveTo(nx,ny)) g.dir = dir;
          else {
            const opts = [{x:1,y:0},{x:-1,y:0},{x:0,y:1},{x:0,y:-1}].filter(d=>canMoveTo(g.x+d.x,g.y+d.y));
            if (opts.length) g.dir = opts[Math.floor(Math.random()*opts.length)];
          }
        }
        const gx = g.x + g.dir.x, gy = g.y + g.dir.y;
        if (canMoveTo(gx,gy)) g.x = gx, g.y = gy;
      }

for (let g of ghosts){
        if (g.x === pac.x && g.y === pac.y){
          endRound();
          break;
        }
      }
    }

function draw(){
      ctx.fillStyle = COLORS.floor;
      ctx.fillRect(0,0,W,H);

for (let y=0;y<ROWS;y++){
        for (let x=0;x<COLS;x++){
          const v = map[y][x];
          const px = x * TILE, py = y * TILE;
          if (v === 1){
            ctx.fillStyle = COLORS.wall;
            ctx.fillRect(px, py, TILE, TILE);
            ctx.fillStyle = shadeColor(COLORS.wall, -10);
            ctx.fillRect(px+2, py+2, TILE-4, TILE-4);
          } else {
            if (v === 2){
              ctx.fillStyle = COLORS.dot;
              const r = Math.max(2, TILE * 0.12);
              ctx.beginPath();
              ctx.arc(px + TILE/2, py + TILE/2, r, 0, Math.PI*2);
              ctx.fill();
            }
          }
        }
      }

for (let g of ghosts){
        const gx = g.x * TILE + TILE/2;
        const gy = g.y * TILE + TILE/2;
        const r = TILE*0.42;
        ctx.beginPath();
        ctx.fillStyle = g.color;
        ctx.arc(gx, gy, r, Math.PI, 0, false);
        ctx.rect(gx - r, gy, r*2, r);
        ctx.fill();
        ctx.fillStyle = '#fff';
        ctx.beginPath();
        ctx.arc(gx - r*0.3, gy - r*0.15, r*0.18, 0, Math.PI*2);
        ctx.arc(gx + r*0.3, gy - r*0.15, r*0.18, 0, Math.PI*2);
        ctx.fill();
        ctx.fillStyle = '#000';
        ctx.beginPath();
        ctx.arc(gx - r*0.3, gy - r*0.15, r*0.08, 0, Math.PI*2);
        ctx.arc(gx + r*0.3, gy - r*0.15, r*0.08, 0, Math.PI*2);
        ctx.fill();
      }
    }

function shadeColor(col, percent) {
      const num = parseInt(col.replace('#',''),16);
      const r = Math.min(255, Math.max(0, (num>>16) + percent));
      const g = Math.min(255, Math.max(0, ((num>>8)&0x00FF) + percent));
      const b = Math.min(255, Math.max(0, (num&0x0000FF) + percent));
      return '#' + ( (1<<24) + (r<<16) + (g<<8) + b ).toString(16).slice(1);
    }

let tickAccumulator = 0;
    const tickInterval = 140;

startBtn.addEventListener('click', ()=>{
      if (!running) startGame();
    });
    overlayStart.addEventListener('click', startGame);

canvas.addEventListener('click', (e)=>{
      const rect = canvas.getBoundingClientRect();
      const mx = e.clientX - rect.left;
      const my = e.clientY - rect.top;
      const dx = mx - (pac.x * TILE + TILE/2);
      const dy = my - (pac.y * TILE + TILE/2);
      if (Math.abs(dx) > Math.abs(dy)) pac.nextDir = {x: Math.sign(dx), y:0};
      else pac.nextDir = {x:0, y: Math.sign(dy)};
    });

initMap();
    resetEntities();
    draw();

})();
  </script>
</body>
</html>

CSS

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Mini Pac‑Man — Demo</title>
  <style>
    :root{
      --bg:#000;
      --wall:#0d4f66;
      --dot:#ffd54f;
      --pac:#ffeb3b;
      --ghost:#ff6b6b;
      --text:#fff;
    }
    html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:#111;color:var(--text)}
    .wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box}
    .game{
      width:560px;height:620px;background:linear-gradient(#071428,#001021);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.6);position:relative;overflow:hidden;
      display:flex;flex-direction:column;align-items:center;padding:12px;
    }
    canvas{background:var(--bg);border-radius:6px}
    .ui{width:100%;display:flex;justify-content:space-between;align-items:center;color:var(--text);padding:6px 10px}
    .panel{background:rgba(255,255,255,0.04);padding:8px 12px;border-radius:8px}
    button{background:#1976d2;color:white;border:none;padding:8px 12px;border-radius:8px;font-weight:700;cursor:pointer}
    .overlay{
      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;
    }
    .panelBig{background:rgba(0,0,0,0.7);padding:18px;border-radius:12px;color:var(--text);text-align:center}
    @media (max-width:640px){
      .game{width:360px;height:520px}
      canvas{width:320px;height:320px}
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="game" id="gameRoot" role="application" aria-label="Mini Pac-Man game">
      <div class="ui">
        <div class="panel">Score: <span id="score">0</span></div>
        <div class="panel">Lives: <span id="lives">3</span></div>
        <div><button id="startBtn">Start</button></div>
      </div>

(function(){
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const startBtn = document.getElementById('startBtn');
    const overlay = document.getElementById('overlay');
    const overlayStart = document.getElementById('overlayStart');
    const scoreLabel = document.getElementById('score');
    const livesLabel = document.getElementById('lives');

// Grid settings
    const COLS = 28;           // classic Pac-Man uses 28x31; we'll use 28x28 for square canvas
    const ROWS = 28;
    const TILE = Math.floor(canvas.width / COLS);
    const W = TILE * COLS;
    const H = TILE * ROWS;
    canvas.width = W;
    canvas.height = H;

// Colors
    const COLORS = {
      wall: '#0d4f66',
      floor: '#071428',
      dot: '#ffd54f',
      pac: '#ffeb3b',
      ghost: '#ff6b6b',
      frightened: '#7fd3ff'
    };

// Game state
    let map = []; // 2D array: 0=floor,1=wall,2=dot
    let pac = { x: 14, y: 20, dir: {x:0,y:0}, nextDir: {x:0,y:0}, speed:1 };
    let ghosts = [];
    let score = 0;
    let lives = 3;
    let running = false;
    let lastTime = 0;

// Build a simple maze layout (0 floor, 1 wall). This is a small hand-crafted maze pattern.
    const raw = [
      "1111111111111111111111111111",
      "1000000000110000000000000001",
      "1011111110110111111110111101",
      "1020000010000001000000010201",
      "1010111011111101111101010101",
      "1010111010000101000101010101",
      "1000000010110101010100000001",
      "1011111010110101010111111101",
      "1000000010000000000100000001",
      "1011111011111101111101111101",
      "1010000010000101000101000101",
      "1010111110110101010101110101",
      "1010000010000101000100000101",
      "1011111010111101111101111101",
      "1000000010000000000100000001",
      "1011111010110111110111111101",
      "1000000010110000000100000001",
      "1011111010111111110111111101",
      "1000000000000000000000000001",
      "1011111111111111111111111101",
      "1000000000000000000000000001",
      "1111111111111111111111111111",
      "1000000000000000000000000001",
      "1011111111111111111111111101",
      "1000000000000000000000000001",
      "1011111111111111111111111101",
      "1000000000000000000000000001",
      "1111111111111111111111111111"
    ];

// Input
    window.addEventListener('keydown', (e)=>{
      if (!running && (e.key === 'Enter' || e.key === ' ')) startGame();
      const dir = keyToDir(e.key);
      if (dir) {
        pac.nextDir = dir;
        e.preventDefault();
      }
    });

// Movement helpers
    function canMoveTo(x,y){
      if (y<0 || y>=ROWS || x<0 || x>=COLS) return false;
      return map[y][x] !== 1;
    }

// collect dots
      if (map[pac.y][pac.x] === 2){
        map[pac.y][pac.x] = 0;
        score += 10;
        scoreLabel.textContent = score;
        // check win: any dots left?
        if (!map.some(row => row.includes(2))){
          running = false;
          overlay.querySelector('.panelBig').innerHTML = '<h2 style="margin:0 0 8px 0">You Win!</h2><p style="margin:0 0 12px 0">Score: '+score+'</p><button id="playAgain">Play Again</button>';
          overlay.style.display = 'flex';
          document.getElementById('playAgain').addEventListener('click', ()=>startGame());
        }
      }

// simple ghost AI: random valid direction, biased toward Pac-Man
      for (let g of ghosts){
        if (Math.random() < 0.25){ // occasionally choose a new direction toward Pac
          const dx = pac.x - g.x;
          const dy = pac.y - g.y;
          let dir;
          if (Math.abs(dx) > Math.abs(dy)) dir = {x: Math.sign(dx), y:0};
          else dir = {x:0, y: Math.sign(dy)};
          const nx = g.x + dir.x, ny = g.y + dir.y;
          if (canMoveTo(nx,ny)) g.dir = dir;
          else {
            // pick random valid direction
            const opts = [{x:1,y:0},{x:-1,y:0},{x:0,y:1},{x:0,y:-1}].filter(d=>canMoveTo(g.x+d.x,g.y+d.y));
            if (opts.length) g.dir = opts[Math.floor(Math.random()*opts.length)];
          }
        }
        // move
        const gx = g.x + g.dir.x, gy = g.y + g.dir.y;
        if (canMoveTo(gx,gy)) { g.x = gx; g.y = gy; }
      }

// collisions
      for (let g of ghosts){
        if (g.x === pac.x && g.y === pac.y){
          endRound();
          break;
        }
      }
    }

function draw(){
      // background
      ctx.fillStyle = COLORS.floor;
      ctx.fillRect(0,0,W,H);

// draw map
      for (let y=0;y<ROWS;y++){
        for (let x=0;x<COLS;x++){
          const v = map[y][x];
          const px = x * TILE, py = y * TILE;
          if (v === 1){
            // wall
            ctx.fillStyle = COLORS.wall;
            ctx.fillRect(px, py, TILE, TILE);
            // small bevel
            ctx.fillStyle = shadeColor(COLORS.wall, -10);
            ctx.fillRect(px+2, py+2, TILE-4, TILE-4);
          } else {
            // dot
            if (v === 2){
              ctx.fillStyle = COLORS.dot;
              const r = Math.max(2, TILE * 0.12);
              ctx.beginPath();
              ctx.arc(px + TILE/2, py + TILE/2, r, 0, Math.PI*2);
              ctx.fill();
            }
          }
        }
      }

// draw Pac-Man (simple circle with mouth indicating direction)
      const cx = pac.x * TILE + TILE/2;
      const cy = pac.y * TILE + TILE/2;
      ctx.fillStyle = COLORS.pac;
      // mouth angle based on dir
      let angle = 0.25;
      let start = 0.25*Math.PI, end = -0.25*Math.PI;
      if (pac.dir.x === 1) { start = 0.25*Math.PI; end = -0.25*Math.PI; }
      if (pac.dir.x === -1) { start = Math.PI+0.25*Math.PI; end = Math.PI-0.25*Math.PI; }
      if (pac.dir.y === -1) { start = -0.25*Math.PI; end = -0.75*Math.PI; }
      if (pac.dir.y === 1) { start = 0.75*Math.PI; end = 0.25*Math.PI; }
      // if stationary, small chomping
      if (pac.dir.x===0 && pac.dir.y===0){
        start = 0.25*Math.PI; end = -0.25*Math.PI;
      }
      ctx.beginPath();
      ctx.moveTo(cx,cy);
      ctx.arc(cx,cy, TILE*0.42, start, end, false);
      ctx.closePath();
      ctx.fill();

// draw ghosts
      for (let g of ghosts){
        const gx = g.x * TILE + TILE/2;
        const gy = g.y * TILE + TILE/2;
        const r = TILE*0.42;
        // body
        ctx.beginPath();
        ctx.fillStyle = g.color;
        ctx.arc(gx, gy, r, Math.PI, 0, false);
        ctx.rect(gx - r, gy, r*2, r);
        ctx.fill();
        // eyes
        ctx.fillStyle = '#fff';
        ctx.beginPath();
        ctx.arc(gx - r*0.3, gy - r*0.15, r*0.18, 0, Math.PI*2);
        ctx.arc(gx + r*0.3, gy - r*0.15, r*0.18, 0, Math.PI*2);
        ctx.fill();
        ctx.fillStyle = '#000';
        ctx.beginPath();
        ctx.arc(gx - r*0.3, gy - r*0.15, r*0.08, 0, Math.PI*2);
        ctx.arc(gx + r*0.3, gy - r*0.15, r*0.08, 0, Math.PI*2);
        ctx.fill();
      }
    }

// simple shading helper
    function shadeColor(col, percent) {
      const num = parseInt(col.replace('#',''),16);
      const r = Math.min(255, Math.max(0, (num>>16) + percent));
      const g = Math.min(255, Math.max(0, ((num>>8)&0x00FF) + percent));
      const b = Math.min(255, Math.max(0, (num&0x0000FF) + percent));
      return '#' + ( (1<<24) + (r<<16) + (g<<8) + b ).toString(16).slice(1);
    }

// Timing for grid ticks
    let tickAccumulator = 0;
    const tickInterval = 140; // ms per grid movement

// Start/pause controls
    startBtn.addEventListener('click', ()=>{
      if (!running) startGame();
    });
    overlayStart.addEventListener('click', startGame);

// Initialize
    initMap();
    resetEntities();
    draw();

// Accessibility: allow clicking on canvas to move (simple direction control)
    canvas.addEventListener('click', (e)=>{
      const rect = canvas.getBoundingClientRect();
      const mx = e.clientX - rect.left;
      const my = e.clientY - rect.top;
      const dx = mx - (pac.x * TILE + TILE/2);
      const dy = my - (pac

Mini Pac-Man Game HTML Canvas JavaScript

Recommended