Tanks is an online multiplayer tanks game based off Wii Tanks and inspired by Agario. This project was started in 2013, it was revamped in early 2015 and has been progressing ever since, but I am taking an indefinite pause from it to work on other more useful ventures. It's been an amazing learning experience and I'll try to document the important parts I've learned about game development. A live (old) version of the game can be found at http://tank.rjdlee.com; tell your friends to connect to that link to see how the multiplayer works.

Now, if you're actually looking to build a production quality game, do not try building your game engine. People have spent thousands (or more) of hours making these engines stable.

Matrices

I started this project with no knowledge about vectors and matrices. I won't go into detail about them, but I'll guide you in the right direction.

Entities (such as tanks) have a bounding box, which describes their shape and location on the map.

When the entity rotates or moves, its bounding box needs to be updated. For rotation, use a rotation matrix. For movement, just move/ translate each bounding box vertex by the amount the entity translated.

For rotation matrices, I created a general purpose function to multiply two matrices. Pass it a rotation matrix:

[
	[ Math.cos( angle ), -Math.sin( angle ) ],
	[ Math.sin( angle ), -Math.cos( angle ) ]
]

And pass it a bounding box vertex coordinate:

[
	[ 43110 ],
	[ 41 ]
]

And it will give you a rotated coordinate. Rotating a tank barrel is a bit different though because it's rotating around one of its ends. I used a transform origin for this. Essentially, add or subtract a certain amount to each vertex to change how the shape rotates.

Say we have a rectangle with coordinates: (-2, 1), (2, 1), (-2, -1), and (2, -1). We want to rotate it around the point: (-2, 0).

1. Add 2 to each point's x-coordinate: (0, 1), (4, 1), (0, -1), and (4, -1)

2. Perform the rotation

3. Subtract 2 from the resulting points' x-coordinates

Matrix multiplication code:

multiply_matrices( matrix_a = [], matrix_b = [] )
	multiply_matrices( matrix_a = [], matrix_b = [] )
{
	if ( matrix_a.length === 0 || matrix_b.length === 0 )
		return [];
	// Number of rows in matrix_a
	let height = matrix_a.length;
	// Number of columns in matrix_b
	let width = matrix_b[ 0 ].length;
	// Create an empty matrix to store the result
	let matrix = Array( height );
	// Iterate through each row of matrix_a
	for ( let a_y = 0; a_y < height; a_y++ )
	{
		let a_row = matrix_a[ a_y ];
		matrix[ a_y ] = Array( width );
		// Iterate through each column of matrix_b
		for ( let b_x = 0; b_x < width; b_x++ )
		{
			let cell = 0;
			// Iterate through the bigger of the width of matrix_a or height of matrix_b
			for ( let i = 0; i < Math.max( a_row.length, matrix_b.length ); i++ )
			{
				cell += a_row[ i ] * matrix_b[ i ][ b_x ];
			}
			matrix[ a_y ].push( cell );
		}
	}
	return matrix;
}

Other Parts

2. Collisions

3. Interpolation