gistfile1.js

var requestAnimFrame = (function(){
	return  window.requestAnimationFrame       || 
		window.webkitRequestAnimationFrame || 
		window.mozRequestAnimationFrame    || 
		window.oRequestAnimationFrame      || 
		window.msRequestAnimationFrame     || 
		function(/* function */ callback, /* DOMElement */ element){
			window.setTimeout(callback, 1000 / 60);
		};
})();

var display;
var ctx;
var socket;

function gameMain() {
	display = document.getElementById('display');
	ctx = display.getContext('2d');
	socket = io.connect('http://localhost:3000');
	
	
	var button = new CanvasButton(5, 60, 195, 50, "Начать игру");
	
	
	
	
	requestAnimFrame(gameLoop);
	
	
	
}


var canvasButtons = [];

function redrawCanvasButtons() {
	for(var i = 0; i < canvasButtons.lenght; ++i) {
		var button = canvasButtons[0];
		button.redraw();	
	}
}

function CanvasButton(_x, _y, _w, _h, _caption) {
	this.onClick = function() {}
	this.caption = _caption;
	this.position = {x:_x, y:_y};
	this.size = {x:_w, y:_h};
	
	this.state = 'up';
	
	this.redraw = function() {
		if (this.state == 'up') {
			this.onUpRedraw();
		}
	}
	
	this.onUpRedraw = function() {
		ctx.lineWidth = 3;
		ctx.strokeStyle = '#000';
		ctx.strokeRect(this.position.x, this.position.y, this.size.x, this.size.y);
	
		ctx.font = "bold 30px arial"
		ctx.fillText(this.caption,this.position.x + 10, this.position.y + 35);
	}
	
	this.destroy = function () {
		for(var i = 0; i < canvasButtons.lenght; ++i) {
			if (canvasButtons[i] === this) {
				canvasButtons.splice(i, 1);
				break;
			}
		}
	}
	
	canvasButtons.push(this);
}

function gameLoop() {

	ctx.clearRect(0, 0, 800, 600);
	
	redrawCanvasButtons();

	requestAnimFrame(gameLoop);
}