Skip to content

Instantly share code, notes, and snippets.

@mcgrew

mcgrew/animationsample.html

Created May 12, 2016 04:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mcgrew/98de4f752928a748d207fb308562e73c to your computer and use it in GitHub Desktop.
Save mcgrew/98de4f752928a748d207fb308562e73c to your computer and use it in GitHub Desktop.
Download ZIP
Playing with javascript
Raw
animationsample.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var xmax = 670;
var ymax = 750;
var speed = 3;
var coords = {
pacman: { x: 336, y: 579, dx: 0, dy: 0 },
inky : { x: 0, y: 0, dx: 0, dy: 0 },
blinky: { x: 0, y: 0, dx: 0, dy: 0 },
pinky : { x: 0, y: 0, dx: 0, dy: 0 },
clyde : { x: 0, y: 0, dx: 0, dy: 0 }
}
function Input(up, down, left, right) {
if (up)
this.up = up;
if (down)
this.down = down;
if (left)
this.left = left;
if (right)
this.right = right;
return this;
}
Input.prototype.keys = {};
Input.prototype.up = 38;
Input.prototype.down = 40;
Input.prototype.left = 37;
Input.prototype.right = 39;
Input.prototype.pressed = function(pressed) {
if (pressed == this.up)
this.keys.up = true;
if (pressed == this.down)
this.keys.down = true;
if (pressed == this.left)
this.keys.left = true;
if (pressed == this.right)
this.keys.right = true;
}
Input.prototype.released = function(released) {
if (released == this.up)
this.keys.up = false;
if (released == this.down)
this.keys.down = false;
if (released == this.left)
this.keys.left = false;
if (released == this.right)
this.keys.right = false;
}
function mainloop() {
var pacman = document.getElementById("pacman");
if (input.keys.up) {
coords.pacman.y -= speed;
coords.pacman.dy = -speed;
pacman.style.transform = "rotate(270deg)";
} else if (input.keys.down) {
coords.pacman.y += speed;
coords.pacman.dy = speed;
pacman.style.transform = "rotate(90deg)";
} else {
coords.pacman.dy = 0;
if (input.keys.left) {
coords.pacman.x -= speed;
coords.pacman.dx = -speed;
pacman.style.transform = "rotate(180deg)";
} else if (input.keys.right) {
coords.pacman.x += speed;
coords.pacman.dx = speed;
pacman.style.transform = "rotate(0deg)";
} else {
coords.pacman.dx = 0;
}
}
if (coords.pacman.x < 0) coords.pacman.x = 0;
if (coords.pacman.x > xmax) coords.pacman.x = xmax;
if (coords.pacman.y < 0) coords.pacman.y = 0;
if (coords.pacman.y > ymax) coords.pacman.y = ymax;
pacman.style.left = coords.pacman.x + "px";
pacman.style.top = coords.pacman.y + "px";
}
setInterval(mainloop, 16);
var input = new Input();
window.addEventListener('keydown', function(event) { input.pressed(event.keyCode); }, false);
window.addEventListener('keyup', function(event) { input.released(event.keyCode); }, false);
</script>
</head>
<body>
<div style="height: 800px; width: 722px; background: no-repeat url('background.png'); margin: auto; position: relative;">
<img id="pacman" src="pacman.gif" style="position: absolute; left:0px; top:0px;">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment