0
\$\begingroup\$

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

Improve this question
\$\endgroup\$
8
  • \$\begingroup\$ 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 ]. \$\endgroup\$
    – jcora
    Jun 29, 2012 at 22:07
  • \$\begingroup\$ 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. \$\endgroup\$
    – jcora
    Jun 29, 2012 at 22:18
  • \$\begingroup\$ Hey, who made those libraries? \$\endgroup\$
    – jcora
    Jun 29, 2012 at 23:45
  • \$\begingroup\$ 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" \$\endgroup\$
    – Henry
    Jun 29, 2012 at 23:57
  • \$\begingroup\$ OK, that video is awful. Use <canvas>, for Christ's sake, unless you really need DOM. \$\endgroup\$
    – jcora
    Jun 30, 2012 at 0:03

1 Answer 1

Reset to default
1
\$\begingroup\$

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

        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>

If you want, I can write this through, completely. For that, I will use my Loader.js utility, which I recommend you use as well. I assure you that this code will not work, because you're working with strings, not image objects.

Improve this answer
\$\endgroup\$
10
  • \$\begingroup\$ Ok, I'll redo the code above and include the "graphics.js" and "object.js." The reason I didn't include it is because I thought it would be a lot to sift through. I'll be back momentarily \$\endgroup\$
    – Henry
    Jun 29, 2012 at 22:44
  • \$\begingroup\$ Can you upload them somewhere else? If it's too lengthy, don't put entire frameworks here. \$\endgroup\$
    – jcora
    Jun 29, 2012 at 22:57
  • \$\begingroup\$ I went back and edited my the code above. If it's too lenghthy, I'll be glad to repost it in such a way that it's not lengthy. But basically, I just added the two files: the graphics.js and the object.js that are to be made separate from the first html file I wrote. Thanks \$\endgroup\$
    – Henry
    Jun 29, 2012 at 23:38
  • 1
    \$\begingroup\$ Bane, thanks for the help. I was able to get it to work. \$\endgroup\$
    – Henry
    Jul 21, 2012 at 21:40
  • 1
    \$\begingroup\$ Ok, I will. You were a huge help \$\endgroup\$
    – Henry
    Jul 22, 2012 at 12:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .