Game Related Snippets I always Forget

When I sit down to prototype something new I always find myself looking up the same snippets to do the same types of things. I figured I might as well record them somewhere so I know an easy place to look when I do forget. All the samples will be in Javascript and should be able to be easily converted to any other language.

Distance Formula

Obviously a pretty important one, used to tell the distance between 2 objects. Can be used for simple radius collisions as well.

var distance = Math.sqrt((x2 - x1) *(x2-x1) + (y2 - y1) * (y2-y1));

Move toward an object (Without rotation) with easing

x += (targetX-x)/speed;
y += (targetY-y)/speed;

Angle Based Movement

I always see myself needing this one, whether its for an Asteroids clone, or a follow the leader type game.

velX = Math.cos((angle * Math.PI / 180) * thrust);
velY = Math.sin((angle * Math.PI / 180) * thrust);


How do I make something slow down if no force is applied?

velX *= .98; //Any val under 1 is suitable for your needs
velY *= .98

2D Matrix

This is a pretty simple one I know.. but I always seem to forget it. This is how to store a 2d matrix in an array. And how to find a value you need.

// 2d matrix[y * width + x]
var arr = [],
     width = 10;

for(x=0; x<width; x++){
    for(y=0; y<width; y++){
        arr[y * 10 + x] = x + y; //Or whatever value you need to assign

//Retrieve a value from x:5, y:2
var val = arr[2 * 10 + 5];

//get the x and y from a 1d array
var index = 12,
    x = index % width, // 2
    y = Math.floor(index / width); // 1

Move towards and object at a constant speed

    var tx = targetX - x,
        ty = targetY - y,
        dist = Math.sqrt(tx*tx+ty*ty),
        rad = Math.atan2(ty,tx),
        angle = rad/Math.PI * 180;;

        velX = (tx/dist)*thrust;
        velY = (ty/dist)*thrust;


Project a point in front of an object

    x + length * Math.cos(angle*Math.PI / 180);
    y + length * Math.sin(angle*Math.PI / 180);

Get the angle between objects

    var x = targetX - this.x,
        y = targetY - this.y;

     return Math.atan2(x,-y);

Plot points around a circle

    var rad = 500,
        total = 50,
        centerX = 250,
        centerY = 250;

    for(var i = 0; i < total; i++){
        var x = centerX + rad * Math.cos(2 * Math.PI * i / total),
            y = centerY + rad * Math.sin(2 * Math.PI * i / total);   

        ctx.lineTo(x, y);

Canvas Lunar Lander update

Game is still coming along, it now supports zooming, which was actually a little bit tricky to figure out. Only a few more things left to add before its a full fledged game.. or clone of a game that is.

Check out the progress  of JSLander

Now supported in any browser that supports the canvas element.

New Canvas game im working on

A while back I posted a link to a Flash game I was working on, it was going to be multiplayer using Nanoba. Unfortunately I gave up on it pretty quickly, I’m not a big fan of Flash and I wanted to learn something totally different, so I decided to try and remake the game using Canvas.

So far development has been going pretty well, the single player implementation in its current state can be seen here (please not the images are not free they are actually 2d renders from 3d models i have purchased, the code is under the MIT license). It already has more implemented than the Flash version had. There are quit a few things however left to be done and I will try to make a post with every major milestone and write up how I accomplished it. So far the only thing that is not using JavaScript is the sound. I am using Sound Manager for that, which uses a swf in order to generate the sounds.

AS of right now I have put a halt on development of this particular single player game recently because I am actually working on a multiplayer version that is nearing completion. The next post I make will most likely be releasing that and then I will get back to making this a full fledged game… and Ill most likely not use the bald shirtless men as enemies (they are supposed to be zombies!).