adrianseeley/drifty.html

## drifty.html
<html>
  <script src="http://canvasquery.com/canvasquery.js"></script>
    <script src="http://canvasquery.com/canvasquery.framework.js"></script>
	<body>
		<img id="car0" src="car0.png" style="display:none;"></img>
		<script>
			var rescar = document.getElementById('car0');

			var car = {x: 0, y: 0, max_speed: 5, x_speed: 0, y_speed: 0, accel: 0.3, rotation: 0, rotation_speed: 0.05, uid: 0, lid: 0, rid: 0, did: 0};
			var screen = cq(640, 480).framework({
				onkeydown: function (key) {
					switch (key) {
						case 'left':  car.lid = 1; break;
						case 'right': car.rid = 1; break;
						case 'up':    car.uid = 1; break;
						case 'down':  car.did = 1; break;
					}
				},
  				onkeyup: function (key) {
  					switch (key) {
						case 'left':  car.lid = 0; break;
						case 'right': car.rid = 0; break;
						case 'up':    car.uid = 0; break;
						case 'down':  car.did = 0; break;
					}
  				},
				onstep: function (delta) {
					if (car.lid) {
						car.rotation -= car.rotation_speed;
					} else if (car.rid) {
						car.rotation += car.rotation_speed;
					}
					if(car.uid) {
						car.x_speed += Math.cos(car.rotation) * car.accel;
						car.y_speed += Math.sin(car.rotation) * car.accel;
					} else {
						car.x_speed *= 0.95;
						car.y_speed *= 0.95;
					}

					var current_speed = Math.sqrt((car.x_speed * car.x_speed) + (car.y_speed * car.y_speed));
					if (current_speed > car.max_speed) {
						car.x_speed /= current_speed;
						car.x_speed *= car.max_speed;
						car.y_speed /= current_speed;
						car.y_speed *= car.max_speed;
					}
					car.x += car.x_speed;
					car.y += car.y_speed;
				},
				onrender: function() {
					this.save()
						.clear("#220033")
						.translate((rescar.width / 2) , rescar.height / 2  )
						.translate(car.x, car.y)
						.rotate(car.rotation)
						.translate(-rescar.width / 2, -rescar.height / 2)
						.drawImage(rescar, 0, 0)
					.restore();

				}
			}).appendTo("body");
		</script>
	</body>
</html>
	<html>
	<script src="http://canvasquery.com/canvasquery.js"></script>
	<script src="http://canvasquery.com/canvasquery.framework.js"></script>
	<body>
	<img id="car0" src="car0.png" style="display:none;"></img>
	<script>
	var rescar = document.getElementById('car0');

	var car = {x: 0, y: 0, max_speed: 5, x_speed: 0, y_speed: 0, accel: 0.3, rotation: 0, rotation_speed: 0.05, uid: 0, lid: 0, rid: 0, did: 0};
	var screen = cq(640, 480).framework({
	onkeydown: function (key) {
	switch (key) {
	case 'left': car.lid = 1; break;
	case 'right': car.rid = 1; break;
	case 'up': car.uid = 1; break;
	case 'down': car.did = 1; break;
	}
	},
	onkeyup: function (key) {
	switch (key) {
	case 'left': car.lid = 0; break;
	case 'right': car.rid = 0; break;
	case 'up': car.uid = 0; break;
	case 'down': car.did = 0; break;
	}
	},
	onstep: function (delta) {
	if (car.lid) {
	car.rotation -= car.rotation_speed;
	} else if (car.rid) {
	car.rotation += car.rotation_speed;
	}
	if(car.uid) {
	car.x_speed += Math.cos(car.rotation) * car.accel;
	car.y_speed += Math.sin(car.rotation) * car.accel;
	} else {
	car.x_speed *= 0.95;
	car.y_speed *= 0.95;
	}

	var current_speed = Math.sqrt((car.x_speed * car.x_speed) + (car.y_speed * car.y_speed));
	if (current_speed > car.max_speed) {
	car.x_speed /= current_speed;
	car.x_speed *= car.max_speed;
	car.y_speed /= current_speed;
	car.y_speed *= car.max_speed;
	}
	car.x += car.x_speed;
	car.y += car.y_speed;
	},
	onrender: function() {
	this.save()
	.clear("#220033")
	.translate((rescar.width / 2) , rescar.height / 2 )
	.translate(car.x, car.y)
	.rotate(car.rotation)
	.translate(-rescar.width / 2, -rescar.height / 2)
	.drawImage(rescar, 0, 0)
	.restore();

	}
	}).appendTo("body");
	</script>
	</body>
	</html>