cassiebeckley/piet

## piet
<!DOCTYPE html>
<html>
<head><title>Piet test</title></head>
<body>

<canvas id="piet" width="640" height="480"></canvas>

<script type="text/javascript">

function renderEntity(ctx, entity) {
    var border = 10;
    var height = 480;
    var width = 640;

    ctx.fillStyle ="rgb(" + entity.r + "," + entity.g + "," + entity.b + ")";
    ctx.fillRect(entity.x, entity.y, entity.w, entity.h);

    ctx.fillStyle = "rgb(0,0,0)";

    ctx.fillRect(entity.x - border, 0, border, height);
    ctx.fillRect(entity.x + entity.w, 0, border, height);
    ctx.fillRect(0, entity.y - border, width, border);
    ctx.fillRect(0, entity.y + entity.h, width, border);
}

function render(ctx, entities) {
    ctx.clearRect(0, 0, 640, 480);
    ctx.strokeRect(0, 0, 640, 480);
    for (var i = 0; i < entities.length; i++) {
        renderEntity(ctx, entities[i]);
    }
}

var canvas = document.getElementById("piet");
var ctx = canvas.getContext("2d");

var ent1 = {x: 500, y: 330, w: 70, h: 70, r: 200, g: 0, b: 0};
var ent2 = {x: -10, y: -20, w: 120, h: 132, r: 240, g:200, b: 0};
var ents = [ent1, ent2];

var hor = 0;
var ver = 0;

function move() {
    ent1.x += hor * 2;
    ent1.y += ver * 2;
}

function tempLoop() {
    move();
    render(ctx, ents);
}

setInterval(tempLoop, 10);

document.onkeydown = function(e) {
    switch(e.keyCode) {
        case 37: // left
            hor = -1;
            break;
        case 39: // right
            hor = 1;
            break;
        case 38: // up
            ver = -1;
            break;
        case 40: // down
            ver = 1;
            break;
    }
}

document.onkeyup = function(e) {
    switch(e.keyCode) {
        case 37: // left
        case 39: // right
            hor = 0;
            break;

        case 38: // up
        case 40: // down
            ver = 0;
            break;
    }
}

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head><title>Piet test</title></head>
	<body>

	<canvas id="piet" width="640" height="480"></canvas>

	<script type="text/javascript">

	function renderEntity(ctx, entity) {
	var border = 10;
	var height = 480;
	var width = 640;

	ctx.fillStyle ="rgb(" + entity.r + "," + entity.g + "," + entity.b + ")";
	ctx.fillRect(entity.x, entity.y, entity.w, entity.h);

	ctx.fillStyle = "rgb(0,0,0)";

	ctx.fillRect(entity.x - border, 0, border, height);
	ctx.fillRect(entity.x + entity.w, 0, border, height);
	ctx.fillRect(0, entity.y - border, width, border);
	ctx.fillRect(0, entity.y + entity.h, width, border);
	}

	function render(ctx, entities) {
	ctx.clearRect(0, 0, 640, 480);
	ctx.strokeRect(0, 0, 640, 480);
	for (var i = 0; i < entities.length; i++) {
	renderEntity(ctx, entities[i]);
	}
	}

	var canvas = document.getElementById("piet");
	var ctx = canvas.getContext("2d");

	var ent1 = {x: 500, y: 330, w: 70, h: 70, r: 200, g: 0, b: 0};
	var ent2 = {x: -10, y: -20, w: 120, h: 132, r: 240, g:200, b: 0};
	var ents = [ent1, ent2];

	var hor = 0;
	var ver = 0;

	function move() {
	ent1.x += hor * 2;
	ent1.y += ver * 2;
	}

	function tempLoop() {
	move();
	render(ctx, ents);
	}

	setInterval(tempLoop, 10);

	document.onkeydown = function(e) {
	switch(e.keyCode) {
	case 37: // left
	hor = -1;
	break;
	case 39: // right
	hor = 1;
	break;
	case 38: // up
	ver = -1;
	break;
	case 40: // down
	ver = 1;
	break;
	}
	}

	document.onkeyup = function(e) {
	switch(e.keyCode) {
	case 37: // left
	case 39: // right
	hor = 0;
	break;

	case 38: // up
	case 40: // down
	ver = 0;
	break;
	}
	}

	</script>

	</body>
	</html>