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
