23 改变方向

你已经知道了如何让一个形状向右移动（把x的值增加），但是如果需要改变运动的速度又该如何实现呢，或者如何改变动画的方向呢？非常简单：只需要增加（或减少）x和y值就可以了。如果你使用与前面示例相同的代码，按以下方式修改tmpShape.x++语句，就可以非常方便地使形状沿着向右的对角线方向运动：

tmpShape.x += 2; 
tmpShape.y++; 

与前面代码的不同之处在于，上面的代码将x值每次增加2，而不是增加1，并将y值每次增加1。这样产生的效果是，在每次动画循环中，每个形状向右移动2像素，并向下移动1像素，即为向右的对角线方向移动（如图1所示）。

或者还可以实现一些非常有趣的效果。例如，在每个动画循环中将x和y值设为随机值。这样产生的动画效果就具有不可预测性和无序性，形状将表现为不规则的运动形式，这种方法可以让对象的运动更加生动自然：

tmpShape.x += Math.random()*4-2; 
tmpShape.y += Math.random()*4-2; 

以上代码的作用是产生一个介于0到4之间的随机数（Math.random产生一个0到1之间的数，然后将该数乘以4），然后减去2得到一个介于-2到2之间的随机数。通过这种方法，形状可以向右运动（x值为正数）、向左运动（x值为负数）、向上运动（y值为正数）和向下运动（y值为负数）。

如果你在浏览器中尝试该方法，形状将会前后随机运动，并出现摆动现象（如图2）。

发布时间：2013/2/22 上午10:12:08  阅读次数：7229