Tile Drawing

by Fenlig

HTML

<canvas id="canvas" width="640" height="480"></canvas>

JavaScript

var initalRoom;
var Context = {
	canvas : null,
	ctx : null,
	create : function(canvas_tag_id){
		this.canvas = document.getElementById(canvas_tag_id);
		this.ctx = this.canvas.getContext('2d');
		return this.ctx;
	}
};
var floorTile = function(x,y){
		this.img_dungeonTile = "http://i.imgur.com/p9kfQDv.png";
		this.tileImage = new Sprite(this.img_dungeonTile,false);
		this.x = x;
		this.y = y;
		this.variant = Math.floor(Math.random() * 5) + 1; 
	};

var room = function() {
	this.numXTiles = 4;
	this.numYTiles = 7;
	this.tileGrid = [];
	for(var i=0;i < (this.numXTiles * this.numYTiles); i++){
		this.tileGrid.push(new floorTile((this.numXTiles * i), (this.numYTiles * i)));
	}
};

var Sprite = function(filename){
	this.image = new Image();
	this.image.src = filename;
	this.drawClipped = function(sx,sy,sw,sh,x,y){
		Context.ctx.drawImage(this.image,sx,sy,sw,sh,x,y,32,32);
	};
};

$(document).ready(function() {
	// Initialize
	Context.create("canvas");
	initalRoom = new room;

	Context.ctx.fillStyle = "#000000";
	Context.ctx.fillRect(0,0,800,800);
	initalRoom.tileGrid[1].tileImage.drawClipped(0,0,32,32,0,0);
});