🎮 Creating a JavaScript Game
A somewhat morbid platformer game
In this post I go into how a tedious web form led me to making a silly little platform game in javascript. I'll explain how I made the game and the problems I ran into. Then if I'm a good blogger I will have the game hosted somewhere for you to play it. Feel free to skip the story and go straight to the game if you want.
📋 The Tedious Web Form
This is back around 2018, I was new to my first IT job where I worked the front desk to a datacenter. Part of my duties were to do a shift walk around the datacenter twice a day. Then at the end of each shift walk, I logged into a website and filled out a form to document the walk. The form consisted of probably 43 checkboxes. So it was very tedious to manually click all boxes twice a day.
🛠️ Automating the Form with JavaScript
At this time I had practically zero programming experience. Maybe some bash shell scripting and some powershell scripting. I knew of the developer console (image below) in the chrome browser though and that you could manipulate websites with it. I figured there was a way to write a script that would check all the boxes for me. I started trying to reverse engineer what it was I was seeing inside the dev console. I looked up articles and videos online, but ultimately my Brother who is a software engineer helped me write the script. I could then just paste the script into the console and it would check all the boxes for me.
🎯 Learning JavaScript
This led me to want to learn more about Javascript and I started going on w3schools and looking at courses. It was there that I found a tutorial on how to make a game with javascript. So I got the idea that I would learn javascript through making my own game. I copied the code from the tutorial game and started modifying it to my own. That's what led me to creating the game I'm going to show you.
🕹️ Creating My Own Game
The idea for my game was simple, I was going to make a 2D platformer, certainly not inspired by any other famous 2D platformer out there. But my game was going to have a somewhat morbid twist. In addition to jumping on top of enemies to kill them, there would be a powerup that would just give the player a gun.
🧩 The Challenges of Game Development
Making this game was incredibly hard, game development and software development as well, takes a lot of time even with modern frameworks or physics engines. Everything you see and do has to be accounted for, nothing is a 5 minute coding task. Building the logic for collision detection on the player was probably the hardest. Accounting for if the player hits the ground vs a wall vs an enemy vs a block etc. took so much mind crunching thought. I still never got it perfect, sometimes the collision detection doesn't work quite right and also I ended up with these long If Statements that would check for all the different collision scenarios.
if (piecebottom >= platformtop && piecetop < platformtop && pieceright > (platformleft + piece.speedX) && pieceleft < (platformright + piece.speedX)) //piece hits platform top
{
piece.y = platform[i].y - piece.height;
piece.speedY = 0;
piece.gravitySpeed = 0;
skip = false;
}
if (pieceleft < platformright && pieceright > platformright && piecetop < platformbottom && piecebottom > (platformtop + 0.2) && skip) //piece hits platform right
{
piece.x = platform[i].x + platform[i].width;
piece.speedX = 0;
}
if (pieceright > platformleft && pieceleft < platformleft && piecetop < platformbottom && piecebottom > platformtop && skip) //piece hits platform left
{
piece.x = platform[i].x - piece.width;
piece.speedX = 0;
}
🐛 Bugs and Unfinished Features
The game isn't completely finished, I never added any powerup animations and it still has some bugs. For instance when you jump on top of more than one enemy the velocity applied back upwards on the character gets exponentially bigger. Also there's this kind of a hack to the game where the enemies spawn randomly in a zone above the ground. The spawn zone doesn't touch the top of the game area and so you can push the bricks upward in a staircase and build yourself up above the spawn zone, where you can effectively sit indefinity. This is pretty hard though because when you are passing through the spawn zone, enemies have the chance to spawn directly on you and kill you instantly.
🎉 Play the Game
I got the game working on this site. If you would like to play the game here it is, beware its not really mobile friendly. Run from enemies, jump on them to kill them and hit the bottom of blocks to randomly get a gun and 10 bullets.