Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

README - Bomberman Lite

Background and Overview

Bomberman Lite is based on the classic Super Nintendo game Bomberman 2. In that game, there is both a single-player mode that is a kind of quest mode and a multi-player mode where you can play against your friends and/or the computer. Due to the amount of time set aside for this project, my implementation focuses on a modified version of multiplayer mode where a single player will play against a computer player.

In this game, the objective is to blow up your opponent. You start out on opposite sides of a room, which also is partially blocked off by obstacles. Players can use their bombs to blow up the obstacles to eventually get close enough to hit their opponent.

Players only have one life and start out with being able to place a single bomb. They must wait for that bomb to detonate before they are able to place another bomb. As the bombs detonate after a certain number of seconds and have a certain blast radius, players must be careful not to stand too close to their own bombs when they detonate.

Functionality and MVPs

User Features

In Bomberman Lite, users will be able to:

  • start out placing a single bomb
  • use bombs to blow up obstacles
  • use bombs to hit the computer opponent


When the game starts, the board is set with obstacles placed. The game is over when one player is killed. When the game resets, the placement of obstacles also resets.

Computer AI

The computer player will be able to:

  • move about in a random pattern


In addition to gameplay, users will also be able to:

  • read instructions on gameplay through a modal
  • click a 'start' button to start the game or reset it when the game is over


This app consists of a single screen with the simulation canvas, user avatar and name, computer avatar, link to the github, and 'how to play' modal button.

board wireframe

Architecture and Technologies

This project was implemented with the following technologies:

  • Vanilla JavaScript for overall structure and game logic,
  • HTML5 Canvas for DOM manipulation and rendering,
  • Webpack to bundle and serve up the various scripts.

In addition to the webpack entry file(index.js), there are be five scripts involved in this project:

  • player.js that will hold the logic for how the player moves and places bombs
  • computer.js that will hold the logic for how the computer moves and places bombs
  • items.js that will hold the logic for the bombs and power-up items
  • board.js that will hold the logic for the board rendering and game-over scenario
  • game.js that holds the logic for starting and ending the game, collision detection, and rendering each object on the screen

Feature of Note

Randomly Generated Levels

Each time the player starts a new game, the pattern of obstacles in the game randomly generates, allowing for endless returns to the game. In order to implement this feature, I generated obstacles through conditional logic.

{const bricks = [];
    for (let c = 0; c < this.brickColumnCount; c++) {
      bricks[c] = [];
      for (let r = 0; r < this.brickRowCount; r++) {
        if (c % 5 === 0) {
          bricks[c][r] = { x: 0, y: 0, status: 2 };
          this.ctx.fillStyle = "#F1F7ED";
        } else {
          let displayBrick = Math.floor(Math.random() * 2);
          bricks[c][r] = { x: 0, y: 0, status: displayBrick};
          this.ctx.fillStyle = "#A4243B";
        if (bricks[c][r].status === 2 || bricks[c][r].status === 1) {
          let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
          let brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
          bricks[c][r].x = brickX;
          bricks[c][r].y = brickY;

          this.ctx.rect(brickX, brickY, brickWidth, brickHeight);


Future Directions

  • Power-up items
  • fireballs that increase your blast radius
  • roller skates that increase your speed
  • the ability to place more than one bomb at a time
  • gloves for throwing bombs
  • A timer feature that starts placing obstacles back on the board after a certain amount of time has passed, until one of the players kills the other or is crushed by an obstacle
  • sound effects for bomb detonation and item grabbing
  • best 2 out of three scoring system
  • changing avatar color


A pure JS version of the classic Nintendo game bomberman 2






No releases published


No packages published