11、投掷物体

最新推荐文章于 2024-03-05 09:45:24 发布

奇遇世界

最新推荐文章于 2024-03-05 09:45:24 发布

阅读量480

点赞数

本文链接：https://blog.csdn.net/late_in_autumn/article/details/93073897

版权

投掷物体，用鼠标选中一个物体，拖拽着它向某个方向移动，松开鼠标后物体沿着拖拽的方向继续移动。

在投掷物体时，必须在拖拽物体的过程中计算物体的速度向量，并在释放物体时将这个速度向量赋给物体。例如以每帧10个像素的速度向右拖拽物体，那么在释放物体时，他的速度向量应该是 vx = 10。

在拖拽物体时，它会在每一帧拥有一个新的位置。用当前帧的位置减去上一帧的位置，就可以计算出在这一帧所移动的距离。这就是每帧移动像素的速度向量值。

速度向量 = 新的位置 - 旧的位置

1、在 mousedown 时，用 oldX 和 oldY 变量保存小球旧的 x、y 坐标位置

oldX = ball.x;
oldY = ball.y;

2、在drawFrame中，用物体当前的 x、y 轴坐标分别减去 oldX 与 oldY，从而获得当前的速度向量，最后将 oldX 和 oldY 变量更新为物体当前的位置：

vx = ball.x - oldX;
vy = ball.y - oldY;
oldX = ball.x;
oldY = ball.y;

代码实现如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width">
    <title></title>
    <style>
        *{margin: 0;padding: 0}
        body {
            background-color: #eee
        }
        canvas {
            background-color: #fff
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400">
        Your browser does not support HTML5 Canvas.
    </canvas>
 
    <script>
        (function(){
            window.addEventListener("load", eventWindowLoaded, false);
            function eventWindowLoaded(){
                canvasApp();
            }
            function canvasSupport(e){
                return !!e.getContext;
            }
            function canvasApp(){
                let canvas = document.getElementById("canvas");
                if(!canvasSupport(canvas)){
                    return ;
                }
                // start
                let context = canvas.getContext("2d");
                drawScreen(canvas, context);
            }
 
            // write your codes
            function drawScreen(canvas, context){
                let mouse = captureMouse(canvas);
                let ball = new Ball();
                let vx = Math.random() * 10 - 5;
                let vy = -10;
                let bounce = -0.7;
                let gravity = 0.2;
                let isMouseDown = false;
                let oldX, oldY;
                let left = 0,
                    right = canvas.width,
                    top = 0,
                    bottom = canvas.height;
                
                ball.x = canvas.width / 2;
                ball.y = canvas.height / 2;

                canvas.addEventListener("mousedown", function() {
                    if (containsPoint(ball.getBounds(), mouse.x, mouse.y)) {
                        isMouseDown = true;
                        oldX = ball.x;
                        oldY = ball.y;
                        canvas.addEventListener("mouseup", onMouseUp, false);
                        canvas.addEventListener("mousemove", onMouseMove, false);
                    }
                }, false);

                function onMouseUp() {
                    isMouseDown = false;
                    canvas.removeEventListener("mouseup", onMouseUp, false);
                    canvas.removeEventListener("mousemove", onMouseMove, false);
                }

                function onMouseMove(event) {
                    ball.x = mouse.x;
                    ball.y = mouse.y;
                }

                function trackVelocity() {
                    vx = ball.x - oldX;
                    vy = ball.y - oldY;
                    oldX = ball.x;
                    oldY = ball.y;
                }

                function checkBoundaries() {
                    vy += gravity;
                    ball.x += vx;
                    ball.y += vy;

                    if (ball.x + ball.radius  > right) {
                        ball.x = right - ball.radius;
                        vx *= bounce;
                    } else if (ball.x - ball.radius < left) {
                        ball.x = left + ball.radius;
                        vx *= bounce;
                    }

                    if (ball.y + ball.radius > bottom) {
                        ball.y = bottom - ball.radius;
                        vy *= bounce;
                    } else if (ball.y - ball.radius < top) {
                        ball.y = top + ball.radius;
                        vy *= bounce;
                    }
                }

                (function drawFrame() {
                    window.requestAnimationFrame(drawFrame, canvas);
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    
                    if (isMouseDown) {
                        trackVelocity();
                    } else {
                        checkBoundaries();
                    }

                    ball.draw(context);
                } ())
            }
        })();
    </script>
    <script>
        function containsPoint(rect, x, y) {
            return !(x < rect.x || x > rect.x + rect.width || y < rect.y || y > rect.y + rect.height);
        }

        function captureMouse(element) {
            var mouse = {x: 0, y: 0, event: null},
                body_scrollLeft = document.body.scrollLeft,
                body_scrollTop = document.body.scrollTop,
                element_scrollLeft = document.documentElement.scrollLeft,
                element_scrollTop = document.documentElement.scrollTop,
                offsetLeft = element.offsetLeft,
                offsetTop = element.offsetTop;
        
            element.addEventListener("mousemove", function(){
                var x, y;
        
                if(event.pageX || event.pageY){
                    x = event.pageX;
                    y = event.pageY;
                }else{
                    x = event.clientX + body_scrollLeft + element_scrollLeft;
                    y = event.clientY + body_scrollTop + element_scrollTop;
                }
                x -= offsetLeft;
                y -= offsetTop;
        
                mouse.x = x;
                mouse.y = y;
                mouse.event = event;
            }, false);
        
            return mouse;
        }
    </script>
    <script>
        function Ball(radius, color) {
            if (radius === undefined) {
                radius = 40;
            }

            if (color === undefined) {
                color = "#ff0000";
            }

            this.x = 0;
            this.y = 0;
            this.color = color;
            this.radius = radius;
        }

        Ball.prototype.draw = function(context) {
            context.save();

            context.translate(this.x, this.y);
            context.fillStyle = this.color;
            context.beginPath();
            context.arc(0, 0, this.radius, 0, 360 * Math.PI / 180, false);
            context.closePath();
            context.fill();

            context.restore();
        }

        Ball.prototype.getBounds = function() {
            return {
                x: this.x - this.radius,
                y: this.y - this.radius,
                width: this.radius * 2,
                height: this.radius * 2
            };
        }
    </script>
</body>
</html>

奇遇世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11、投掷物体

投掷物体，用鼠标选中一个物体，拖拽着它向某个方向移动，松开鼠标后物体沿着拖拽的方向继续移动。在投掷物体时，必须在拖拽物体的过程中计算物体的速度向量，并在释放物体时将这个速度向量赋给物体。例如以每帧10个像素的速度向右拖拽物体，那么在释放物体时，他的速度向量应该是 vx = 10。在拖拽物体时，它会在每一帧拥有一个新的位置。用当前帧的位置减去上一帧的位置，就可以计算出...
复制链接

扫一扫