The Idea:
Create a game that is a 2D platformer but have some sort of fun mechanic that if later down the line i wanted to make it multiplayer for a a fun interaction with users, have the community build out levels (or generate them dynamically) or even make the game abnormally hard.
The player should be able to jump on platforms to get to the end of the level but the level needs to emphasize that the player needs to change to the correct color (RGB) to match the platform in order to use the platform and this where RGBlock came from.
Controls:
The controls were pretty straight forward. You use the arrow keys and then the keys R, G, B - Although this could have been though of in a better way and make it easier to onboard those that are use to gaming using controls other than the arrow keys. I made this protoype so who ever decides to use this can change it to their will.
I was always fond of 2D games and i never really got on the idea of building games as much as i always spent alot of my time building applications. This in mind made the project actually quite hard, and not because of the programming but more because of the patterns and knowing what is considered a good practice to follow.
Approach:
To keep things short, I was planning on using Classes or more specifically, Interfaces for most of the entities in the game. I wasnt exposed too much but looking at how most of them work they were pretty straight forward and it would make things simple but then i realised i wanted to make a quick protoype and although i could refactor alot of the code, using basic functions that return the objects i need and also functions that mutate the context of the canvas would be more than enough.
The game generally consists of the following entities:
Player
Enemy (very basic)
Platforms
Ground
Example of creating a Player constructor:
Below would be an example object i would use for the player, I would give it basic properties that most of the would be consistent and the same. Most of these wouldnt change and in cases where i needed to actually use the or mutate the data of the Player i would do this on the variable where i made the instance using this object.
function Player() {
this.width = 15;
this.height = 15; // 15 default height
this.x = canvasWidth/2 - 340;
this.y = canvasHeight - 47;
this.speed = 3;
this.velX = 0;
this.velY = 0;
this.isUpKey = false;
this.isDownKey = false;
this.isLeftKey = false;
this.isRightKey = false;
this.isPowerJump = false;
this.jumping = false;
this.playerColour = "#81CAFF";
}When it comes to creating the player one would simply just take the Player object and assign a new instance on a variable and use the variable throughout the game loop accordingly. i.e
var Player = new Player();This will then allow us to do some basic input and change of the players position as well as update the state of the player object accordingly. The same would be done for the Platforms and the Enemies and they will be created on variables and passed to functions that would go and do any sort of checks given the type of the Entity.
The UGLY:
Because this was a quick make and some quick updates was made regarding how it looks there are alot of things that could have been cleaned. If i could build this entirely using classes in this context and then split out some of the methods into separate helper methods (collision detection for an example), this would make the larger scale version of this alot better.
One of the Things i am not fond of is how the levels are built.. Most of the time one wouldnt go to the extremes and each level condition build and place the enitites like it was done in this prototype. This is especially not a good idea as the game is by no means responsive and meant to be played on a device so you would end up needing to do everyhing at a pixel level. Becase the game also uses actual images that was made in paint..
So because the images was made in paint, you end up with a sitaution where the images are just drawn as an instance to the canvas and then each level we need to render this before clearing the canvas and then the platforms are drawn on the images with but made transparent, giving it the effect that the player is actually walking on a nicer looking platform in the game. Not to mention the images had to have resolutions that the canvas had to be a 1:1 map with. This messes up alot of the scalability options for future and performance does take a hit in cases where one hosts this on a server remotely where people need to play it as they will end up needing to down the the image per level.
Nice to have:
In the end, the nice to haves for this could be:
Timer - The idea of the timer would be to make the player have a reason to get to the end of the level, give them a timer that ticks down and the remaining time gets added to the next levels base time. This will make the game fun knowing the levels have limited time and the faster you are the better the future levels will be
Preloading assets / generating levels: In the current case, we are using shapes that are drawn for most of the cases but having the assets preloaded generally and adding loaders could help with the experience and creating levels either through users or generating them procedurally would make the game with the timer mechanic a fun and long game actutally
Responsive - in short, have this responsive or playable on a mobile device would be a nice addition in cases where you would be able to easily port a hybrid native game and attract a lot of new users and the game could be a spin of a sort of 'hyper casual' game
Finishing off:
Feel free to use the Prototype for what ever reason you need and have fun with it. I look forward to hearing and seeing what can be made off this or even the idea built on other game frameworks
Code: https://bitbucket.org/torean_joel/rgblock/src/master/
YouTube Old Demo:
https://www.youtube.com/watch?v=48a4L5Bb60A
In the end this was fun to do, look back at and also see where i was mentally and how i have grown. I will be making some posting on other projects and this was one of the ones i wanted out in the wild.
Thanks for the read and have a good one. Cheers!