isoyoyo

by hotfeet

JavaScript

var canvas,
		ctx;

var now,
		dt,
    last,
    step;

var mousePos;

var keyboard = {
	LEFT: false,
	RIGHT: false,
	UP: false,
	DOWN: false,
	SPACE: false
};

var KEY = {
	UP: 38,
	RIGHT: 39,
	DOWN: 40,
	LEFT: 37,
	SPACE: 32
};

var TAU = Math.PI * 2;

var gridCellSize,
		gridWidth,
    gridHeight,
    tiles,
    player;

function init() {
	//create the canvas to use for rendering
  canvas = document.createElement("canvas");
	canvas.width = 480;
  canvas.height = 320;

	//append the render canvas to the document
  document.body.appendChild(canvas);
  //get the drawing context of the render canvas
  ctx = canvas.getContext("2d");

  //set the default values of the time vars
  now = 0;
  dt = 0;
  last = timestamp();
  step = 1 / 60;
	fps = 0;
	
	//add input event listeners
	mousePos = { x: 0, y: 0 };
	
	canvas.addEventListener('mousemove', function(evt) {
		mousePos = getMousePos(canvas, evt);

	}, false);
	canvas.addEventListener('mouseup', function(evt) {
	
  }, false);

  document.addEventListener('keydown', function(ev) { return onkey(ev, ev.keyCode, true);  }, false);
    document.addEventListener('keyup',   function(ev) { return onkey(ev, ev.keyCode, false); }, false);

	//setup game here 
	gridCellSize = 16;
	gridWidth = 8;
	gridHeight = 8;
  
  tiles = [];
  
  var color = {
  	r: 32,
    g: 200,
    b: 96
  }
  for(var y = 0; y < gridHeight; y++) {
		for(var x = 0; x < gridWidth; x++) {
				var tile = new DrawnDiTile(gridCellSize, 0, color);
				tile.setXYZ(x * gridCellSize, 0, y * gridCellSize);
				tiles.push(tile);
		}
	}
	
  var tile = new DrawnDiTile(gridCellSize / 2, 16, {r:64, g:32,b:160});
  tile.setXYZ(4 * gridCellSize, -1, 4 * gridCellSize);
  tiles.push(tile);
  player = { tile: tiles[tiles.length - 1], x: 4, y: 4 };
  
  //request an animation frame pass it the update method
  requestAnimationFrame(frame);
}

function timestamp() {
  return window.performance && window.performance.now ? window.performance.now() : new...