Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
82 lines (80 sloc) 2.1 KB
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Makey Makey Test Page</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<style type="text/css">
html, body {
font-family: 'Open Sans', sans-serif;
height: 100%;
background: #DFDFB2;
color: #553C08;
overflow: hidden;
}
#sprite {
position: absolute;
width: 60px;
margin-left: -30px;
margin-top: -30px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.topbar {
position: absolute;
top: 0;
right: 0;
border-bottom-left-radius: 10px;
background: #000;
background: rgba(0,0,0,0.6);
color: #fff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<img src="foxkeh.png" alt="Foxkeh" id="sprite">
<a class="topbar" href="https://github.com/codepo8/testy-testy/zipball/master">Download this to play with it!</a>
<!-- ^ You can delete this now :) -->
<script>
(function(){
var body = document,
sprite = document.querySelector('#sprite');
sprite.style.left = '200px';
sprite.style.top = '200px';
sprite.style.width = '60px';
body.addEventListener('keydown', function(ev) {
switch (ev.which) {
case 32: // space
if (sprite.style.width === '60px') {
sprite.style.width = '100px';
sprite.style.margin = '-50px 0 0 -50px';
} else {
sprite.style.width = '60px';
sprite.style.margin = '-30px 0 0 -30px';
}
break;
case 39: // right
sprite.style.left = (parseInt(sprite.style.left) + 20) +'px';
break;
case 37: // left
sprite.style.left = (parseInt(sprite.style.left) - 20) +'px';
break;
case 38: // up
sprite.style.top = (parseInt(sprite.style.top) - 20) +'px';
break;
case 40: // down
sprite.style.top = (parseInt(sprite.style.top) + 20) +'px';
break;
}
}, false);
})();
</script>
</body>
</html>