Platformer example code

Game.hx

package core;
import js.Browser;
import js.html.CanvasElement;
import js.html.CanvasRenderingContext2D;

/**
 * ...
 * @author Wookie
 */
class Game
{

	public var canvas : CanvasElement;
	public var context : CanvasRenderingContext2D;
	
	private var width : Int;
	private var height : Int;
	
	public var dt : Float;
	private var now : Float;
	private var then : Float;
	
	private var lastKey : Array<Bool> = [];
	
	public function new(name : String, width : Int, height : Int, color : String = "#FFF") 
	{
		canvas = Browser.document.createCanvasElement();
		context = canvas.getContext2d();
		
		canvas.id = name + ":canvas";
		canvas.width = this.width = width;
		canvas.height = this.height = height;
		canvas.style.width = width + "px";
		canvas.style.height = height + "px";
		canvas.style.backgroundColor = color;
		
		context.font = "10pt sans-serif";
		
		Graphics.setContext(context);
		
		Browser.document.body.appendChild(canvas);
		
		Browser.document.addEventListener("keyup", function(e) { onKeyUp(e); lastKey[e.keyCode] = false; /* trace(e.keyCode); */ }, false);
		Browser.document.addEventListener("keydown", function(e) { onKeyDown(e); lastKey[e.keyCode] = true; }, false);
		
		init();
		
		then = untyped __js__ ("Date.now()");
		loop();
	}
	
	private function loop()
	{	
		now = untyped __js__ ("Date.now()");
		dt = (now - then) / 1000;
		then = now;
		
		context.clearRect(0, 0, width, height);
		
		update(dt);
		draw();
		untyped __js__ ("requestAnimationFrame")(loop);
	}
	
	public function init()
	{
		
	}
	
	public function update(dt : Float)
	{
		
	}
	
	public function draw()
	{
		
	}
	
	public function onKeyUp(e : Dynamic)
	{
		
	}
	
	public function onKeyDown(e : Dynamic)
	{
		
	}
	
	public function setColor(color : String)
	{
		canvas.style.backgroundColor = color;
	}
	
	public function getWidth() : Int
	{
		return width;
	}
	
	public function getHeight() : Int
	{
		return height;
	}
	
	public function isDown(e : Int) : Bool
	{
		return (lastKey[e] == true);
	}
	
}

Graphics.hx

package core;
import js.html.CanvasRenderingContext2D;
import js.html.Image;

/**
 * ...
 * @author Wookie
 */
class Graphics
{

	private static var context : CanvasRenderingContext2D;
	
	public function new() 
	{
		
	}
	
	public static function setContext(ctx : CanvasRenderingContext2D)
	{
		context = ctx;
	}
	
	public static function setColor(r : Float, g : Float, b : Float)
	{
		context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
	}
	
	public static function draw(drawable : Image, x : Float, y : Float, width : Float, height : Float, flipH : Bool = false, flipV : Bool = false)
	{
		context.save();
		if (flipH) {
			context.translate(width, 0);
			context.scale( -1, 1);
			x = -x;
		}
		if (flipV) {
			context.translate(0, height);
			context.scale(1, -1);
			y = -y;
		}
		context.drawImage(drawable, x, y, width, height);
		context.restore();
	}
	
	public static function rectangle(x : Float, y : Float, w : Float, h : Float)
	{
		context.fillRect(x, y, w, h);
	}
	
	public static function print(caption : String, x : Float, y : Float)
	{
		context.fillText(caption, x, y + 10);
	}
	
}

Main.hx

package;

import core.Game;
import core.Graphics;
import js.Browser;
import js.html.Image;
import js.Lib;

/**
 * ...
 * @author Wookie
 */

class Main extends Game
{
	
	public function new()
	{
		super("platformer", 800, 600, "#000");
	}
	
	override public function init()
	{
		map = [
		[0, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1],
        [0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0],
        [0, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1],
        [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0]
		];
		
		actor = new Actor();
		box = new Box();
		
		wall = new Image();
		wall.src = "wall.png";
		
		floor = new Image();
		floor.src = "floor.png";
		
		stand = new Image();
		stand.src = "stand.png";
		
		run = new Image();
		run.src = "run.png";
		
		fall = new Image();
		fall.src = "fall.png";
		
		Graphics.setColor(255, 255, 255);
	}
	
