使用js画小球沿直线运动

JavaScript07

使用js画小球沿直线运动,第1张

js:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBeeline/demo1.js

html:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBeeline/demo1.html

准备属性值:

   本文使用js画直线,运用到css中的一些属性。

绘制的步骤:

    在本例中,绘制直接使用鼠标。点击获得起始点,拖动到终点获得结束点,鼠标松开就绘制图形。

获得起始点:

获得结束点:

绘制直线:

    使用了jquery中的animate()方法。

   js:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBall/demo2.js

   html:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBall/demo2.html

小球的属性:

创建小球:

使小球运动:

    将之前的画直线的方法封装成一个固定起点和终点的类。

js:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/js/createLine.js

html:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/demo1.html

你好,

可以通过判断小球边缘和窗口高度来实现

例如垂直下落,给小球y方向的初速度和加速度(模拟重力加速度),当小球的小边缘接触窗口底部时,将 y = -y;加速度不反向;当达到最高点及y方向速度为零,将y再反向向下落。

来回弹动关键在于 对边缘的判断,和速度方向的判断和计算