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!
Casual games
Create your own HTML5 game
Learn how to create a game in HTML5 and JavaScript with this tutorial series. Start with a blank canvas and work through the core principles of game development.
Get started!Use our free tools
Handy helpers for your animations, your files and your to-do list.
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
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.
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.
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.
Store data with HTML5 local storage
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
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.
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.
Draw lines, shapes and text
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.
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.
Our game development tutorials got a big update
We've reworked all our game development tutorials, and together they now have more than 100 live examples to play with. Tweak an example and watch its code change along with it, or write your own code in a playground and see the result right away. Our easing tool and the homepage got a makeover too.
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?
Pixi Pop 1.2 update - Good news for new players
Pixi Pop version 1.2 is out! This new update brings interface changes to make the game more fun and easier to use. Check out this article to find out what's new.
