有意思的逻辑问题：关于AB运动轨迹问题

柴华松

已于 2023-03-24 15:56:49 修改

阅读量233

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-03-24 15:55:59 首次发布

本文链接：https://blog.csdn.net/chaihuasong/article/details/129752517

版权

A始终朝向B，B始终跟A垂直，如果两者速度相等，运动轨迹
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<head>
    <title>Point Movement</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>

    <script>
        const canvas = document.getElementById("myCanvas");
        const context = canvas.getContext("2d");

        const A = {x: 100, y: 100}; // 红点的起始位置
        const B = {x: 400, y: 400}; // 蓝点的起始位置
        const v = 2; // 点的速度

        function drawPoint(point, color) {
            context.beginPath();
            context.arc(point.x, point.y, 5, 0, Math.PI * 2, true);
            context.closePath();
            context.fillStyle = color;
            context.fill();
        }

        function drawLine(point1, point2, color) {
            context.beginPath();
            context.moveTo(point1.x, point1.y);
            context.lineTo(point2.x, point2.y);
            context.strokeStyle = color;
            context.stroke();
        }

        function update() {
            // 计算红点应该移动的方向
            const angle = Math.atan2(B.y - A.y, B.x - A.x);

            // 计算红点的新位置
            A.x += v * Math.cos(angle);
            A.y += v * Math.sin(angle);

            // 计算蓝点的新位置
            B.x += v * Math.cos(angle - Math.PI / 2);
            B.y += v * Math.sin(angle - Math.PI / 2);

            // 绘制红点和蓝点
            drawPoint(A, "red");
            drawPoint(B, "blue");

            // 绘制红点和蓝点之间的连线
            drawLine(A, B, "black");

            // 延迟一段时间后更新下一帧
            setTimeout(update, 10);
        }

        update(); // 开始运行
    </script>
</body>
</html>

柴华松

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
有意思的逻辑问题：关于AB运动轨迹问题

A始终朝向B，B始终跟A垂直，如果两者速度相等，运动轨迹。// 绘制红点和蓝点之间的连线。// 延迟一段时间后更新下一帧。// 计算红点应该移动的方向。// 计算红点的新位置。// 计算蓝点的新位置。// 红点的起始位置。// 蓝点的起始位置。// 绘制红点和蓝点。
复制链接

扫一扫