Files and Directories

Review these locations in the project to understand the structure and purpose of different files in a project.

  • navigation/game2.html is the entry point of the project, containing the HTML and initialization JavaScript for the game.
  • _sass/dracula/platformer-styles.sccs is an SCSS file that defines the styles for the game, including elements like score display, game buttons, and input fields. It’s noted that future updates should remove dependencies from Dracula.
  • images/platformer is a directory that contains sprite sheets and images for the characters and objects in the game.
  • assets/audio is a directory that contains audio assets, which are sounds synchronized with game events like collisions.
  • assets/js/platformer2x is the directory where the game’s key logic is written in JavaScript without the use of third-party libraries.

OOP Conversion Outline

The OOP hierarchy is designed to promote reusability, encapsulation, and a clear separation of entities.

Key JavaScript files

  • GameEnv.js: This overarching environment class holds the game levels, and game objects, and manages the overall game state.
  • SettingControl.js: This is the user interface for customizable game state variables such as difficulty level, and sound settings, and it also manages local storage for these settings.
  • LeaderBoard.js: This interface manages game data, specifically the leaderboard data. It handles local storage for the leaderboard and also communicates with a Node.js backend for global leaderboard functionality.
  • GameSetup.js: This class is responsible for creating objects for the Game Levels and loading the game assets
  • GameControl.js This class handles the transition between different Game Levels and drives the refresh rate of all GameObjects.
  • GameObject.js: This provides a common base for defining game entities. It includes common properties like position, size, and velocity, and common methods like update and draw.
  • GameLevel.js: This class holds level-specific assets and creates GameObjects for each level.

Conceptual overview

The below visualization shows key elements of the Game.

  • GameSetup creates GameObjects, which are then used by GameControl to drive the game.
    • A new GameLevel in GameSetup creates Levels and new GameObjects from assets.
  • GameControl contains the gameLoop and transitionToLevel methods.
    • GameControl calls a method in GameEnv to update and draw each GameObject.
    • Each GameObject has unique implementations of update, draw, collisions, etc.
GameSetup
│
├── Attributes:
│   ├── playerAssets
│   ├── backgroundAssets
│   ├── platformAssets
│   └── ...
│
└── Methods: 
    ├── load
    │   ├── Creates new GameObjects from assets:
    │   │   ├── Player
    │   │   ├── Background
    │   │   ├── Platform
    │   │   └── ...
    │   └── Returns list of GameObjects
    └── ...

GameObject (Parent)
│
├── Player 
│   ├── Attributes: sprite animation, wasd
│   └── Methods: ...
│
├── Background
│   ├── Attributes: fit to screen, scrolling
│   └── Methods: ...
│
├── Platform
│   ├── Attributes: fixed to bottom, scrolling
│   └── Methods: ...
│
└── ...

GameControl
│
├── Attributes: ...
│
└── Methods: 
    ├── gameLoop
    │   ├── Drives action of game level
    │   ├── Updates and draws GameObjects
    │   └── ...
    ├── transitionToLevel
    │   ├── Destroys current GameObjects
    │   ├── Calls GameSetup.load to create new GameObjects for next level
    │   └── ...
    └── ...