How do I do JavaScript Array Animation

I'm making a game but don't know how to do Array Animation with the png Array and game Surface that I made below. I'm trying to make it so that when the Right arrow key is pressed, the character animates as if it is walking to the right and when the Left arrow key is pressed it animates as if it is walking to the left (kind of like Mario). I put everything on a surface instead of the canvas. Everything is explained in the code below. I couldn't find help on this anywhere. I hope what I got below makes sense. I'm basically a beginner with JavaScript. I'll be back if more is needed:

   <!doctype html5>

<html>

<script src="graphics.js"></script>
<script src="object.js"></script>

<body onkeydown ="keyDown(event)" onkeyup ="keyUp(event)" ></body>

<script>

//"Surface" is where I want to display my animation. It's like the HTML
// canvas but it's not that. It's just the surface to where everything in the
//game and the game itself will be displayed.

var Surface = new Graphics(600, 400, "skyblue");

//here's the array that I want to use for animation

var player = new Array("StandsRight.png", "WalksRight.png", "StandsLeft.png","WalksLeft.png" );

//Here is the X coordinate, Y coordinate, the beginning png for the animation,
//and the object's name "player." I also turned the array into an object (but
//I don't know if I was supposed to do that or not).

var player = new Object(50, 100, 40, 115, "StandsRight.png","player");

//When doing animation I know that it requires a "loop", but I don't
// know how to connect it so that it works with the arrays so that
//it could animate.

var loop = 0;

//this actually puts "player" on screen. It makes player visible and
//it is where I would like the animation to occur.

Surface.drawObject(player);

//this would be the key that makes "player" animation in the righward direction
function keyDown(e) {

if (e.keyCode == 39);

}

//this would be the key that makes "player" animation in the leftward direction
function keyUp(e){

if (e.keyCode == 39);

}

//this is the Mainloop where the game will function
MainLoop();

//the mainloop functionized
function MainLoop(){

//this is how fast or slow I could want the entire game to go
setTimeout(MainLoop, 10);

}

</script>

</html>


From here, are the "graphic.js" and the "object.js" files below. In this section is the graphics.js file. This graphics.js part below is linked to the: script src="graphics.js"> html script section that I wrote above. Basically, below is a seperate file that I used for Graphics, and to run the code above, make this graphics.js code that I post below here, a separate filed called: graphics.js

function Graphics(w,h,c) {

document.body.innerHTML += "<table style='position:absolute;font-
size:0;top:0;left:0;border-spacing:0;border-
width:0;width:"+w+";height:"+h+";background-color:"+c+";' border=1><tr><td>

</table>\n";

this.drawRectangle = function(x,y,w,h,c,n) {
document.body.innerHTML += "<div style='position:absolute;font-size:0;left:" + x +
";top:" + y + ";width:" + w + ";height:" + h + ";background-color:" + c + ";' id='"
+ n + "'></div>\n";
}

this.drawTexture = function(x,y,w,h,t,n) {
document.body.innerHTML += "<img style='position:absolute;font-size:0;left:" + x +
";top:" + y + ";width:" + w + ";height:" + h + ";' id='" + n + "' src='" + t + "'>
</img>\n";
}

this.drawObject = function(o) {

document.body.innerHTML += "<img style='position:absolute;font-size:0;left:" +
o.X + ";top:" + o.Y + ";width:" + o.Width + ";height:" + o.Height + ";' id='" +
o.Name + "' src='" + o.Sprite + "'></img>\n";
}

this.moveGraphic = function(x,y,n) {

document.getElementById(n).style.left = x;
document.getElementById(n).style.top = y;
}

this.removeGraphic = function(n){
document.getElementById(n).parentNode.removeChild(document.getElementById(n));
}

}


Finally, is the object.js file linked to the script src="object.js">" in the html game file above the graphics.js part I just wrote. Basically, this is a separate file too, so thus, in order to run or test the html game code in the very first section I wrote, a person has to also make this code below a separate file called: object.js

I hope this helps:

  function Object(x,y,w,h,t,n) {
this.X = x;
this.Y = y;
this.Velocity_X = 0;
this.Velocity_Y = 0;
this.Previous_X = 0;
this.Previous_Y = 0;
this.Width = w;
this.Height = h;
this.Sprite = t;
this.Name = n;
this.Exists = true;
}


I'm just trying to learn how to add animations with it now. I hope the above helps. If not, let me know. Thanks

• I suggest you put your script tags in the <head>. That makes sure that it's loaded before the buttons, links, and the like, not that you might need it, but it's standard to do so. Create arrays with [ and ]. – jcora Jun 29 '12 at 22:07
• Wow, I'm editing what you've provided, and your code makes zero sense, lol. I don't know what's in object.js, either, but it sure as hell isn't healthy. – jcora Jun 29 '12 at 22:18
• Hey, who made those libraries? – jcora Jun 29 '12 at 23:45
• Someone from youtube at: youtube.com/watch?v=t2kUzgFM4lY&feature=relmfu those libraries can be gotten from the description part inside the video link under the word "classes" – Henry Jun 29 '12 at 23:57
• OK, that video is awful. Use <canvas>, for Christ's sake, unless you really need DOM. – jcora Jun 30 '12 at 0:03

Edit: Don't do that "Object" thing! "Object" is the base constructor function for every object in Javascript! And you're overwriting it!

x = new Object(); //Is the same as
y = {}; //this.


You're going to mess things up if you overwrite Object. Find a new name, like simply "Player". Then, do player = new Player(arguments). I'm not saying that Object gets executed each time you make an object, nor that the function actually does something important, but it's a generally bad idea to do things like these.

As I've said in the comment, your code makes little sense. What does the object.js file do? Anyway, here's your code, but with a bit of sense put into. I say "bit", because I still don't know how you are handling images or what new Object() does (or even better, what you think it does).

    <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.
}
}

{
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>