十四.2重力，重力加速度，重力加速度运动

本文链接：https://blog.csdn.net/xiaomogg/article/details/79302675

生活中，每时每刻我们都逃脱不了地球对我们的作用力--重力。

说到重力，不得不提的东西，那就是重力加速度

重力加速度说特殊也特殊，说不特殊，真的一点都不特殊。

特殊：

是两个物体之间的引力形成

不特殊：

其实就是个Y轴方向的正方向（只是相对canvas坐标系而言）加速度，这里再次强调CANVAS的坐标Y轴下方向为正方向

语法：

vy+=g;

obj.y+=vy;

抛物线在线demo：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script src="../assit/arrow.js"></script>
    <script src="../assit/tools.js"></script>
    <script src="../assit/ball.js"></script>
    <script>
    function $$(id) {
        return document.getElementById(id);
    }
    window.onload = function() {
        var cnv = $$("canvas");
        var cxt = cnv.getContext("2d");

        //实例化一个小球，中心坐标为10,25 半径颜色都去默认值
        var ball = new Ball(10, 30);

        var centerY = cnv.height ;
        ball.y=centerY;
        //初始化X轴的速度以及加速度
        var vx=4;
        var vy=-5;
        var gravity=0.2;

        (function frame() {
            window.requestAnimationFrame(frame);
            cxt.clearRect(0, 0, cnv.width, cnv.height);

            ball.x += vx;
            ball.y+=vy;
            ball.fill(cxt);
            //递增（做减速度,W3C坐标）
			vy+=gravity;

        })();
    }
    </script>
</body>

</html>

综合复习:

demo1："抛物线"-重力的运用并最终X方面没有停止在线demo：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="1200" height="400"></canvas>
    <script src="../assit/arrow.js"></script>
    <script src="../assit/tools.js"></script>
    <script src="../assit/ball.js"></script>
    <script>
    function $$(id) {
        return document.getElementById(id);
    }
    window.onload = function() {
        var cnv = $$("canvas");
        var cxt = cnv.getContext("2d");

        //实例化一个小球，中心坐标为10,25 半径颜色都去默认值
        var ball = new Ball(10, 30);

       //Y轴初始化速度为0，重力加速度为0.2，反弹系数为-0.8
       var vy=0;
       var vx=3;
       var gravity=0.5;
       var bounce=-0.8;

        (function frame() {
            window.requestAnimationFrame(frame);
            cxt.clearRect(0, 0, cnv.width, cnv.height);

          
            ball.y+=vy;
            ball.x+=vx;//Y方向滚动
            if(ball.y>cnv.height-ball.radius){
                ball.y=cnv.height-ball.radius;
                //速度反方向并不断减少
                vy=vy*bounce;
            }
            ball.fill(cxt);
            //递增（做减速度,W3C坐标）
			vy+=gravity;

        })();
    }
    </script>
</body>

</html>

demo2;"抛物线"-重力的运用并X轴方向最终停止在线demo:

使用摩擦力，并且X轴方向和Y轴方向加速度分而治之

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="1200" height="400"></canvas>
    <script src="../assit/arrow.js"></script>
    <script src="../assit/tools.js"></script>
    <script src="../assit/ball.js"></script>
    <script>
    function $$(id) {
        return document.getElementById(id);
    }
    window.onload = function() {
        var cnv = $$("canvas");
        var cxt = cnv.getContext("2d");

        //实例化一个小球，中心坐标为10,25 半径颜色都去默认值
        var ball = new Ball(10, 30);

       //Y轴初始化速度为0，重力加速度为0.2，反弹系数为-0.8
       var vy=0;
       var vx=3;
       var gravity=0.5;
       var bounce=-0.8;
        //
        (function frame() {
            window.requestAnimationFrame(frame);
            cxt.clearRect(0, 0, cnv.width, cnv.height);

          
            ball.y+=vy;//Y方向滚动
            ball.x+=vx;//加速度递减,但是仍然在前进

            if(ball.y>cnv.height-ball.radius){
                ball.y=cnv.height-ball.radius;
                //速度反方向并不断减少
                vy=vy*bounce;

            }
            ball.fill(cxt);
            //递增（做减速度,W3C坐标）
			vy+=gravity;
            //x,y方向分而治，的确能降低难度，但是容易出现x方向和y方向受力不一致出现，Y方向还在运动，x方向不动了的情况
            vx>0?(vx-=0.01):(vx=0);

        })();
    }
    </script>
