If you are anything like I was, you came into the programming world with some kind of fantasy of making your own video game.Maybe dreams of making something on the PS360 or the Xbox Advance. But you don’t have to limit yourself to waiting until you work for a videogame company. You can make something right now for the browser you’re using right now. So here is a quick example of making a browser game using HTML, Canvas, Javascript and some knowledge of the Atari VCS(aka Atari 2600).

First thing we have to do is set up our base html page and set up a section for our screen. Our screen is basically going to be the tag. After we create the html, we want to make up a js.file and make sure the website brings it to the page.Because we are going to keep referring to the element, you could make a basic selectQuery that will find a parent tag and append one to the page like the attached example. When we create, we need to feed it a width and height so it knows how big to make the canvas. The numbers inputted are the pixels which should come in handy. This canvas will ultimately act as our screen displaying the “graphics” of the game.

After setting up our js file and creating the canvas. We will want to create a series of variables you will end up using throughout the game. When you create the variables, be mindful that you will want some of these variables to change (and often), while you will want others to always stay the same.

Don’t be think that just because you are setting these down now, that these will never change or that you won’t be adding more to it. you will find yourself darting back up to add some more.

After this, you should start to make a few things that will “govern” the game. This includes making a few Event Listeners that are listening to button presses. For this game, we want to make a game where the player can move their “sprite” up and down to interact. looking at the event listeners, you will notice a few if statements and us setting an earlier declared variable to either true or false. Let’s breakdown what we are doing there

1) We are doing event listeners on key up and down. This makes it so that it can do 2 different things depending on the user pressing a button or releasing it

2) Inside the event listeners we have an if statement checking to see specific buttons are pressed and running some code of that. This makes it so we can specify the user’s control and not get bogged down by other buttons outside of our “gamepad”

3) Inside of that we are now switching the values we declared above. Doing it this way will help out further down, but ultimately, it may not be a good idea to have all those the later logic we are going to be using sitting inside the event listener

#programming #coding #canvas #javascript #games