Skip to content
Browse files

added mover

  • Loading branch information...
1 parent 96880fd commit 11a27c063487ecd07dde140580a055e96d3aa4d2 @codepo8 committed
Showing with 99 additions and 4 deletions.
  1. BIN foxkeh.png
  2. +3 −0 index.html
  3. +82 −0 mover.html
  4. +13 −0 testy-testy.css
  5. +1 −4 testy-testy.js
View
BIN foxkeh.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
3 index.html
@@ -61,6 +61,9 @@
<p>g</p>
</section>
+<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 src="testy-testy.js"></script>
</body>
</html>
View
82 mover.html
@@ -0,0 +1,82 @@
+<!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>
View
13 testy-testy.css
@@ -24,4 +24,17 @@ html, body {
}
.current {
opacity: 1;
+}
+.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;
}
View
5 testy-testy.js
@@ -26,9 +26,6 @@
case 40: // down
setcurrent(down);
break;
- case 40: // down
- setcurrent(down);
- break;
case 87: // w
setcurrent(w);
break;
@@ -66,6 +63,6 @@
if (current) {
current.className = 'reactors';
}
- current = null;
+ current = null;
}
})();

0 comments on commit 11a27c0

Please sign in to comment.
Something went wrong with that request. Please try again.