Learn to Code via Tutorials on Repl.it!

← Back to all posts
Simple JS Game Tutorial
h
MattDESTROYER

Simple JS Game Tutorial

In this tutorial you will learn the fundamentals of game development and how to create a simple, yet fast, reusable/adaptable game from scratch with JavaScript.

Before we get into making an actual game, first we must know what a game requires.

Their are a few main things a game requires:

  • Input
  • A main loop
  • Rendering (which should generally occur in the main loop, but is somewhat of a seperate operation)

Alright, we know the basic concept of making a game, so let's get started!

First of all we need something to draw to, the HTML canvas is the best tool for this. In this tutorial we will only use JavaScript, however you could easily add a canvas tag in the body of your HTML file.

Alright, next we're going to want to have access to user input. To do this we are going to add some event listeners to the document.

Now to explain what we've just done a little. We have created an object called Input and used event listeners to feed it all sorts of information about user input. We can use Input to check if a key is pressed:

Now we've got user input and somewhere to render. All we have left to setup is the loop! The fastest and best method for this is using a recursive requestAnimationFrame function:

To start our game we need to call loop:

So far nothing happens, that's because we haven't added anything to our loop yet. There are three things we want to do in our loop (if you are familiar with Unity, this follows the same general structure); FixedUpdate, Update, and Render.

Right now these functions are no different, but, we will make a key change that will differentiate FixedUpdate and Update.

Now we will only update the frame around every 16 milliseconds, which results in approximately 60 updates per second. Update is a consistant function, we will want to handle things like movement here, FixedUpdate will continue to run every frame which will make it good for handling things like collisions. Now it's good and all that we have these functions in our loop, but they don't actually exist yet. Let's start making our game! For this tutorial we will make a simple maze escape game. To make it easier we will use a grid (formed by a two dimensional array) as the actual maze and render the content of the grid. We won't actually need FixedUpdate to make this game, but it can definitely come in handy so don't forget about it!

(A short explanation of some of the things used in the code):

ctx is the context we got from our canvas. We use ctx to draw on our canvas. ctx has a number of properties to allow you to draw different things on the canvas. In the game above I use three: clearRect(x, y, width, height);, fillRect(x, y, width, height);, and fillStyle = colour;.

clearRect(x, y, width, height); is pretty self-explanatory, it clears a rectangular area on the canvas based on the input x, y, width and height.

fillRect(x, y, width, height); is also pretty self-explanatory, it fills a rectangular area on the canvas based on the input x, y, width and height and the current fillStyle.

fillStyle = colour; is a little different, it is not a function. Setting fillStyle to a (CSS) colour changes the colour that 'fill actions' like fillRect will use to fill areas of the canvas. fillStyle can be set to any CSS colour; "red", "rgb(255, 0, 0)", and "#FF0000" are all valid.

The CanvasRenderingContext2D (which we have named ctx) can do so much more, so check out the documentation on mdn if you want to find out how else you can use it.

Voters
ermidoodle
Joy-port
DENASILFA1
CodeMaster007
ruiwenge2
JBloves27
FnuHadia
MatthewAlfandre
VulcanWM
ch1ck3n
Comments
hotnewtop
cesardegrote

how do i add a background without it following the camera???

MattDESTROYER

@cesardegrote You can change the background colour of the canvas:

You can also just draw stuff in the Render function, which will not automatically draw stuff based on where the camera is.

Either of those options will create a static background that doesn't move when the camera does.

ruiwenge2

nice tutorial :)

MattDESTROYER

@ruiwenge2 Thanks :D

JBloves27

Great tutorial!

MattDESTROYER

@JBloves27 Thanks :)

JBloves27

No problem! Are you planning on creating more tutorials like these? @MattDESTROYER

MattDESTROYER

@JBloves27 Well I guess so... depends on if I get an idea that I think will help people and decide to make a tutorial :)

JBloves27

Ooh, okay! Feel free to message me if you want an idea, any help, or want to send me a link! @MattDESTROYER

MattDESTROYER

@JBloves27 I will keep that in mind :)

VulcanWM

Really nicely explained!

MattDESTROYER

@VulcanWM Thanks :D

VulcanWM
VulcanWM
VulcanWM

for me it shows that it starts in 12 hours.
that's 12pm for me as well
how does that work? @MattDESTROYER

VulcanWM

yeah that’s weird @MattDESTROYER

VulcanWM

Screenshot of my screen

@MattDESTROYER

VulcanWM

same tho @MattDESTROYER

VulcanWM

same tho @MattDESTROYER

IMayBeMe

Really good explanation of some concepts in addition to the code. Great tutorial!

MattDESTROYER

@IMayBeMe Thanks :D