Recently I have begun to use javascript whenever I need to calculate something. As an example I can mention the Queens Problem (see below). Someone asked me about the problem, and I just had to try to write a program that could find the solution(s). Javascript seemed the quickest way to get a working program, and it's easy to display the results of the program in html. Also, the recent browser wars have made javascript so much faster, so speed is no longer a reason to avoid javascript. This post is really just a place for me to put all of my small javascript projects.

Labyrinth: A javascript game using the HTML5 canvas element. I recommend using the Chrome browser to play this game, though I think it works in the most recent versions of IE, FireFox and Safari as well. The first version of this game was programmed in QBasic back in the 1990'ies. Later, I rewrote the game in Turbo Pascal. It's actually four games in one: Shoot, Catch, Invade and Puzzle. All of the games require two players, but for Shoot, Catch and Invade, one of the players can be controlled by the computer. Shoot: Shoot the other player until he has no more lives. Catch: Catch the other player; the catcher loses when the time runs out. Invade: Convert people to your color - when the time runs out, the player with the most people wins. Puzzle: For this game, the players must work together; the objective is to find each other. I have included a number of predefined maps. Each map is meant for a particular type of game, but you can choose any game type in the settings. I have also included a map editor, where you can create your own maps. Note that your maps are not stored on the server - you have to copy the map code (using the "Save map" function), otherwise your map will be lost when you exit the game.

Queens: A javascript program to find solutions to the Queens Puzzle. Take a look at the "placeQueens" function to see how simple it is to code a backtracking solution finder. Also, check out the 3rd conjecture in my list of unsolved conjectures.

A simple 2D Physics engine: I wanted to play with the new HTML5 Canvas element, so I started writing a 2D physics engine. My goal is to be able to write a simple game. It is still very much in the early phases, but it's fun to play with! Click one of the "Setup" buttons, and then click "Start". You can drag the objects with the mouse. This will only work with a HTML5 capable browser such as Chrome or Firefox 3.5 (or later). The collision detection is very basic — too basic in fact. When objects hit each other at too high speed, or too close to corners, they can get stuck to each other. There is no rest detection and no friction.

Anagram: A fancy way to display an anagram.

Polyhedra: A colleague of mine showed me this animated gif of Alexander's Star, and asked me if it was a real object or just a clever illusion. I was planning to make a 3D animation where you could turn the sides of the star, as in the animated gif, but I never got further than a rotating 3D animation. I added the 5 regular polyhedra for comparison; notice how the star is just a deformed version of the icosahedron.

Colored Balls: A simple javascript game. Two players take turns shifting a row or a column of blue or green balls. The first player to form a single-colored row or column in the player's color wins. To make it more interesting, it is not allowed to shift the same row/column again, until all the rows/columns have been shifted. You can choose to have one or both players controlled by the computer. I think I have made the computer player too good - even in "moderate" difficulty, I can't beat it myself!

Cogs: Did you notice the turning cogwheels in the Colored Balls game when the computer is thinking? (You would only notice this if you selected "Very difficult") In the game they are displayed using an animated gif image, but I created them using an HTML5 canvas with a simple javascript program. Ok, the program is not quite simple anymore; when I wrote the preceding paragraph, the program looked like this.

Curves: Did you ever wonder what the difference between a quadratic curve and a Bezier curve is? No? Never? Er ... ok. Well I did, and that is why I wrote this small snippet of javascript to show the difference between the quadraticCurveTo function and the bezierCurveTo function of the HTML5 canvas. Actually, a quadratic curve is also a (quadratic) Bezier curve, and what is called a Bezier curve in the HTML5 canvas specification is a cubic Bezier curve, so there really is no difference except in the degree of the curve. The HTML5 canvas only implements quadratic and cubic Bezier curves, so I wrote another javascript program to calculate Bezier curves of any degree. You can see it here.

Blob! My latest experiment: Simulating small sticky balls.

Unicode symbols: Handy script if you are looking for an icon — use a unicode symbol instead! Only problem is that the icons may look different on different computers, and may not even be supported on some machines.

Video organizer: An online tool to organize online video and audio files into categories. Also includes an online media player and the possibility to generate playlists. You have to login using Google, then you can create your own categories and add audios/videos. It's possible to scrape YouTube videos and playlists.

Dots'n'Boxes: My implementation of the Dots'n'Boxes game. You can play against other people and/or computer players. Just enter your name, and you can start playing.