Uncontained is a Platformer Puzzle Game.
This project was created for FBLA by me, Elijah Lieu. It is licensed under the MIT license.
While this was coded using Javascript, similar principles would apply in any game library. This game was made through Javascript to demonstrate that a developer does not need to use a game-engine to make an engaging game (such as Unity or Unreal Engine, which both are wonderful and very powerful tools).
If you are reading through the code, I highly recommend using an intelligent editor that can collapse all code on certain depths. I used Visual Studio Code, which has this feature. This will allow you to look through the method headers (depth 2) to find specific code faster.
This game was developed similar to how a progressive web app is developed.
For installation, see the Installation section.
The game is a graphical program that requires both a mouse and keyboard to
play. The mouse is used to navigate the menus and move Containers within
levels. The keyboard functions as controls within levels. Additionally,
the user can press Escape at any time to exit the game.
The leaderboard for each level is stored in the user's appdata folder.
- On Mac:
~/Library/Application Support/uncontained - On Linux:
~/.config/uncontained - On Windows:
C:\Users\youruser\AppData\Roaming\uncontained
These are local files, so the leaderboard is a local leaderboard.
By default, these files do not exist and are created as necessary.
If the user wishes to manually change the leaderboard, they will have to
modify the .json files listed in the directory above.
This program uses only a few primary dependencies:
- Node.js, an open-source runtime for JavaScript.
- npm, Node.js's package manager.
- React, an open-source front end JavaScript framework.
- Electron, an open-source JavaScript framework for building progressive web apps.
- JSDoc, an open-source JavaScript framework for generating static documentation pages.
More dependencies can be found in package.json. None of these dependencies
need to be manually installed by the user unless they wish to modify the
game's source code.
The color scheme of this game is the Nord color scheme, with some modifications. The Nord color scheme is open source.
To install the application, the user can install one of the prebuilt versions. There are prebuilt versions for Mac, Linux, and Windows. After, simply open the application in the same manner that you would with any other app.
Alternatively, the user can build the application from source. This requires
the version of node.js listed in package.json and for the user to run
npm run build in the working directory.
Navigate to the folder, then double click Uncontained.
Navigate to the folder, and execute the AppImage. Different distributions may need to run the AppImage differently.
Navigate to the folder and run the .exe file. Alternatively, the user can
create a shortcut. On Windows, it is important to keep the .exe file in the
same folder with other important files, such as .dll files. This is
natural for all Windows applications.
The source code for this game is fully documented. React uses both class and functional components, but JSDoc, the documentation package, does not recognize functional components. However, the source code still retains its comments. Additionally, JavaScript arrow functions do not appear on JSDoc.
The user can read the JSDoc in the docs/ folder. Each .html file is a
page of the generated documentation.
The folder src/data/ is solely for .json files. None of thse are
documented; by nature, .json does not allow comments. Because of this
I will document those files here.
keybinds.json is a file for the controls. The JSON object has key value
pairs, where the key is the keyboard key and the value is the action.
levelx.json where x is a number represents a level. Each level must have
a name, an id (the same as the x), a description, a difficulty (from 1 to
100), a character object, and an array of containers. The 10 provided levels
serve as examples and premade levels for the user to play through.
leaderboardx.json where x is a number represents a leaderboard for the
level of the same x value. Leaderboards are kept separate; see the Use
section. Each leaderboard is an array of objects, and each object has an id,
initials, and a score.
The how to play pages are pages that tell the user how to play. These are read from the How To Play page within the application.
All code within this project was created by me, except for
automatically generated files (such as package-lock.json),
or installed dependencies through the open-source package
manager npm. See Dependencies for more information.
Although this game was created to have a modular amount of levels, I do not see myself developing this game further. JavaScript is an interpreted language, which means it fundamentally will run slower than similar code in compiled languages. While this does not largely affect this game, it could should it be developed further.
However, I may develop a newer version of this game in another language.
This game could not have been developed without the following people:
- Mr. Stormes and Mr. Hakim, my FBLA advisers
- Mr. Dubose, my AP Computer Science A teacher
- My friends and family, who helped me stay motivated while developing the game.