gistfile1.js

var titan = titan || {}

//===----------------------------------------------------------------------===//
// Data
//===----------------------------------------------------------------------===//
titan.tiles = [
  { name: 'grass' },
];


//===----------------------------------------------------------------------===//
// drawLine
//===----------------------------------------------------------------------===//
function drawLine(ctx, x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.lineWidth = 1;
  // offset by .5 so lines aren't blurry, wtf?
  ctx.moveTo(x1 + .5, y1 + .5);
  ctx.lineTo(x2 + .5, y2 + .5);
  ctx.stroke();
}

//===----------------------------------------------------------------------===//
// World
//===----------------------------------------------------------------------===//
titan.World = function(elem) {
  this.width = 640;
  this.height = 480;
  this.tile_size = 32;
  this.tile_width = this.width / this.tile_size;
  this.tile_height = this.height / this.tile_size;

  var isElem = elem instanceof Element;
  this.canvas = isElem ? elem : document.getElementById(elem);
  this.ctx = this.canvas.getContext('2d');

  var self = this;
  this.preload(function() {
    self.drawTiles();
    self.drawGrid();
  });
}


//===----------------------------------------------------------------------===//
// preload
//===----------------------------------------------------------------------===//
titan.World.prototype.preload = function(done) {
  var len = titan.tiles.length;
  var self = this;
  this.c = 0;

  for (var i = 0; i < len; i++) {
    var tile = titan.tiles[i];
    tile.img = new Image();
    tile.img.onload = function() {
      self.c += 1;
      if (self.c == len) {
        done();
      }
    }
    tile.img.src = "img/" + tile.name + '.png';
  };
};



//===----------------------------------------------------------------------===//
// World.drawGrid
//===----------------------------------------------------------------------===//
titan.World.prototype.drawGrid = function() {

  this.ctx.strokeStyle = "rgba(0, 0, 0, 0.25)";

  // draw vertical lines
  for (var i = 1; i < this.tile_width; ++i) {
    var x = i * this.tile_size;
    drawLine(this.ctx, x, 0, x, this.height);
  }

  // draw horizontal lines
  for (var i = 1; i < this.tile_width; ++i) {
    var y = i * this.tile_size;
    drawLine(this.ctx, 0, y, this.width, y);
  }

  // border
  drawLine(this.ctx, 0, 0, 0, this.height); // left
  drawLine(this.ctx, 0, 0, this.width, 0); // top
  drawLine(this.ctx, this.width-1, 0, this.width-1, this.height-1); // right
  drawLine(this.ctx, 0, this.height-1, this.width-1, this.height-1); // bottom
}



//===----------------------------------------------------------------------===//
// World.drawTiles
//===----------------------------------------------------------------------===//
titan.World.prototype.drawTiles = function () {
  for (var x = 0; x < this.tile_width; ++x) {
    for (var y = 0; y < this.tile_height; ++y) {
      var tile_type = 0;
      var img = titan.tiles[tile_type].img;
      this.ctx.drawImage(img, x * this.tile_size, y * this.tile_size);
    }
  }
}