Question

I’m new to the canvas tag and am playing around with some animation. Basically, I’m trying to setup a “ground” section composed of multiple images (similar to an 8bit side scroller game like Mario Brothers). The ground will be composed of multiple images, which I’ve built a constructor function to load these and tile them across the bottom.

function Ground(context,ImageName,ImgX,ImgY,ImgW,ImgH){
    this.width=ImgW;
    this.height=ImgH;
    this.x=ImgX;
    this.y=ImgY;
    img=new Image();
        img.onload=function(){context.drawImage(img,ImgX,ImgY,ImgW,ImgH);};
    img.src='images/'+ImageName;};

This seems to work out just fine. I’ve then setup the rest of the animation, including a basic setup for Key Left/Right events, like so:

window.onload=function(){
    var canvas=document.getElementById('canvas'),
    context=canvas.getContext('2d'),
        Grounds=[],
        ImgX=-150; // INITIAL STARTING X FOR FIRST GROUND TILE

    // INSERT GROUND ELEMENTS
    for(var i=0,l=8; i<l; i++){
             var ImgX+=150;
             Grounds[i]=new Ground(context,"ground.png",ImgX,650,150,150);
        };

    // ASSIGN LEFT/RIGHT KEYS
    window.addEventListener('keyup',function(event){
              switch(event.keyCode){
                case 37:
                for(var i=0,l=Grounds.length; i<l; i++){
                         Grounds[i].x+=10;
                    };  
                 break;
            case 39:break;
              };
         });

    // ANIMATION LOOP
    (function drawFrame(){
    window.mozRequestAnimationFrame(drawFrame,canvas);
        context.clearRect(0, 0, canvas.width, canvas.height);

    }());
};

I know exactly what my problem is, but don’t know how to solve it. The animation loop is clearing the canvas every frame, but not redrawing the updated position (if any) when the user presses the left arrow key.

I’m missing the redraw part here and I’m not exactly sure how to handle this or if I’m approaching this entirely wrong. Any help is very appreciated! Thanks!

Answer 1

First of all you’re incrementing the property x of the ground tiles but that property is not even used anywhere in your code. Modify your code so that the onload event of those image objects draws the image according to their own x property so changes to it will actually affect what is drawn. Also add the image object as a property of the Ground object so you can access it later on from outside.

Your approach is really not so good but if you want to do it without going back to 0 do it as follows:

function Ground(context,ImageName,ImgX,ImgY,ImgW,ImgH){
    this.width=ImgW;
    this.height=ImgH;
    this.x=ImgX;
    this.y=ImgY;
    var self = this; // Add local reference to this Ground instance 
    this.img=new Image(); // img is now a property too
        this.img.onload=function(){context.drawImage(this, self.x, self.y,self.width,self.height);};
    this.img.src='images/'+ImageName;};

Ok so now you can change the property x of the ground tiles and call the draw function of it again (which is the onload event).

Grounds[i].x+=10;
Grounds[i].img.dispatchEvent(new Event("load"));

Please note that you should really make the updates of all the values first and then all the draw calls separately.