I Built a Game in Vanilla JS And I Didn't Know How to Code 3 Months Ago

Well, I just knew the basics and I knew as well that I wanted to learn to code, no matter what, as I explained here.

After some time trying to learn it by myself, I figured out that would be better for me to sign up for a coding bootcamp in my hometown.

For those who just want to play the game and are not interested on the story on how it was made, here it is!

And oh boy! Coding almost every single day, with LABS (homework) to do, teachers available to reach for whenever I need some help or guidance and a group of other students that are in the same situation as me has really made a difference on my learning pace.

But I'm not here to tell you -if you're learning how to code- that you must sign up for one of these, everyone has different oppinions about them.

I'm here to explain what I was able to made after the first module, just learning HTML, CSS and Javascript.

The final project of the module was a game that we had to develop on 2 weeks. We had complete freedom on how to do it, the one and only rule was not to use any framework.

Here, in Spain, when you have to get your driving license, you must pass a medical test. This test is kind of boring, just evaluating how well you see and hear, but it had as well one thing that made it very enjoyable: a little coordination video game.

The player is represented by 2 dots (one for each hand) that move only in horizontal.

It consists on two little roads viewed from above which sudden turns to the right or left, with the purpose of making it a challenge to maintain both dots in the middle of the road.

So, the purpose of the game is to avoid stepping out of the way.

The game will finish at a certain point, and then a game-over screen will show the percentage (%) of the time that the player stepped out of the way, from the start to the end.

I never played that kind of game before and I've never played it after, but it stuck on my head since then, some years ago.

So I decided to re-make it.

First of all, I tried to organize all the work that had to be done in a Readme file on Github:

The game state will consist on just 3 screens:

• The Start Screen --> Title + Start button
• The actual Game Screen --> Instructions + Play button --> Javascript Canvas
• The Game Over Screen --> Result + Play again button

Then the development of the MVP (minimum viable product) for the actual game will be like this:

• Create a dot and show it on the screen.
• Move dot horizontally --> Click on right or left arrows to move player on the Canvas.
• Create the road --> First, a straight line. Then, add turns, right or left.
• Check collision (when the dot is stepping out of the road).
• If collision --> Sum time that the dot is out of the way --> Change colors.
• End game at a certain point (? seconds).
• Replicate it for both hands.

Then I had other kinds of stuff I wanted to add if I had enought time, like:

• Adding background music and sound effects
• Make it beautiful with CSS

It was actually my first time making a game, my first time using Canvas and my first time trying to organize my code in a kind of Model-View-Controller way (MVC).

If you don't know, Canvas is represented by a square that allows us to "paint" things on the screen with Javascript and the Model-View-Controller is a concept that helps us in not having all the code in a single huge file, but separating concerns and making it easier to read and maintain.

I reached out to the conclusion I had to create these files:

• A index.html to place the HTML tags and some content.
• A stylesheet.css to put the CSS.
• A main.js that will act as the view, getting data from and updating the HTML.
• A game.js that will act as the controller and model at the same time, having the logic inside.
• A player.js and path.js that will create those other dynamic and replicable parts needed.

For the sake of simplicity, I didn't even host the game in any place, I've just linked Netlify to my Github repo to deploy it fast and easy. It's a great tool!

On Github, I started for the first time to use branches. Having a branch means creating like a "clone" of all your code files, and that allows you to change it and test it without worrying too much about messing up. Once you have something that works, you can "merge" this test branch/es with your main code (usually called the "master").

I decided to call my game 'Coordinator 2000' in a retro reference and I started to code.

Showing a little square on the screen was the easiest part. I placed on the HTML file the canvas tag:

<canvas id="coordinator" width="1200" height="600"></canvas>

On the main.js file, "take" the canvas:

let canvas = document.getElementById('coordinator');

Give it a context, so it knows what kind of a drawing board is:

let ctx = canvas.getContext('2d');

And initializing the class 'Game' with that property:

let game = new Game(ctx);

Inside the game.js file, a method to draw it:

_drawPlayer(player) {
    this.ctx.fillStyle = player.color;  
    this.ctx.fillRect(player.x, player.y, player.width, player.height);
  };

And so on...

I'm not diving into the code itself (you can see it here) because it will take ages to describe what's going on in every line and what happened in every step during those 2 weeks, but I'm commenting the highlights:

I first thought that I should create 2 lines to define the road and then move them in some way, until other student from my class told me that maybe would be easier to just create an array of little rectangles of the same color, one on top of each other to make the road.

Then, moving the road to draw the turns would be as easy as adding or subtracting the X position when adding new rectangles on the array.

I ran into a little problem, as the array was getting bigger and bigger the browser started to show signs of underperformance, almost freezing at some point, so I just added a function that was deleting the rectangles from the array as soon as those stepped out of the canvas:

_deletePath(array) {
    for (let i = 0; i < array.length; i++) {
      if (array[0].y >= this.canvasHeight) {
        array.shift();
      } 
    }
  }

Also, I didn't know how to make the turns dynamic, so I just harcoded them:

_generateTurnsR() {
  let lastItem = this.rightPathArray[this.rightPathArray.length - 1];

  if (this.frames >= 0 && this.frames < 160) {  // turn right 
    this._generatePathR(lastItem.x += 1); 
  } else if (this.frames > 155 && this.frames < 220) { // turn left 
    this._generatePathR(lastItem.x -= 1);
  } else if (this.frames > 215 && this.frames < 420) { // straight
    this._generatePathR(lastItem.x); 

Adding a frames counter on the 'update method' allowed me to place turns every few seconds, just adding or subtracting the X position of the little rectangles.

During those 2 weeks, there was some days that I was extremely frustrated, as I coudn't figure out how to do things. Luckily, I had Alex, a teacher assistant available, that sometimes helped me pointing to the right direction.

At the end, there's still some bugs (if you notice playing the game, when the left dot steps out of the road, the border doesn't become red, as the right one does), some bad practices (the timer is a GIF image, instead of code, because I didn't have time left to do it properly) and the code, after being refactored by me a few times, is still sloppy and full of don't-know-how-to's (for example, I did all the CSS as quickly as possible, without taking into account screen sizes or responsiveness).

Still, is the first "thing" created by me coding all the lines, one by one. In the past, I created a few webpages, but all of them where using Wordpress and the sensation is not the same. This is a thousand times more exciting!

And now... yes! you can play it here! :)