0

私のコンセプトはかなり単純です。画像を一方向にアニメーション化してから、元に戻します。

var xPos = 10;

function main(){
    window.requestAnimationFrame(main);
    var canvas = document.getElementById("myCanvas");
    var c = canvas.getContext("2d");

    //Initialize images
    var img = new Image();
    img.src = "goomba.png";

    c.clearRect(0,0,500,500);
    c.drawImage(img,xPos,10);


    //increment coordinates
    if(xPos <= 250){
        xPos+=2;
    }
    else if(xPos >= 250){
        xPos-=2;
    }
}
window.requestAnimationFrame(main);

私は自分のコードの問題が何であるかをすでに知っています。xPos が 250 を超えると、2 番目のifステートメントが true になります。ただし、250 を下回ると、最初のifが再び true になります。だから私は問題が何であるかを知っていますが、それを修正する方法がわかりません。どんな助けでも大歓迎です！

4

2 に答える 2

1

速度変数を設定します（正は右、負は左、振幅は各ループを変更するピクセル数）：

var xVelocity = 2;

そして、それを使用して、各ループのxPosに何を追加するかを決定します。

xPos += xVelocity;

次に、xVelocityとxPosに基づいて設定し、画像が「バウンス」するようにします。

if(xVelocity > 0){
    if(xPos > 250){
        xVelocity = -2;
    }
} else {
    if(xPos < 10){
        xVelocity = 2;
    }    
}
于 2013-02-05T15:42:50.973 に答える
0

http://jsbin.com/uweyam/1/edit

これは、あなたの望むことですか？それとも左端で止めますか？

UPD .: このようにバウンスさせることもできます - http://jsbin.com/uweyam/4/edit

于 2013-02-05T15:51:21.273 に答える