Tetroid.hx

import js.Browser.document;
import js.Browser.window;
import js.html.CanvasElement;
import js.html.CanvasRenderingContext2D;

private typedef Point = {
	var x : Float;
	var y : Float;
}

class Tetroid {

	public var canvas(default,null) : CanvasElement;
	public var context(default,null) : CanvasRenderingContext2D;

	public var size(default,null) : Int;

	public var speed = 1.0;
	public var circleSize = 16;
	public var clockwise = true;
	public var rotation : Float;
	public var points(default,null) : Array<Point>;

	var height : Int;
	var offsetX : Int;
	var offsetY : Int;

	public function new( size : Int, circleSize = 16, strokeStyle = '#000', speed = 1.0, clockwise = true ) {

		this.size = size;
		this.circleSize = circleSize;
		this.speed = speed;
		this.clockwise = clockwise;

		height = Std.int( size/2 * Math.sqrt(3) );
		points = [for(i in 0...6){x:0,y:0}];
		rotation = 0.0;

		offsetX = 0;
		offsetY = circleSize;

		//offsetX = Std.int( (size-size) / 2 - circleSize );
		//offsetY = Std.int( (size-height) / 2 - circleSize );

		canvas = document.createCanvasElement();
		canvas.width = size;
		canvas.height = size;

		context = canvas.getContext2d();
		context.strokeStyle = strokeStyle;
	}

	public function update() {

		var rad = rotation * Math.PI / 180;
		var rot = rad;

		// 0 tl-1
		points[0].x = Math.cos(rot) * circleSize;
		points[0].y = Math.sin(rot) * circleSize;

		// 1 tr-1
		rot = rad + (Math.PI*2/3);
		points[2].x = Math.cos(rot) * circleSize + size - circleSize*2;
		points[2].y = Math.sin(rot) * circleSize;

		// 2 b-1
		rot = rad + (Math.PI*2/3*2);
		points[4].x = Math.cos(rot) * circleSize + size/2;
		points[4].y = Math.sin(rot) * circleSize + height - circleSize;

		// 3 tl-2
		//rot = rad;
		points[1].x = - points[0].x; //Math.cos(rot) * circleSize;
		points[1].y = - points[0].y; //Math.sin(rot) * circleSize;

		// 4 tr-2
		rot = rad + (Math.PI*2/3);
		points[3].x = - Math.cos(rot) * circleSize + size - circleSize*2;
		points[3].y = - Math.sin(rot) * circleSize;

		// 5 b-2
		rot = rad + (Math.PI*2/3*2);
		points[5].x = - Math.cos(rot) * circleSize + size/2;
		points[5].y = - Math.sin(rot) * circleSize + height - circleSize;
	}

	public function draw() {

		context.clearRect( 0, 0, window.innerWidth, window.innerHeight );

		context.save();
		context.translate( circleSize, circleSize );

		context.beginPath();
		context.moveTo( offsetX + points[0].x, offsetY + points[0].y );
		context.lineTo( offsetX + points[2].x, offsetY + points[2].y );
		context.lineTo( offsetX + points[4].x, offsetY + points[4].y );
		context.lineTo( offsetX + points[1].x, offsetY + points[1].y );
		context.lineTo( offsetX + points[3].x, offsetY + points[3].y );
		context.lineTo( offsetX + points[5].x, offsetY + points[5].y );
		context.lineTo( offsetX + points[0].x, offsetY + points[0].y );

		context.stroke();
		context.restore();

		if( clockwise ) {
			rotation += speed;
			if( rotation >= 360 ) rotation = 0;
		} else {
			rotation -= speed;
			if( rotation <= 0 ) rotation = 360;
		}
	}

	static var tetroid : Tetroid;

	static function step( time : Float ) {
		window.requestAnimationFrame( step );
		tetroid.update();
		tetroid.draw();
	}

	static function main() {

		window.onload = function(_) {

			tetroid = new Tetroid( 300, 14, '#e0e0e0' );
			//tetroid.canvas.style.background = '#000';
			document.body.appendChild( tetroid.canvas );

			window.requestAnimationFrame( step );

			document.body.onclick = function(_){ tetroid.clockwise = !tetroid.clockwise; }
		}
	}
}