Skip to content

Instantly share code, notes, and snippets.

@masterleo

masterleo/cube-which-moove.markdown

Created May 7, 2018 22:54
Show Gist options
  • Save masterleo/9cb791a98efa471c837ab52b2ef25470 to your computer and use it in GitHub Desktop.
Save masterleo/9cb791a98efa471c837ab52b2ef25470 to your computer and use it in GitHub Desktop.
Download ZIP
Cube which moove
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cube</title>
</head>
<body>
<img id="cube" style="top: 0px; left: 0px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Pacman.svg/542px-Pacman.svg.png"/>
</body>
</html>
Raw
script.js
var app = {
cube: null,
init: function() {
console.log('init');
app.cube = document.getElementById('cube');
document.addEventListener('keypress', app.handler);
},
handler: function(event) {
console.log('handler');
console.log(event, app.cube);
switch (event.key) {
case 'z':
app.cube.style.top = parseInt(app.cube.style.top) - 50 + 'px';
app.cube.style.transform = 'rotate(-0.25turn)';
break;
case 's':
app.cube.style.top = parseInt(app.cube.style.top) + 50 + 'px';
app.cube.style.transform = 'rotate(0.25turn)';
break;
case 'd':
app.cube.style.left = parseInt(app.cube.style.left) + 50 + 'px';
app.cube.style.transform = 'rotate(0turn)';
break;
case 'q':
app.cube.style.left = parseInt(app.cube.style.left) - 50 + 'px';
app.cube.style.transform = 'rotate(0.5turn)';
break;
}
}
}
document.addEventListener('DOMContentLoaded', app.init);
Raw
style.css
body {
background: #222f3e;
}
#cube {
height: 100px;
width: 100px;
position: absolute;
transition: 0.1s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment