Null.Dev.

I built a Pac-Man clone in TypeScript.

Usage

I would be very surprised if anybody would like to use it so I didn't make it available throught a CDN link or something.

The source code is available on Codeberg.

Below is a quick example of how to add a Pac Man game of a page.

Create a Vite vanilla JS project

npm create vite@latest pacman -- --template vanilla --no-interactive
cd pacman
mkdir packages
git init .
git submodule add \
    https://codeberg.org/null_dev/pacman.git \
    packages/pacman

Add Pacman to the dependencies

{
  "name": "pacman",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^8.2.0"
  },
  "workspaces": [
      "packages/pacman"
  ]
}

package.json

Edit index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    />
    <title>pacman</title>
</head>
<body>
    <div id="app">
        <div id="ui">
          <p>Press 'space' to start</p>
          <p id="score">-</p>
        </div>
        <canvas id="canvas" width="600" height="800"></canvas>
    </div>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

index.html

Edit src/main.js

import {
    Game,
} from "@nulldev/pacman"

const context = canvas.getContext("2d")
const game = new Game(context)

game.onScoreChanged = points => {
    if (score != null) {
        score.innerHTML = `${points}`
    }
}
game.render()

window.addEventListener("keydown", ev => {
    const { code } = ev

    ev.preventDefault()

    if (code === "Space") {
        if (game.running) {
            game.togglePause()
        } else {
            game.start()
        }
    } else if (code === "ArrowUp") {
        game.up()
    } else if (code === "ArrowDown") {
        game.down()
    } else if (code === "ArrowLeft") {
        game.left()
    } else if (code === "ArrowRight") {
        game.right()
    }
})

src/main.js

Run the app

npm install
npm run dev

Credits

I relied on the excellent Pac-Man dossier for all the game mechanics and specs.