JavaScript动画实例：炸开的小球

1．炸开的小球

      定义一个小球对象类Ball，它有6个属性：圆心坐标（x,y）、小球半径radius、填充颜色color、圆心坐标水平方向的变化量speedX、圆心坐标垂直方向的变化量speedY。

      Ball类定义2个方法：绘制小球的方法draw()和小球位置发生变化的方法update()。

      定义一个数组var balls = [];保存小球对象。鼠标单击画布，向数组中随机添加5~14个小球对象元素，当某个小球运动超出画布范围时，从数组中删除该小球对象元素。

      编写如下的HTML代码。

; "复制代码")

; "复制代码")

      在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中呈现出如图1所示的动画效果。

 

图1  炸开的小球

2．按颜色消除小球

      定义一个小球对象类Ball，它有6个属性：圆心坐标（x,y）、小球半径radius、填充颜色color、圆心坐标水平方向的变化量speedX、圆心坐标垂直方向的变化量speedY。

      Ball类定义1个方法：小球在画布中移动的方法move()。小球移动过程中，碰到画布的上下左右边界后会反弹，反弹后继续移动。

      定义一个数组var balls = [];保存小球对象，并向数组中添加50个小球对象元素。

      先编写如下的HTML代码。

; "复制代码")

; "复制代码")

      在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中呈现出如图2所示的动画效果。

 

图2  运动的彩色小球

      在图2效果的基础上，添加交互式效果。可以在画布的下方通过表格的方式布置10个颜色块，鼠标单击某个颜色块，画布中对应色块填充的小球消失（从balls数组中删除对应的对象元素）；若画布中没有对应色块填充的小球，则显示提示信息“无对应色块小球，无效单击！”。

      编写的HTML文件内容如下。

View Code

      在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中呈现出如图3所示的交互式动画效果。

 

图3  按指定颜色消除运动的小球