Minesweeper in Javascript and Canvas

Window onload

When the window loads we begin by creating a reference to the Canvas elements 2D drawing context with the ctx global:

window.onload = function()
{
	ctx = document.getElementById('game').getContext('2d');

Event listeners are added for the click, mousemove, and contextmenu events, which update the mouseState accordingly. The contextmenu event, tied to the right mouse button on Windows or Linux, is the method we'll use to allow the player to flag tiles.

	document.getElementById('game').addEventListener('click', function(e) {
		var pos = realPos(e.pageX, e.pageY);
		mouseState.click = [pos[0], pos[1], 1];
	});
	document.getElementById('game').addEventListener('mousemove',
	function(e) {
		var pos = realPos(e.pageX, e.pageY);
		mouseState.x = pos[0];
		mouseState.y = pos[1];
	});
	
	document.getElementById('game').addEventListener('contextmenu',
	function(e) {
		e.preventDefault();
		var pos = realPos(e.pageX, e.pageY);
		mouseState.click = [pos[0], pos[1], 2];
		return false;
	});

We then tell the window to call the drawGame method when it's ready to begin animating our Canvas, and we're finished with the onload method.

	requestAnimationFrame(drawGame);
};
Page loaded in 0.012 second(s).