	override public function update(dt : Float)
	{
		actor.v_velocity += actor.v_accel * dt;
		actor._y = actor.y + actor.v_velocity;
		
		if (isDown(37))
			actor.h_velocity -= actor.h_accel * dt;
		else if (isDown(39))
			actor.h_velocity += actor.h_accel * dt;
			
		actor.h_velocity = actor.h_velocity > 0 ? Math.min(actor.h_velocity, 2) : Math.max(-2, actor.h_velocity);
			
		actor._x = actor.x + actor.h_velocity;
		
		if (!boxCollision(actor.x, actor._y, 20))
			actor.y = actor._y;
		else
			actor.v_velocity = 0;
			
		if (!boxCollision(actor._x, actor.y, 20))
			actor.x = actor._x;
		else
			actor.h_velocity = 0;
			
		if (actor.h_velocity > 0)
			actor.h_velocity -= 8 * dt;
		else if (actor.h_velocity < 0)
			actor.h_velocity += 8 * dt;
			
		if (Math.abs(actor.h_velocity) < 0.05)
			actor.h_velocity = 0;
			
		if (typeCollision(actor.x, actor._y, 20, 30, 2) && actor.y > actor._y) {
			actor.score++;
			map[Math.floor(actor.y / 32) - 1][Math.floor(actor.x / 32)] = 1;
		}
	}
	
	override public function onKeyUp(e : Dynamic) 
	{
		if (e.keyCode == 38) {
			//actor.y -= 2;
			actor.v_velocity = -5;
		}
	}
	
	override public function draw()
	{
		for (y in 0 ... 9) {
			for (x in 0 ... 19) {
				if (map[y][x] != 0) {
					if (map[y][x] == 1)
						Graphics.draw(wall, x * 32, y * 32, 32, 32);
					else if (map[y][x] == 2)
						Graphics.draw(floor, x * 32, y * 32, 32, 32);
				}
			}
		}
		
		if (Math.abs(actor.h_velocity) > 0.05) {
			if (actor.h_velocity > 0)
				Graphics.draw(run, actor.x, actor.y, 20, 32);
			else
				Graphics.draw(run, actor.x, actor.y, 20, 32, true);
		} else {
			if (Math.abs(actor.v_velocity) > 0)
				Graphics.draw(fall, actor.x, actor.y, 20, 32);
			else
				Graphics.draw(stand, actor.x, actor.y, 20, 32);
		}
		
		Graphics.print("x " + actor.x + " y " + actor.y + " vel " + actor.v_velocity, 10, 580);
		Graphics.print("Score: " + actor.score, 0, 0);
	}
	
	public function boxCollision(x : Float, y : Float, w : Float, h : Float = 30) : Bool
	{
		for (gy in 0 ... 9) {
			for (gx in 0 ... 19) {
				if (map[gy][gx] != 0 && (x + w > gx * 32) && (y + h > gy * 32) && (x - 32 < gx * 32) && (y - 32 < gy * 32 ))
					return true;
			}
		}
		
		return false;
	}
	
	public function typeCollision(x : Float, y : Float, w : Float, h : Float = 30, type : Int = 1) : Bool
	{
		for (gy in 0 ... 9) {
			for (gx in 0 ... 19) {
				if (map[gy][gx] == type && (x + w > gx * 32) && (y + h > gy * 32) && (x - 32 < gx * 32) && (y - 32 < gy * 32 ))
					return true;
			}
		}
		
		return false;
	}
	
	static function main() 
	{
		Browser.document.body.style.margin = "0 0 0";
		new Main();
	}
	
	var map : Array<Array<Int>>;
	var actor : Actor;
	var box : Box;
	
	var wall : Image;
	var floor : Image;
	var stand : Image;
	var run : Image;
	var fall : Image;
	
}

class Actor {
	
	public var x : Float = 0;
    public var y : Float = 0;
    public var _x : Float = 0;
    public var _y : Float = 0;
    public var v_velocity : Float = 0;
    public var h_velocity : Float = 0;
    public var v_accel : Float = 12.8;
    public var v_wall_vel : Float = 0;
    public var h_accel : Float = 75;
    public var isGround : Bool = false;
    public var score : Int = 0;
    public var inversed : Bool = false;
	
	public function new()
	{
		
	}
	
}

class Box {
	
	public var x : Float = 256;
    public var y : Float = 64;
    public var _x : Float = 0;
    public var _y : Float = 0;
    public var v_velocity : Float = 0;
    public var h_velocity : Float = 0;
    public var v_accel : Float = 0.00064;
	
	public function new()
	{
		
	}
	
}