Question

我的观念相当简单。以单向动画图像，然后让它回来。

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 语句变为true。但是，一旦低于250，第一个如果再次变为真。所以我知道问题是什么，我只是不知道如何解决它。任何帮助表示赞赏！

Answer 1

有一个速度变量（正数是右，负数是左，幅度是改变每个循环的像素数）：

var xVelocity = 2;

并使用它来确定每个循环添加到xPos的内容：

xPos += xVelocity;

然后根据xVelocity和xPos设置它，以便图像“反弹”：

if(xVelocity > 0){
    if(xPos > 250){
        xVelocity = -2;
    }
} else {
    if(xPos < 10){
        xVelocity = 2;
    }    
}

Answer 2

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

这是你想要的吗？或者你想在左边停止它？

UPD。：你也可以像这样反弹 - http://jsbin.com/uweyam/4/edit

Javascript / HTML5 - 尝试制作简单的游戏AI

2 个答案: