Learn JavaScript collision detection for your canvas game. Check if rectangles and circles overlap, and make objects bounce off each other with simple physics. By the end of this tutorial, you'll have a small physics simulation with mass, gravity and restitution. Along the way, you can try every step in a live demo.

Build a smooth JavaScript game loop for the canvas with requestAnimationFrame. Learn about delta time and fixed timesteps, and measure fps with live demos. By the end of this tutorial, you'll have a complete game loop ready to use in your own game.

Simulate a flock of birds in JavaScript with the boids algorithm. Code the three rules of flocking one by one, with a live demo for each step. Then add obstacles and a predator, and give the boids a field of view. By the end of this tutorial, you'll have a flock of thousands of boids running smoothly in your browser.

Learn how to publish your HTML5 game on the web, on game portals, in the app stores and on Steam. But first, look back at the bee game you've built in this tutorial series and play a more polished version of it, complete with source code.

Learn how to add sound effects and music to your JavaScript game with the Web Audio API. Play several sounds at once, control their volume and panning, make a sound a little different every time it plays and create your own sound effects in code. By the end of this tutorial, the bee game from this series will have sound effects and its own music.

Learn how to make an HTML5 game with JavaScript, step by step and for free. Find out how a browser game works, what you need to get started and when a game engine helps. Then follow the series and build each part of your own game.

Learn how to add game states to your JavaScript game, from the start screen to game over. Build a simple state machine without a game engine, pause the game and restart it cleanly. By the end of this tutorial, you'll have a real game with a score, lives and a high score to beat.

Learn how to add keyboard, mouse and touch controls to your JavaScript game. Move a player smoothly with the arrow keys or WASD, drag objects with pointer events and build a virtual joystick for phones. By the end of this tutorial, you'll be flying your own bee through a swarm of other bees.

Create Conway's Game of Life in JavaScript on the HTML5 canvas. Learn the rules, check which cells live or die each generation and draw your own cells with the mouse. Load famous patterns like the glider gun, and get the complete code in a single HTML file.

Set up an HTML5 canvas for your game with JavaScript. Learn how to scale the canvas to fit any screen, without blurry graphics. By the end of this tutorial, you'll have a canvas template to start every game with, and your first graphics on the screen.

Generate random numbers in JavaScript with Math.random(). Get a random integer between two numbers, a random boolean or a random item from an array. Build your own random number generator, shuffle an array, give rare loot a small chance and get the same random numbers again with a seed.

Learn how to use HTML5 local storage to store data in the browser with JavaScript. Store and read strings, numbers and entire objects with setItem() and getItem(), and remember settings and progress between visits. Find out about the limits, the pitfalls and when to use sessionStorage instead.

Create a smooth canvas animation with JavaScript. Learn how to clear the canvas, add motion trails and easing, and keep it sharp on every screen. By the end of this tutorial, you'll be able to create a basic animation with JavaScript.

Build a smooth JavaScript game loop for the canvas with requestAnimationFrame. Learn about delta time and fixed timesteps, and measure fps with live demos. By the end of this tutorial, you'll have a complete game loop ready to use in your own game.

Draw lines, shapes, curves, paths and text on the HTML5 canvas with JavaScript. Try every example in the live playground and save your drawing as an image. By the end of this tutorial, you'll be able to draw your own game graphics and text, with colors, gradients and shadows.

Learn how to draw images on the HTML5 canvas with drawImage(), and turn a sprite sheet into a JavaScript sprite animation. By the end of this tutorial, you'll have a swarm of animated bees buzzing around your game, each with its own hitbox and direction.

Learn JavaScript collision detection for your canvas game. Check if rectangles and circles overlap, and make objects bounce off each other with simple physics. By the end of this tutorial, you'll have a small physics simulation with mass, gravity and restitution. Along the way, you can try every step in a live demo.

Learn how to draw a potion bottle in Inkscape, step by step. You'll draw a round glass bottle with a cork, add shadows and highlights, and fill it with a colorful potion. Along the way, you'll learn the basics of vector drawing in Inkscape.