Our game development tutorials got a big update

Some of our tutorials are more than seven years old. Back then, they had plenty of text and code, but only a few examples you could actually see running. And reading about how a game draws one frame after another is one thing. Seeing it happen in slow motion is quite another. So over the past few months, we went through all of our game development tutorials and gave each of them a fresh look.

More than 100 live examples

The biggest change is the number of live examples. There are now more than 100 of them, three times as many as before this update, and you can click, drag or tweak most of them.

Here are a few of our favorites:

• Frames you can see - Slow the JavaScript game loop down to a few frames per second, and you can see every single frame.
• A canvas playground - Draw lines, shapes and text on the HTML5 canvas, and open any example in the playground to try it yourself.
• Gravity and bounce - Drop objects in the collision detection tutorial, and change the gravity and how much they bounce.
• New rules for life - Try famous patterns and new variations in Conway's Game of Life, the classic grid of cells that live or die.
• A cookie clicker - See HTML5 local storage at work in a small cookie clicker game that remembers your score.
• 1,000 dice rolls - Roll a die 1,000 times in the tutorial on random numbers, and see how often each number comes up.

A much bigger easing tool

Easing makes things speed up and slow down as they move, so they don't look stiff. We gave our easing tool a huge update too. Every easing function now comes with code for both JavaScript and CSS, and there are lots of new practical examples, like a player jumping onto a platform or a coin flying up to your score counter. The tool also helps you pick the right easing for your game.

A new homepage

At the top of the homepage, a little handheld console now shows our browser game Pixi Pop. Below it, our series on how to make an HTML5 game is laid out as a timeline of TVs, each showing a small demo from one part of the series. And our free tools, like Folder Compare and our to-do list app Scribble, each get their own window, just like on your computer's desktop. Take a look and click around!

A few new features

Here's what else is new:

• Code that follows along - In many examples, the code below the canvas changes as you play, so you can see exactly which line does what. Some even work the other way around: change the code, and the canvas updates right away.
• Copy button - Every code block now has a copy button in its top-right corner.
• Collapsible code - When a tutorial ends with the complete code, that code now starts out collapsed, so you can scroll right past it or expand it when you need it.
• Our own comment section - We used Facebook's comments plugin until Facebook shut it down, so we built our own. No account needed, just your name and your comment.

What's next?

We're not done yet. Our series on how to make an HTML5 game has two brand-new parts: one on keyboard, mouse and touch controls, and one on game states, from the start screen to game over. Next up is a part on sound effects and music, and after that, the final part will bring everything together in one complete game. Is there something you'd like to learn next? Let us know in the comment section below.