I'm building a small game in pure JS for my own learning purposes, using sprites to model players.
Before I go further, I want to try to get the animation down. The below code should produce a blank page with a skelton sprite that responds to arrow key presses. It should work in both firefox and chromium (but no other browser tested).
I feel there is a lot more code than necessary, I'm new to javascript so any feedback is welcome.
var X_OFFSETS = [-71.5,
-135.5,
-199.5,
-263.5,
-327.5,
-391.5,
-455.5,
-519.5,
-7.5];
var WALKU_Y_OFFSET = 820;
var WALKL_Y_OFFSET = 756;
var WALKD_Y_OFFSET = 692;
var WALKR_Y_OFFSET = 629;
var WALK_STEP_SIZE = 4;
var FRAME_TIMEOUT = 130;
var bones = null;
var bonesPlayground = null;
var bonesReady = false;
function init() {
bones = document.getElementById('bones');
bonesPlayground = document.getElementById('bonesPlayground');
updateBonesPlayground();
document.addEventListener("keydown", function (e) {
if(bonesReady && e.keyCode == '38') {
bonesReady = false;
bonesUp(bones);
}
if(bonesReady && e.keyCode == '37') {
bonesReady = false;
bonesLeft(bones);
}
if(bonesReady && e.keyCode == '40') {
bonesReady = false;
bonesDown(bones);
}
if(bonesReady && e.keyCode == '39') {
bonesReady = false;
bonesRight(bones);
}
});
bonesReady = true;
}
function updateBonesPlayground() {
bonesPlayground.style.height = window.innerHeight.toString() + "px";
bonesPlayground.style.width = window.innerWidth.toString() + "px";
}
function bonesUp(bones, frameCount) {
if (typeof(frameCount) == 'undefined') {frameCount = 0;}
bones.style.backgroundPosition = X_OFFSETS[frameCount].toString() + "px " + WALKU_Y_OFFSET.toString() + "px";
bones.style.top = (parseInt(bones.style.top) - WALK_STEP_SIZE).toString() + "px";
if (++frameCount != X_OFFSETS.length) {
setTimeout(bonesUp, FRAME_TIMEOUT, bones, frameCount);
}
else {
setTimeout(function() {bonesReady = true}, FRAME_TIMEOUT);
}
}
function bonesLeft(bones, frameCount) {
if (typeof(frameCount) == 'undefined') {frameCount = 0;}
bones.style.backgroundPosition = X_OFFSETS[frameCount].toString() + "px " + WALKL_Y_OFFSET.toString() + "px";
bones.style.left = (parseInt(bones.style.left) - WALK_STEP_SIZE).toString() + "px";
if (++frameCount != X_OFFSETS.length) {
setTimeout(bonesLeft, FRAME_TIMEOUT, bones, frameCount);
}
else {
setTimeout(function() {bonesReady = true}, FRAME_TIMEOUT);
}
}
function bonesDown(bones, frameCount) {
if (typeof(frameCount) == 'undefined') {frameCount = 0;}
bones.style.backgroundPosition = X_OFFSETS[frameCount].toString() + "px " + WALKD_Y_OFFSET.toString() + "px";
bones.style.top = (parseInt(bones.style.top) + WALK_STEP_SIZE).toString() + "px";
if (++frameCount != X_OFFSETS.length) {
setTimeout(bonesDown, FRAME_TIMEOUT, bones, frameCount);
}
else {
setTimeout(function() {bonesReady = true}, FRAME_TIMEOUT);
}
}
function bonesRight(bones, frameCount) {
if (typeof(frameCount) == 'undefined') {frameCount = 0;}
bones.style.backgroundPosition = X_OFFSETS[frameCount].toString() + "px " + WALKR_Y_OFFSET.toString() + "px";
bones.style.left = (parseInt(bones.style.left) + WALK_STEP_SIZE).toString() + "px";
if (++frameCount != X_OFFSETS.length) {
setTimeout(bonesRight, FRAME_TIMEOUT, bones, frameCount);
}
else {
setTimeout(function() {bonesReady = true}, FRAME_TIMEOUT);
}
}
window.onload = init;
window.onresize = updateBonesPlayground;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bones</title>
<style>
body, html {
margin: 0;
padding: 0;
border: 0;
}
#bones {
width: 50px;
height: 50px;
background: url(http://s12.postimg.org/3p9w0d7ul/ss_skel.png);
background-position: -7.5px 692px;
position: relative;
}
</style>
<script src="bones.js"></script>
</head>
<body>
<div id="bonesPlayground">
<div id="bones" style="top: 10px; left: 10px"></div>
</div>
</body>
</html>