PROJECT TIMELINE - December 2019 to February 2020
ROLES - Software Developer, Game Developer, Web Developer, Graphic Designer
SKILLS INCORPORATED - Software Development, Web Design and Development, Game Design and Development
SOFTWARE USED - Phaser 3, TypeScript, HTML / CSS, Adobe Illustrator, Adobe Photoshop
LINKS - Play the game here. View the code on GitHub.
BrickOut is a classic brick breaker game where you need to clear out the brick board as fast as possible with three lives to spare. There are several additional mechanics and gameplay ingredients that I have added to add a level of complexity and make the game more fun to play.
CONTROLS:
Move Paddle - Click and hold the paddle
Shoot Ball - Click on the paddle
If you lose, please click on the Retry button to restart the game.
NOTE: This game’s size is optimized for the mobile, so if you are playing it on your computer, kindly adjust your zoom ratio accordingly.
There are different tiers of bricks, i.e. every brick needs to be hit a different number of times for it to be fully destroyed. These tiers are denoted by the colour scheme below with the yellow brick requiring one hit to destroy and the blue brick four hits to destroy. The colour of the brick changes when hit to indicate how many more hits are needed for it to be fully destroyed. Each colour change awards 10 points, while a destroyed brick awards 35 points.
There are also different kinds of power ups which provide different abilities as listed in the image below. The catch, however, is that not all power ups are good for the player. For example, the bomb will freeze the paddle (not allowing it to move) for five seconds. This variety of power-ups will provide an additional bit of challenge to players because they will need to dodge certain bad power-ups while trying to catch the good ones.
BrickOut is a web based game developed with TypeScript and Phaser 3. I set up an NPM development environment for the same projects, which uses Webpack to bundle all the different scripts and convert it to a single JavaScript file which can be used for distribution. In this case, this is the file that is used to run this game here.
The main focus for this project was to learn about Phaser 3 and TypeScript development, which is why I kept the game genre very simple. The project uses a strict object oriented approach, where each item in the scene you see is an object with its own properties and methods. These objects reside in the Objects folder, and all have a very similar method structure, which complements the modular structure of the entire codebase. By having similar method signatures, like reset(), init(), disable() and more, it becomes more convenient to use and call these methods, especially when there is a need for collaboration amongst other developers. Some classes also contain methods for the core logic of the game, for example, the Brick class contains a method which describes the colour changing logic of the brick when hit, as discussed earlier. There is also a helper object script, which contains some generic helper functions which can be imported and used throughout the project.
All these objects are then instantiated in a scene script, called main-scene.ts. Residing in the Scenes folder, this script creates the scene by loading all the resources and then instantiating the various objects in the objects folder. This scene also defines the winning and losing logic, which makes the game playable. There is only one level in this game which starts when the game is loaded, however, the board is randomized, which makes for different experiences for each player and still enables them to play the game more than once.
The game.ts file uses the Phaser 3 API to instantiate a game object and load the scene in main-scene.ts. This type of structure enables easy addition of more scenes in the future.
All the code in these files is clear, concise and well documented. Feel free to check it out for yourself and suggest improvements and feedback!
All the assets in this project, except for the brick wall sample, were designed by myself. The whole project uses a cartoony design scheme. This scheme fits the brick breaker genre well and makes the game visually appealing and easy on the eyes.
The design scheme mainly describes a wooden board nailed to a brick wall, on which the game is set. Heavy strokes and darker coloured borders complement this scheme well and add to its cartoony feel. There is also a plethora of different colours popping out from everywhere, which makes the game aesthetically pleasing. This huge colour palette also makes for good visual indicators which indicate the different tiers of bricks and make the power - ups clearly distinguishable.
My Behance page for this project also describes future concepts and ideas, which can be implemented in the game. These concepts include a user interface (like a settings or a login screen) and generic icons that can go well with this design scheme.
I hope that you enjoyed learning about this project as much as I enjoyed making it. As mentioned before, I welcome feedback and suggestions for improvements on all aspects of the game!
What was your high score?
