Skip to content
No description, website, or topics provided.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
assets
dist
lib
src
README.md
index.html
package.json
webpack.config.js

README.md

CookieMon

Live Link

Overview

A remake of the classic game Pac-Man headlining none other than the Cookie-Monster himself. Users complete the game by consuming all pellets. Power pellets tranform the ghosts into cookies, rendering them edible. Similar to original game, each ghost features its own path-finding strategy, creating an interesting dynamic. Find out if you can get all the pellets before the ghosts get you!

Technologies

  • HTML Canvas, CSS - To build the visual interface
  • Javascript (ES 5+) - To build the game logic

Features

  • Collision Detection algorithm - Obstacle & Sprite collisions
  • 4 Pathfinding Algorithm - One for each ghost
  • Score System - Players earn poins based on their play
  • Lives - Each player gets three lives to complete the game

Collision Detection

Collision detection anticipates the next possible step, using the graph used to build the maze, determines whether anticipated step is a wall (represented as a '0' in the graph).

  willCollide(pos, dir) {
    let blockSize = Loader.BLOCK_SIZE;
    let map = Loader.MAP;
    let x = Math.floor(((pos[0] + dir[0] * 0.5 * blockSize)) / blockSize);
    let y = Math.floor(((pos[1] + dir[1] * 0.5 * blockSize)) / blockSize);
    return (map[y][x] === 0) ? true : false;
  }

Pathfinding Algorithm

The path-finding algorithm considers each possible direction, and selects the one that brings the ghost closest to the target.

target(pos) {
  const directions = DEFAULTS.directions;

  if (this.calcDist(this.pos, this.prevPosition) < 100 && this.prevPositionCounter > 5) {
    this.moveRandom = true;
    return;
  }

  const potentialSteps = [
    [this.calcDist(pos, this.calcStep(directions[0])), 0],
    [this.calcDist(pos, this.calcStep(directions[1])), 1],
    [this.calcDist(pos, this.calcStep(directions[2])), 2],
    [this.calcDist(pos, this.calcStep(directions[3])), 3],
  ].sort((a, b) => a[0] > b[0] ? 1 : -1);

  for (let i = 0; i < potentialSteps.length; i++) {
    let currDirection = directions[potentialSteps[i][1]];
    let currNextStep = this.calcStep(currDirection);

    if (!this.willCollide(currNextStep, currDirection)) {
      this.pos = currNextStep;
      this.dir = currDirection;
      return;
    }
  }

Future Improvements

  • Incorporate djikstra / BFS path finding
  • Refine wall detection algo
  • Incorporate Audio
You can’t perform that action at this time.