我一直在玩弄 JavaScript/JQuery，并决定创建一个小程序来制作一个球在矩形边界区域周围弹跳的动画。我相信我的代码逻辑应该是有道理的，但出于某种原因我无法让它改变方向。更奇怪的是，我将球的 x 和 y 位置作为文本放在上面，但它似乎静态卡住了(它没有改变)，但我看到当我检查元素时它是左边的并且顶部 css 参数正在改变时间。
代码如下:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<style>
.ball {
width: 50px;
height: 50px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
}
.boundary {
width: 700px;
height: 500px;
background: #AAAAAA;
border-style:solid;
border-width:5px;
position: absolute;
}
</style>
<script>
$(document).ready(function(){
var b = new ball(1, 1, 10, 10);
for(i = 0; i < 1000; i++)
b.moveBall();
});
function ball(xPos, yPos, xVel, yVel)
{
this.xPos = xPos;
this.yPos = yPos;
this.xVel = xVel;
this.yVel = yVel;
this.rightBound = false
this.leftBound = false;
this.upBound = false;
this.downBound = false;
this.width = 50;
this.height = 50;
this.moveBall = moveBall;
function moveBall()
{
var h = 500;
var w = 700;
//detect if it is at x bounds
if(this.xPos + this.width + this.xVel > w)
{this.rightBound = true;}
else if(this.xPos + this.xVel < -1)
this.leftBound = true;
else
{
this.rightBound = false;
this.leftBound = false;
}
//detect if it is at y bounds
if(this.yPos + this.height + this.yVel > h)
{this.downBound = true;}
else if(this.yPos + this.yVel < -1)
this.upBound = true;
else
{
this.upBound = false;
this.downBound = false;
}
//handle velocity changes for bounds
//so you switch the x direction if x bound is met, same for y
if(this.rightBound || this.leftBound)
this.xVel *= -1;
if(this.upBound || this.downBound)
this.yVel *= -1;
//now give motion
this.xPos += xVel;
this.yPos += yVel;
//now draw
$(".ball").animate({
left:this.xPos + 'px',
top:this.yPos + 'px'
}, 150).text(this.xPos + "," + this.yPos);
}
}
</script>
</head>
<body>
<div class="boundary">
<div class="ball"></div>
</div>
</body>
</html>
奇怪的是，它似乎从一开始就自动将 10,001、10,001(假设它永远不会改变方向)的结束值作为 (x,y) 坐标。任何能给我指明正确方向的东西都将不胜感激!抱歉，如果这是一些基本错误，我试图确保不是，但有时它们会漏掉!
最佳答案
您正在循环执行您的 ball.moveBall，而不是在计时器上。所以它会尽可能快地进行计算。是的，computably 不是一个词。继续前进。
通过调用 $.animate，您是说您希望 jQuery 处理将对象从一个位置移动到另一个位置的操作。 jQuery 比计算机慢得多。等等，这越来越困惑了。让我简单地说一下。
你循环 ball.moveBall 1000 次。这需要多长时间？几乎没有时间。这就是坐标一直停留在 1000 的原因。它实际上到达那里 super super super 快。如此之快，它基本上在 jQuery 有时间开始移动球之前到达那里。然后……然后球开始移动。为什么？为什么它不立即移动到位置 1000,1000？好吧，坐标确实达到了 1000,1000。但是 jQuery 就像，“哦，好吧，把球移到位置 1000,1000。我能做到!真的真的很慢......”。您可能厌倦了听到这些解释，所以这是解决方法:
将 $(".ball").animate 更改为 $(".ball").css。并将循环更改为 window.setInterval(function(){b.moveBall()},1000) 或类似的内容。我在这里为你设置了一个 fiddle :http://jsfiddle.net/uXbwR/
您会注意到它移动得非常慢。那是因为我将间隔设置为 1000 毫秒，这意味着它每秒只移动一次。对于一场比赛，你会想要 1000/60(每 60 秒一次)，但我试过了，它让球移动得非常快。你的球速非常高。您可能想尝试将其调低一点。
这就是我所拥有的。
编辑
计算。这就是我要找的词。
关于javascript - javascript对象和动画的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17411836/