cassiebeckley · April 27, 2013 09:52
diff --git a/piet b/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>