</body>

</html>

在加速度篇，我们讲解了加速度的分解和合并，那么重力既然也是加速度，那我们也使用加速度合并和分解来处理

综合复习demo2，里面对X轴和Y轴分而治，不大符合加速度合并和分解的原则，加速度是在X轴和Y轴作用力的合力下尝试的

在角度一样和摩擦力一样的情况下，通过修改不同的初始力speed来展示不同物体往下砸的效果

这里用到了摩擦力，摩擦力和重力是有区别的：

重力的应用在碰到底部的时候会取反，而摩擦力只会速度绝对值的大小直至0，但是无法让物体反方向运动

在线demo：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <select id="speed" style="display:block;">
        <option value="1">速度为:1</option>
        <option value="2">速度为:2</option>
        <option value="3">速度为:3</option>
        <option value="4">速度为:4</option>
        <option value="5">速度为:5</option>
    </select>
    <canvas id="canvas" width="1200" height="800"></canvas>
    <script src="../assit/arrow.js"></script>
    <script src="../assit/tools.js"></script>
    <script src="../assit/ball.js"></script>
    <script>
    function $$(id) {
        return document.getElementById(id);
    }
    window.onload = function() {
        var cnv = $$("canvas");
        var cxt = cnv.getContext("2d");

        //实例化一个小球，中心坐标为10,25 半径颜色都去默认值
        var ball = new Ball(30, 30);
        var centerX = 40;
        var centerY = 60;
        var speed = 1; //速度

        var gravity = 0.5; //重力
        var bounce = -0.8; //摩擦力

        ball.y = centerY;
        //速度与X轴方向角度为30度
        var vx = speed * Math.cos(30 * Math.PI / 180);
        var vy = speed * Math.sin(30 * Math.PI / 180);

        function baseData() {
        
      
            speed = 1; //速度

            gravity = 0.5; //重力
            bounce = -0.8; //摩擦力
             ball.x = centerX;
            ball.y = centerY;
            //速度与X轴方向角度为30度
            vx = speed * Math.cos(30 * Math.PI / 180);
            vy = speed * Math.sin(30 * Math.PI / 180);
        }

        document.getElementById("speed").onchange = function() {
           
             cxt.clearRect(0, 0, cnv.width, cnv.height);
             baseData();
              speed = document.getElementById("speed").value;
            // frame();
        }

        //边界检测
        function checkBorder() {
            //当小球碰到上边界时,
            if (ball.y < ball.radius) {
                ball.y = ball.radius;
                vy = vy * bounce; //加入摩擦力
            } else if (ball.y > cnv.height - ball.radius) {
                ball.y = cnv.height - ball.radius;
                vy = vy * bounce; //加入摩擦力
                vx = vx * 0.9; //碰撞到底部的时候，x方向的摩擦力不需要取反，同时摩擦力要比垂直方向要小(0.1~0.9k,取值越大，对加速度影响越小)

            }

            //当小球碰到左边界时
            if (ball.x < ball.radius) {
                ball.x = ball.radius;
                vx = vx * bounce; //加入摩擦力
            } else if (ball.x > cnv.width - ball.radius) {
                ball.x = cnv.width - ball.radius;
                vx = vx * bounce; //加入摩擦力
            }
        }

        function frame() {
            window.requestAnimationFrame(frame);
            cxt.clearRect(0, 0, cnv.width, cnv.height);
            console.log("没改吧气死你:",speed)
            ball.x += vx;
            ball.y += vy;
            checkBorder();
            ball.fill(cxt);
            //添加重力
            vy += gravity;
            //我尝试过在这添加x方向的摩擦力来模拟空气中的摩擦力，但是效果不佳，放弃
            //改为在碰到Y轴的时候添加X方向的空气的摩擦力
            
        };
        frame();
    }
    </script>
</body>

</html>