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 时，第二个if语句变为真。然而，一旦它低于 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 回答