Play The Game

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. 

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 and 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.

View The Code

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

Gameplay

When the game starts, the board is set with obstacles randomly 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

Instructions

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 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 five other 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 future 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

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.beginPath();

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

          this.ctx.fill();

          this.ctx.closePath();}

•  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