首页技术正文

js模拟抛出球运动

程序员红胜技术 2022年11月8日

0 收藏 360 点赞 1,754 浏览 1343 个字

js练手之模拟水平抛球运动

-匀加速运动

-匀减速运动

模拟运动有些基本的思路，当前所在点的坐标，元素的长宽是多少，向右/向下运动x/y增加，向上/向左运动x/y减少，运动的路程是多少，用什么方程进行计算，要如何对方程进行适应性修改

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>js模拟抛出球运动</title>
</head>
<body>
    <div id="ball" style="top: 10px; left: 10px;"></div>
</body>
</html>

body{background-color:rgb(44,52,55);position:relative;width:100%;height:100%;}
#ball {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
        position: absolute;
        border-radius: 100%;
        -webkit-border-radius: 100%;
    }

        (function () {
          //把X,Y维度的运动单独分开处理，X方向是匀速，Y维度是匀加速运动
            var t_x = 0,//x维度的时间t
                t_y = 0,//y维度的时间t
                s_x = 0,//x维度的运动距离
                s_y = 0,//y维度的运动距离
                t_x_increase=5,
                t_y_increase=0.3,
                isMovingUp = 1;
            var _ball = document.getElementById("ball");
            var ballTop = parseInt(_ball.style['top']),
                ballLeft = parseInt(_ball.style['left']);            function ballMovement() {//js模拟抛出球运动，这里忽略了空气阻力
                t_x += t_x_increase;
                if (t_x >= 600) {//水平方向运行到600px时重复
                    t_x = 0;
                }
                s_x = t_x;
                _ball.style['left'] = (ballLeft + s_x) + 'px';                t_y += t_y_increase;
                if (t_y >= 6 ) {//y方向向下加速到时间为6就反方向
                    isMovingUp = -1 * isMovingUp;
                    t_y = 0;
                } else if (t_y<0) {//y方向向上减速到时间为0就反方向
                    isMovingUp = -1 * isMovingUp;
                    t_y = 0;
                }
                if (isMovingUp != -1) {
                    s_y = 10 * Math.pow(t_y, 2) / 2;//s = gt^2/2　加速向下
                } else {
                    s_y = 180-(60 * t_y - 10 * Math.pow(t_y, 2) / 2);// s=vt-gt^2/2 减速向上
                }
                _ball.style['top'] = (ballTop + s_y) + 'px';//实时设置位置                requestAnimationFrame(ballMovement); // repeat
            }            ballMovement();        })();