How do I do JavaScript Array Animation
- by Henry
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>
<head></head>
<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;
}
In all, this game is made based on a tutorial on youtube at: http://www.youtube.com/watch?v=t2kUzgFM4lY&feature=relmfu
I'm just trying to learn how to add animations with it now.
I hope the above helps. If not, let me know. Thanks
