structure

General program structure

This page gives a general overview about the files, objects and their interactions in the project.

File structure

All code is contained in the src folder which has the following layout:

• css/ - stylesheets
• js/
• lib/ - peer.js and jquery libraries
• bomberman.js - main file. initializes the game
• conf.js - holds configuration in a global object Conf
• helper.js - utility functions
• game.js - game manager: setup / start and stop game
• lounge.js - player lounge: handles initial connections and setting up the peer to peer network topography
• p2p_comm.js - peer to peer communication functions
• view.js - display core. handles drawing of Entity instances in a canvas
• entity.js - abstract prototype base for all things that can be drawn by the View
• map.js - draws the map consisting of blocks of different types
• bomb.js - draws a bomb and lets it explode
• player.js - draws a player and encapsulates its properties
• player_manager.js - manages all players in a game
• controls.js - manages user input to control a player
• index.html - static welcome page to start or join a game
• game.html - game page that at first shows the Game Lounge for player connections and then draws the game in a canvas

Object structure

The following figure assembles some kind of class diagram although you cannot speak of classes in JavaScript. But you can get the idea.

You can categorize the objects into three types: Logic, Drawing or Utilities. Let's start with the Logic objects:

Before starting a game, the players have to connect to each other. Lounge handles this process by using functions from the P2PComm object and displaying the status of each player in a list. It already has an instance of PlayerManager where all connected players have their Player object. There are two kinds of players: A local player which is the one that can be controlled by the keyboard of the user and one or more remote players which are controlled by other players in the same game. Only the local player is controlled via the Controls object that handles the keyboard input.

When all players are ready to go, the game is initialized and started. This is what the functions in Game do. It will display the <canvas> element and start the animation loop to draw the game. The Lounge object will still be active because it handles player connection status events (like disconnecting) and displays a list of connected players with there respective player colors.

When the game is started and the animation loop is launched, the View has its big time. It has a list of all drawable objects, so called entities. These objects must implement the Entity prototype and its draw function. This function is defined by each entity in a different way, for example a Bomb object will draw pulsating circles.

All entities are stored in a certain order in the View to ensure proper drawing order. The "bottom" or "background" is the Map which draws a game map consisting of cells of different types. On top of that Bomb objects can be displayed, which can be dropped by all players. Player objects themselves are on the top level of the drawing process.

Please note that the Logic, Drawing or Utilities categorization is not very strict. For example, a Bomb object does also contain game logic in a way that it checks for hitting players or destructable fields.