0

I'm new with canvas. I'm a student currently developing a Runner Game in canvas. I have the function jump(), that is called when the mousedown() event occurs;

function jump(){
    img= new Image();
    //is_jump=1;
    h.clearRect(20,430,170,250);
    img.onload= function(){
        //h.drawImage(img,mx,my,190,280,120,410,190,350);
        h.drawImage(img,mx,my,190,350);
        //mX--;
        //mY--;
    }
    img.src= "mario-Copy.png";
    h.clearRect(mx,my,190,350);
    //for(i=mx;i<130;i+=7)
    //{
    if(mx<110&&my<480){
        mx=(mx+5);
        my=(my-15);
        //setTimeout(h.drawImage(img,mx,my,190,350),100000/5);
        h.drawImage(img,mx,my,190,350);
    }else{
        mx=60;
        my=410;
    }
}

The problem is that the jumping character is not working properly, it jumps slowly and not clear the previous jumping state image while moving on.

So help me out so my animation works properly and smoothly.

The goal is to make the character jump by click.

Jarrod
  • 9,349
  • 5
  • 58
  • 73
Hammad Hassan
  • 54
  • 10
  • 4
    With interactive content/games it's almost the best idea to post a simple snippet that will [run on it's own](http://sscce.org). If we cannot reproduce this for a general scenario your question is probably to localized. But for one, you shouldn't load `mario-Copy` for each jump. Instead load the image _once_ and reuse it. – Zeta Apr 25 '13 at 10:45
  • Can you explain the significance of the various magic numbers (like 190 and 350) spattered around your code? It would be best practice to [replace those with a significantly named constant that actually expresses what the number means](http://www.refactoring.com/catalog/replaceMagicNumberWithSymbolicConstant.html). Magic numbers are [not good to have in your code](http://stackoverflow.com/q/47882/254830). – doppelgreener Apr 26 '13 at 02:26

1 Answers1

0

I think the problem is you're clearing and redrawing in the same function of jump. what I would do is creat a seperate draw() and clear() and put those inside an setinterval and have that run. Then, all your jump function needs to do is update the position of your object, which you can either do directly by having the position being drawn changed by your jump(), or have a seperate update() function before draw to edit those values.

Peter
  • 1