/code/javascript/arrow.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>One-hour arrow game. Written in about an hour.</title>
<link rel="icon" type="image/gif" href="/images/favicon.gif" />
<style type="text/css">
* {
	padding: 0;
	margin: 0;
	border: 0;
	color: #fff;
	overflow: hidden;
	font-family: sans-serif;
}
html, body {
	height: 100%;
	width: 100%;
	background: #000;
}
body { display: table; font-size: 8em; }
div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	-webkit-animation: .2s;
	-moz-animation: .2s;
	-ms-animation: .2s;
	-o-animation: .2s;
	animation: .2s;
}
#arrow { font-size: 5em; }
div.score, div.best {
	position: absolute;
	top: 0;
	padding: 0 .1em;
}
div.score {
	-webkit-transform-origin: top left;
	-moz-transform-origin: top left;
	-ms-transform-origin: top left;
	-o-transform-origin: top left;
	transform-origin: top left;
	left: 0;
}
div.best {
	-webkit-transform-origin: top right;
	-moz-transform-origin: top right;
	-ms-transform-origin: top right;
	-o-transform-origin: top right;
	transform-origin: top right;
	right: 0;
}
div.pulse {
	-webkit-animation: .2s zm;
	-moz-animation: .2s zm;
	-ms-animation: .2s zm;
	-o-animation: .2s zm;
	animation: .2s zm;
}
@-webkit-keyframes zm { from { opacity: 0; -webkit-transform: scale(4,4); } }
@-moz-keyframes zm { from { opacity: 0; -moz-transform: scale(4,4); } }
@-ms-keyframes zm { from { opacity: 0; -ms-transform: scale(4,4); } }
@-o-keyframes zm { from { opacity: 0; -o-transform: scale(4,4); } }
@keyframes zm { from { opacity: 0; transform: scale(4,4); } }
div.lt {
	-webkit-animation-name: lt;
	-moz-animation-name: lt;
	-ms-animation-name: lt;
	-o-animation-name: lt;
	animation-name: lt;
}
div.up {
	-webkit-animation-name: up;
	-moz-animation-name: up;
	-ms-animation-name: up;
	-o-animation-name: up;
	animation-name: up;
}
div.rt {
	-webkit-animation-name: rt;
	-moz-animation-name: rt;
	-ms-animation-name: rt;
	-o-animation-name: rt;
	animation-name: rt;
}
div.dn {
	-webkit-animation-name: dn;
	-moz-animation-name: dn;
	-ms-animation-name: dn;
	-o-animation-name: dn;
	animation-name: dn;
}
@-webkit-keyframes lt { to { opacity: 0; -webkit-transform: translatex(-75%) } }
@-webkit-keyframes up { to { opacity: 0; -webkit-transform: translatey(-75%) } }
@-webkit-keyframes rt { to { opacity: 0; -webkit-transform: translatex(75%) } }
@-webkit-keyframes dn { to { opacity: 0; -webkit-transform: translatey(75%) } }
@-moz-keyframes lt { to { opacity: 0; -moz-transform: translatex(-75%) } }
@-moz-keyframes up { to { opacity: 0; -moz-transform: translatey(-75%) } }
@-moz-keyframes rt { to { opacity: 0; -moz-transform: translatex(75%) } }
@-moz-keyframes dn { to { opacity: 0; -moz-transform: translatey(75%) } }
@-ms-keyframes lt { to { opacity: 0; -ms-transform: translatex(-75%) } }
@-ms-keyframes up { to { opacity: 0; -ms-transform: translatey(-75%) } }
@-ms-keyframes rt { to { opacity: 0; -ms-transform: translatex(75%) } }
@-ms-keyframes dn { to { opacity: 0; -ms-transform: translatey(75%) } }
@-o-keyframes lt { to { opacity: 0; -o-transform: translatex(-75%) } }
@-o-keyframes up { to { opacity: 0; -o-transform: translatey(-75%) } }
@-o-keyframes rt { to { opacity: 0; -o-transform: translatex(75%) } }
@-o-keyframes dn { to { opacity: 0; -o-transform: translatey(75%) } }
@keyframes lt { to { opacity: 0; transform: translatex(-75%) } }
@keyframes up { to { opacity: 0; transform: translatey(-75%) } }
@keyframes rt { to { opacity: 0; transform: translatex(75%) } }
@keyframes dn { to { opacity: 0; transform: translatey(75%) } }
</style>
</head>
<body>
<div id="arrow" class="dn"></div>
<div class="score">score: 0</div>
<div class="score">score: 0</div>
<div class="best">best: 0</div>
<div class="best">best: 0</div>
<script type="text/javascript">
var arrow = document.getElementById("arrow");
var score = document.getElementsByClassName("score");
var best = document.getElementsByClassName("best");
function newmove () {
	arrow.className = "";
	score[0].classList.remove("pulse");
	score[1].innerHTML = score[0].innerHTML;
	best[0].classList.remove("pulse");
	best[1].innerHTML = best[0].innerHTML;
	arrow.addEventListener("webkitanimationend", newmove, false);
	arrow.addEventListener("oanimationend", newmove, false);
	arrow.addEventListener("animationend", newmove, false);
	arrow.move = Math.floor(Math.random() * 4);
	arrow.innerHTML = "&" + ([ "l", "u", "r", "d" ])[arrow.move] + "arr;";
	document.addEventListener("keydown", keypress, true);
}
function keypress (e) {
	document.removeEventListener("keydown", keypress, true);
	if (e.keyCode - 37 == arrow.move) {
		arrow.className = ([ "lt", "up", "rt", "dn" ])[arrow.move];
		score[0].classList.add("pulse");
		++score.points;
		if (score.points > best.points) {
			best[0].innerHTML = "best: " + (best.points = score.points);
			best[0].classList.add("pulse");
		}
	} else if (e.keyCode >= 37 && e.keyCode <= 40) {
		score.points = 0;
		setTimeout(newmove, 0);
	} else document.addEventListener("keydown", keypress, true);
	score[0].innerHTML = "score: " + score.points;
}
best.points = score.points = 0;
newmove();
</script>
</body>
</html>
download