Want to learn about game code? Or JavaScript? Or how a webpage loads JavaScript that can interact with the webpage?
How about we put all three together, we can explore how JavaScript and a web page can interact with a fun example project to help us explore how this works – let’s make a game!
Please note: Before we start, I would like to first acknowledge that I did not create these character image animations or level sprites used for this project. I have downloaded them previously as a free-to-use resource and have utilised them in educational and experimental projects, though nothing commercially, I do not own these images. I would love to give the artist a mention and I will do when I can locate the name of the original artist, these animations are excellent and have provided a lot of practical use when figuring out the application of game-mechanics in a JavaScript game.
To the original artist of these images, thank you so much. Please send me an email if you happen to come across this and let me know who you are, and if you are happy for these to still be used in this manner.
Making a game in JavaScript Pt 1. Introduction and JS Game Project Basics
I am making a game in JavaScript.
I am doing this for a few reasons.
- In the spirit of contributing knowledge, this should be an easy progression to follow along with and learn the basics of coding some game mechanics, controlling a character and actions, and interactions with a level or environment. This is an educational project.
- An example of capability and capacity, this can undoubtedly demonstrate coding style, architectural choices, and attention to detail. And just as important, I can learn from the challenges and limitations a JavaScript game project will face and learn what can be done to overcome these.
- If this proves to be a practical project or demonstrates a reason for pursuing this avenue further beyond prototyping and education, perhaps there is something there to be explored.
- Games can be fun, and what better way to learn some of the basics of coding than to dive into creating your own playable game in a very quick to learn and simple process to get started.
Firstly, the absolute basics and a glossary of terms that will be used when describing the steps for this project. Feel free to skip ahead if you understand the basics of coding and/or JavaScript, this step is for anyone that has never written code before.
Keyword
A JavaScript code word, or a word used in JavaScript as part of the coding language, i.e. using ‘var’ when declaring a variable, var is a Keyword, simile ‘let’. Eg.
var x = 5;
let x = 5;
Here, var and let are keywords, used to signify that you want your variable named ‘x’ to equal 5.
Variable: A container for storing a value in. We give the variables a memorable name so that we can easily call the one we want as we need to make changes. Example:
var PlayerSpeed = 2;
The keyword var lets the JavaScript code interpreter know that we are creating a variable, we are calling it ‘PlayerSpeed’, and we are giving it the value of ‘2’ units, or “letting PlayerSpeed be the equivalent of the number ‘2’”.
An example of why we do this:
// To move a player
PlayerPosition = PlayerPosition + PlayerSpeed;
Here, the player position could be any number. Let’s use the numbers we used earlier:
let PlayerPosition = 5;
let PlayerSpeed = 2;
PlayerPosition = PlayerPosition + PlayerSpeed;
This means PlayerPosition will now equal 5 + 2 = 7;
So now, the PlayerPosition has updated, it is now 7. What happens if we loop over that line of code and run it again?
PlayerPosition = PlayerPosition + PlayerSpeed;
This time, PlayerPosition will now equal 7 + 2 = 9. The PlayerPosition has updated increasing by the 2 units of PlayerSpeed. And again:
PlayerPosition = PlayerPosition + PlayerSpeed;
PlayerPosition now equals 9 + 2, which updates the PlayerPosition to 11.
As it is updating and increasing the position by the speed, we can see if we were to now draw an image at the “PlayerPosition”, the image location for the player would increase as the “PlayerSpeed” is added to the “PlayerPosition”. And the reverse is also true, if we wanted the PlayerPosition to head in the opposite direction, we could change the direction of the speed.
To change the direction, we multiply the speed by negative one (-1).
PlayerPosition = PlayerPosition + (PlayerSpeed * -1);
Which would now be, PlayerPosition = 11 + (2 * -1)
= 11 + -2
= 11 – 2
It is the same as ‘negative speed’, and while we aren’t really applying ‘negative speed’, we are moving the character in the opposite direction. It is like reversing a car, or it can also be used to have a character run in the opposite direction.
Function: A function is a collection of code written so that you can re-use or perform a repeat of the same operation, without rewriting the same code each time. To use the example from above, each time you want to move the player, you either increase or decrease the position with the speed:
PlayerPosition = PlayerPosition + (PlayerSpeed * Direction)
// Direction is -1 or 1, backwards or forwards.
An easier way to write the above code each time, would be with a function. The function could move the player position, by a given amount. We could simply ‘pass’ to the function, the amount we want to give. And since we know + is increase, – is decrease, we could pass the function either a positive or negative value, depending on whether we want to increase or decrease the position.
function MovePlayer(velocity) //We use the term velocity, because it implied speed & direction (+/-)
{
PlayerPosition = PlayerPosition + velocity;
}
MovePlayer(-2); //Add -2 to the PlayerPosition
MovePlayer(2); //Add 2 to the PlayerPosition
MovePlayer(PlayerSpeed); //Add the PlayerSpeed value to the PlayerPosition)
If we use the above example to add the PlayerSpeed, now we can set the PlayerSpeed to be whatever we like and call the “MovePlayer(PlayerSpeed)” function to move the player according to the setting of the player speed.
Example: //Not real code but you get the idea – “PSUEDO”Code 😊
If(key.LEFT is pressed)
Direction = -1;
Else if (key.RIGHT is pressed)
Direction = 1;
Else
Direction = 0;
var PlayerVelocity = PlayerSpeed * Direction;
MovePlayer(PlayerVelocity);
Some of you may have figured out already, this is player movement across only one axes, back and forward, or left and right, but not more than two directions. We are currently fixed like on rails to just go back and forward, or side to side.
This is where the coordinate system comes in.
Cartesian Coordinates
2D: x and y (horizontal and vertical / width and height)
3D: x and y and z (horizontal and vertical and depth / width and height and depth)
Depending on the game you are intending to make, or the type of application you are making, you will use a mix of the above properties for all your images. A 2D game, as an example, may still use a limited range of depth to determine which image appears in front of another when they are taking up the same screen space.
For a 2D game, and for this project, I am using 2D x and y predominantly. So a position will be in the form (x, y).
// x is horizontal position and y is vertical position – the units x and y are relative to the pixels on the
// canvas. If the canvas is 800 x 600, that is width = 800, height = 600, the position is relative to (0,0)
// which is the bottom left corner of the canvas, with (800,600) the most upper-right corner of the
// canvas.
PlayerPosition = {x: 5, y: 5};
We can access the x and y parts of the position individually.
PlayerPosition[x] = PlayerPosition[x] + PlayerSpeed[x];
Canvas: The Canvas is a HTML element. I won’t go into in-depth explanations for HTML elements or the HTML tags for each of the elements here, but I will make it simple enough to follow for the purposes of getting the game loaded onto a web page.
For this project we will have:
- Game code – handled with JavaScript. And
- A webpage or HTML page – a website with a single ‘page’, to display a Canvas. The canvas is just as it sounds by the name, a blank white space for displaying image content.
The empty canvas sits on a webpage, which for most of the beginning of this project the web page will be empty other than the canvas object.
The JavaScript will determine what images to load and where to place them on the canvas, the web page will automatically refresh the canvas and take in the user input from keyboard or gamepad, which when detected in the JavaScript code will determine what images and where they should be put on the canvas, which the web page will update and…
Sounds like we are going in circles here, which brings us to the next part – The Game Loop.