HTML5游戏jump（）函数无法正常运行

Question

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.

Answer 1

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.