<script>
//For rendering (drawing), use window.requestAnimationFrame(nameOfRenderFunction). It's simple to setTimeout, only you don't need to worry about FPS, as the browser will do various optimizations for you.
//You can ignore this. It just fixes the fact that different browser engines have different names for this function.
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
//This happens when ANY key on the keyboard is pressed.
function keyDown(e)
{
//If the key is the right arrow
if (e.keyCode == 39);
{
player.image = playerImages[1]; //This doesn't do any animation, though.
}
}
function mainLoop() //Function names start with a lowercase letter.
{
timePassed = new Date().getTime() - timePassed; //new Date().getTime() returns the current time in milliseconds.
//Do logic. (Check if key is pressed, then move the player accordingly by playerSpeed*timePassed, for example).
}
function render()
{
if (rendering)
{
window.requestAnimationFrame(render);
}
Surface.drawObject(player);
}
//This gets called once the page loads. It's a useful technique.
var init = function()
{
//If you declare variables without the var prefix, they become global (which means that you can use them in any function).
Surface = new Graphics(600, 400, "skyblue");
playerImages = ["StandsRight.png", "WalksRight.png", "StandsLeft.png","WalksLeft.png"]; //These are only the sources, you'll want to load the images and put them here.
player = new Object(50, 100, 40, 115, "StandsRight.png","player"); //I'm not sure what is this supposed to do... Object is a built-in Javascript "class", this doesn't do anything. But I guess that's changed in you "object.js" file, but you should definetivly avoid this.
//It's good to separate logic from rendering.
var LPS = 30; //Logic per second.
setInterval(mainLoop, 1000/LPS);
rendering = true; //Set to false when you want to stop rendering.
window.requestAnimationFrame(render);
}
</script>
</head>
<body onload="init();" onkeydown ="keyDown(event);" onkeyup ="keyUp(event);">
</body>
