Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: canvas

Quick Tip: How to Make a Game Loop in JavaScript image/svg+xml

The “game loop” is a name given to a technique used to render animations and games with changing state over time. At its heart is a function that runs as many times as possible, taking user input, updating the state for the elapsed time, and then drawing the frame.

In this short article you’ll learn how this fundamental technique works and you’ll be able to start making your own browser based games and animations.

A good introduction to writing a game loop with JavaScript and the HTML5 canvas element.

HTML5 Canvas Particle Emitter

A while back, I had a lot of fun creating some basic HTML5 canvas particle emitters. I don’t know why, but I love hacking on these things. They’re not particularly useful, but they are kind of mesmerising. Below is the first one I created — view full screen here.

See the Pen HTML5 Canvas Particle Emitter by Philip Newborough (@corenominal) on CodePen.

HTML5 Canvas Sprite Animation – Alien

Tonight, I made an attempt at creating a HTML5 Canvas sprite animation. The process is actually quite simple, if not a little fiddly. I figure that I’ll need to get good at this, if I want to finish my game. Anyhow, an example of one of the sprites I created can be seen below. The sprite loops through 4 states, using a spritemap to show a different alien for each state. I’m thinking of using this one as part of my game’s intro.

See the Pen Canvas Sprite – Alien Loop by Philip Newborough (@corenominal) on CodePen.

Legend of Canvas image/svg+xml

An introduction to HTML5 Canvas using the Legend of Zelda. Recorded at Fluent 2016 in San Francisco. Presented by Rich McLaughlin.

A good introduction to game development, the slides are here. I’ve not done any work with the canvas element for a few months, but after watching this, I think I’ll get back into it. I’ve got some partially finished games and it would be good to get them finished.

HTML5 Canvas Blocks #4

The thought of having to choose a colour for something does not sit comfortably with me. I have read all about colour theory, like a million times, but I still feel mentally paralysed when faced with having to pluck a colour from the rainbow. It’s a sickness, I tell you.

So, anyhow, I currently find myself in said position. Normally, my first line of defence is to revert to good old black ‘n’ white, however, this time I’ve made a mental promise to myself to go wild and choose some actual colours. To be clear, I’m not planning on using the colours below. I think they’re a little too wild, but I do the like the combination. The colours are those featured on the Beastie Boys album art for Hot Sauce Committee Part Two.

See the Pen HTML5 Canvas Blocks #4 by Philip Newborough (@corenominal) on CodePen.

Or maybe I should?