The board has two rows of six holes with a single large hole (Mancala) at each end. To start, each of the holes (except the Manacalas) have 4 stones.

The keyword ‘this’ can cause a lot of confusion in JavaScript (along with many other languages). It can change depend upon how a method is invoked. Below is an example that invokes the same method three different ways, and produces three different results.

unction sayName(){
  name = "sayName";
  alert(this.name);
}
var obj = {
  name: "obj",
  sayObjectName: sayName
};
var x = {};
x.name = "x";
 
function run(){
  sayName(); // sayName
  obj.sayObjectName(); // obj
  sayName.apply(x,null); // x
}

This JavaScript game will display a block of numbers for a few seconds. Then you have to try and remember the order the numbers were in. Play this every day for a few weeks and you will really feel yourself improving. I hope to program several more games like this and wrap them together, but we’ll see if that happens. The code for this is entirely in JavaScript, so take a look at the source code.

Memory Game

This program is a complete abuse of HTML, CSS and JavaScript. Put bluntly, it is a bad idea and a disgrace to all programmers that I even tried to code it. That said it’s really cool. Explore Mandlebrot and Juilasets from your browser using JavaScript. Start small and if you have firebug, turn it off first. Really if you set this too big you will crash your browser. I’ve included links to set a few points that I find interesting.

Mandlebrot/Julia Explorer

This demonstrates three simple particle effects using JavaScript and a canvas element. The green particles follow an attractor style pattern when the particle accelerates towards the point of interest, in this case the mouse. The blue particles are radiant. They start from the point of the interest and moves outward and a random speed and direction. The red particles are a sort of spark pattern. It starts out like blue, moving in a random speed and direction but has gravity applied so that it seems to fall.

Initially I was working on a complex formula for when to respawn a particle, but after some experimentation I found that giving it a random 5% chance to respawn every time it is refreshed worked really well (and is simple the code). On top of that there is 0.25% chance that the particle will disappear entirely. This can be switched off by deactivating decay. You can also turn different particles on and off. This demo uses canvas and will not work in IE at this time. Click on the white area to spawn particles. Warning, this can run very slow on some computers.

Particle Effects

Douglas Crockford demonstrated this method for programming Private variables in JavaScript. My demo is not flashy but it gets the point across. Be sure to take a look at the source code to see what’s going on.

One of the shortcomings of this technique is that it cannot be coupled with prototypes. It is not possible (as far as I’m aware) to have a prototype with private variables.

Private Variable Demo

This program creates simple flash cards for memorizing math problems. Options include which operators to use, how long to show the cards for and the number range to use. A good example of using JavaScript to manipulate the DOM.

Math Flash Cards

This program is the follow up to the flash cards program. Similar interface and options but takes user input and tracks score. After the quiz is completed a score is given. Another good JavaScript example for DOM manipulation, largely taken from the flash cards example.

Math Quiz

This program is an implementation of a binary tree in JavaScript. Binary trees are a basic computer science data structure. Learn more about binary trees here. The code provides a good model of a simple binary tree if you are just learning to write code.

Javascript Binary Tree

This is a game I used to play a lot when I was younger. Try to guess a hidden pattern of colors. After each guess you will receive feedback tell you how many colors are correct and how many are in the right spot. The interface is pretty simple and it’s kind of fun. This program is also special to me because it was one of my first JavaScript projects. I have cleaned up the code over the years as I’ve learned more about JavaScript.

Mastermind Game

This is my implementation of John Conway’s game of life. The rules are that any living square with two or three neighbors stays alive. Any non-living square with exactly three neighbors comes to life. Form a more detailed explanation, see the Wikipedia article. It uses the Canvas tag, so it will not work in IE. You can draw your own patterns or effect the game by clicking on the squares. If you want to draw a pattern, make sure the game is paused first. The code is pretty clean so after playing with it for a while, take a look at the source code.

Read the rest of this entry »