hs simulator

by path411

HTML

<canvas id="screen" width="800" height="500"></canvas>

CSS

#screen {
    border:1px solid #000000;
}

JavaScript

// Shims:

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();







	function Sim(screen) {
		this.Screen = screen.getContext('2d');
		this.ScreenEle = screen;
		this.Players = [new Player('Player'), new Player('AI')];

		this.Stage = new Stage(this);
	}
		Sim.prototype.Start = function() {
			requestAnimationFrame(this.Loop.bind(this));
		}

		Sim.prototype.Loop = function(timestamp) {
			if(typeof timestamp === "undefined") {
				timestamp = Date.now();
			}

			this.Stage.DrawFrame();




			requestAnimationFrame(this.Loop.bind(this));
		}

	function Stage(sim) {
		this.Sim = sim;
		this.Screen = sim.Screen;
	}

		Stage.prototype.DrawFrame = function() {
			this.ClearScreen();
			this.DrawPlayers();
		}

		Stage.prototype.DrawPlayers = function() {
			this.DrawPlayer(this.Sim.Players[0], 10, 480);
			this.DrawPlayer(this.Sim.Players[1], 10, 20);
		}
		Stage.prototype.DrawPlayer = function(player, x, y) {
			// Health Total
			this.Screen.fillText(player.Name + ": " + player.Health.toString(), x, y);

			// Mana
			this.Screen.fillText("Mana: " + player.Mana.toString(), x, y + 10);

		}

		Stage.prototype.ClearScreen = function() {
			this.Screen.clearRect(0,0, this.Screen.canvas.width,this.Screen.canvas.height);
		}


	function Player(name) {
		this.Name = name;
		this.Health = 30;
		this.Mana = 0;
		this.Hand = [];
		this.Deck = [];
		this.Ability = 1;
		this.Class = 1;
	}




	// Main


(function Main() {
	var sim = new Sim(document.getElementById('screen'));
	sim.Start();
})();