Finally, the day has come. It has taken us some time to nail down the basics of using an HTML canvas element in Part 1, build an animation loop in Part 2, and using both to set up our gamespace in Part 3. Today’s installation will hopefully be a bit more satisfying. We get to make a thing that does things and we can see those things change! In this part, we are building the game object which the player controls; our titular Slug.

Photo by Wolfgang Hasselmann on Unsplash

Almost all of our code today is going to be in the function we’re going to…

Photo by Jose Castillo on Unsplash

So far, we’ve touched on how to draw on an HTML canvas and how to create a simple animation loop with requestAnimaitonFrame(). Paired with our foundational JavaScript knowledge, we are now in a prime spot to start building our game! In this installment, we’ll be setting up everything that we’ll need to start dropping game objects into our game. Now that we’ve covered the very basic rendering tools, we’ll be getting a bit more specific and actually design our game. I’m basing mine off a classic game which made a resurgence in the late 90s thanks to NOKIA. I’m calling…

So, last time we figured out how to add some simple shapes to an HTML canvas element. But perhaps afterward we were feeling a bit underwhelmed; a salmon-colored rectangle on a white screen does not a AAA video game make. In this article, we’re going to look into how to breathe some life into that little box by adding some movement with requestAnimationFrame().

The Set-Up

Before we dive into what requestAnimationFrame() does and how we can harness its powers to render animations, we have some work to do. If you are following along with the tutorial, we will work with the directory…

Photo by Sigmund on Unsplash

Who doesn’t love video games? Well, lots of folks…but as a fledgling developer, building a video game is quite an exciting, if a bit daunting prospect. Still, by breaking it down into manageable chunks, let's see if we can’t get something working. I aim to look into the first few steps of making a browser game using only HTML, CSS, and JavaScript. It's gonna be messy, it's gonna take some research, but at the end of the day, if we’re pernicious enough, it just might work. Join me with the first topic: Understanding the basics of canvas elements in Html.

Getting Started With Canvas

Danny Irwin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store