All about game development
Spicy Yoghurt is a small game studio. Learn how to make your own game in JavaScript and HTML5 with our free tutorials, full of live examples. Or take a break with our casual game Pixi Pop. And while you're here, check out our free browser tools.
Currently, Spicy Yoghurt is fueled solely by spare time and coffee, so every bit of support is appreciated. Please help keep this studio going by playing and sharing!
Create your own HTML5 game
Learn how to create your own game in HTML5 and JavaScript. Follow the tutorials and discover the core principles of game development.
Get started!Development tools
Use tools that make game development easier.
Highlighted projects
Free pen brushes for Affinity Designer
Available for download
Scribble
Free to-do list and notes app
Easing functions
For JavaScript and CSS
Create life on the canvas
With Conway's Game of Life
Folder Compare
Spot the differences between folders
Set up an HTML5 canvas game
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.
Create a proper JavaScript game loop
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.
Add a start screen, a score and a game over screen
Learn how to add game states to your JavaScript game, from the start screen to game over. Keep score, give the player three lives, pause the game and save the high score. By the end of this tutorial, your bee will be dodging a swarm in a real game.
Add keyboard, mouse and touch controls
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.
Draw images and sprite animations
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.
Collision detection and physics
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.
How to make an HTML5 game
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.
Create Conway's Game of Life in JavaScript
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.
Generate random numbers in JavaScript
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.
Meet Scribble, our free to-do list and notes app
Meet Scribble, a free to-do list and notes app by Spicy Yoghurt. Plan your days and keep notes for your projects, on your computer or on your phone. There's no account to create, and everything you write stays on your own device.
Compare folders and files right in your browser
Spicy Yoghurt has a new free tool: Folder Compare. Point it at two folders and see right away which files were added, changed or removed. Everything runs inside your browser, so none of your files ever leave your computer.
Pixi Pop is now playable in your browser
Pixi Pop has been ported to the web! This classic Spicy Yoghurt game is now playable straight from your browser. No app store needed. Just open a tab and start popping.
Free download: new pen brushes for Affinity Designer
Spicy Yoghurt has released its first brush pack for Affinity Designer. And the good news is, it's available as a free download. With these pen brushes, you can draw on a digital canvas just like you would with a real pen. Try them out now!
Hello Affinity Designer, goodbye Inkscape?
Not too long ago Spicy Yoghurt wrote about the good and the bad of the Inkscape v1.0 beta version. The open-source vector drawing software is now out of beta and officially released to the public. It made decent progress, but was it enough to stay our favorite drawing software?
