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
