Spicy Yoghurt tutorials header
Create Conway's Game of Life on the HTML5 canvas
JavaScript | 25 January 2024

Create Conway's Game of Life in JavaScript

Learn how to create Conway's Game of Life on the HTML5 canvas with JavaScript. Implement the game rules and check which cells will live or die each generation, to create your own simulation of life!

Action and reaction in physics
HTML5 game | 20 March 2021

Collision detection and physics

Perform collision detection and react with physics, using JavaScript. Check for overlap between shapes, apply hitboxes and calculate new velocities. Make it more natural with object mass, gravity and restitution. By the end of this tutorial, you'll have a basic physics simulation running in your game.

Store data
JavaScript | 21 May 2020

Store data with HTML5 local storage

Use the HTML5 local storage to store and read data in the browser. Learn how to store entire objects and how to manipulate data in the storage object. Follow this tutorial to learn all about storing client-side data with JavaScript.

Frame by frame animation
HTML5 game | 5 May 2020

Draw images and sprite animations

Draw your own images on the canvas and learn how to stretch, scale and rotate them. Use clipping on sprites to create sprite animations. By the end of this tutorial you can draw your own images and animations on the canvas and use them in a game.

Prepare a blank canvas
HTML5 game | 27 September 2019

Set-up an HTML5 canvas

Set-up an HTML5 file with a canvas. Learn how to scale the canvas and perform drawing operations. By the end of this tutorial you can draw your first graphics to the screen.

Highlighted tutorials

Action and reaction in physics
HTML5 game | 20 March 2021

Collision detection and physics

Perform collision detection and react with physics, using JavaScript. Check for overlap between shapes, apply hitboxes and calculate new velocities. Make it more natural with object mass, gravity and restitution. By the end of this tutorial, you'll have a basic physics simulation running in your game.

A looping in a roller coaster
HTML5 game | 9 March 2019

Create a proper game loop

Create a proper game loop in JavaScript and learn about frame rates. Measure and display fps to see your loop in action. Request animation frames and have your own loop running by the end of this HTML5 game tutorial.

Tutorial series

Develop an HTML5 game

HTML5 game

Learn how to create your own game in HTML5 and JavaScript. Follow the tutorials and get to know about all the core principles of creating a game.

Development Tools

Animation Tool

Easing functions made easy

Eased motions are a great way to spicy up your animations. Use this tool to visualise easing functions and make your animations come to life.

All tutorials

Create Conway's Game of Life on the HTML5 canvas
JavaScript | 25 January 2024

Create Conway's Game of Life in JavaScript

Learn how to create Conway's Game of Life on the HTML5 canvas with JavaScript. Implement the game rules and check which cells will live or die each generation, to create your own simulation of life!

Action and reaction in physics
HTML5 game | 20 March 2021

Collision detection and physics

Perform collision detection and react with physics, using JavaScript. Check for overlap between shapes, apply hitboxes and calculate new velocities. Make it more natural with object mass, gravity and restitution. By the end of this tutorial, you'll have a basic physics simulation running in your game.

Store data
JavaScript | 21 May 2020

Store data with HTML5 local storage

Use the HTML5 local storage to store and read data in the browser. Learn how to store entire objects and how to manipulate data in the storage object. Follow this tutorial to learn all about storing client-side data with JavaScript.

Frame by frame animation
HTML5 game | 5 May 2020

Draw images and sprite animations

Draw your own images on the canvas and learn how to stretch, scale and rotate them. Use clipping on sprites to create sprite animations. By the end of this tutorial you can draw your own images and animations on the canvas and use them in a game.

Prepare a blank canvas
HTML5 game | 27 September 2019

Set-up an HTML5 canvas

Set-up an HTML5 file with a canvas. Learn how to scale the canvas and perform drawing operations. By the end of this tutorial you can draw your first graphics to the screen.

Draw on a canvas
HTML5 game | 27 September 2019

Draw shapes, paths and text

Draw graphics on the HTML5 canvas using shapes and paths. Create rectangles, circles, lines, triangles and more complex shapes using SVG paths. By the end of this tutorial you can draw your own graphics and text on the canvas.

Random numbers like dices
JavaScript | 17 September 2019

Generate useful random numbers in JavaScript

Learn all about generating random numbers in JavaScript you can actually use. Get numbers between a certain range, generate random integer- and boolean values and learn about the use of seeds.

HTML5 game development tutorials
HTML5 game | 9 March 2019

Develop an HTML5 game

Create your own game with HTML5 and JavaScript. Learn about game loops, animations & sprites, collision detection, physics and user input. Follow this tutorial series and end up with a basic HTML5 game of your own.

A motion blur
HTML5 game | 9 March 2019

Create a smooth canvas animation

Create an animation on the HTML5 canvas and make it run smooth, no matter the frame rate. Learn how to apply time and easing functions. By the end of this tutorial, you can create a basic animation with the use JavaScript.

A looping in a roller coaster
HTML5 game | 9 March 2019

Create a proper game loop

Create a proper game loop in JavaScript and learn about frame rates. Measure and display fps to see your loop in action. Request animation frames and have your own loop running by the end of this HTML5 game tutorial.

Vector potion bottles drawn with Inkscape
Inkscape | 24 September 2018

Draw vector potion bottles

Learn how to draw vector potion bottles with this Inkscape vector drawing tutorial. You will make a potion bottle with a cork and special content. On the way, this tutorial will teach you how to use Inkscape as a vector graphics editor.