HTML5 Game - Canvas Animation Angular acceleration

Introduction

Acceleration is defined as force on direction:

Here's formula:

let force = 10,  
angle = 45, //degrees. Need to convert!  
ax = Math.cos(angle * Math.PI / 180) * force,  
ay = Math.sin(angle * Math.PI / 180) * force;

Demo

ResultView the demo in separate window

<!doctype html>
<html>

<head>
    <style>
        canvas {//from ww w.j  ava  2 s.  c o m
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        class Arrow {
            constructor() {
                this.x = 0;
                this.y = 0;
                this.color = "#ffff00";
                this.rotation = 0;
            }

            draw(context) {
                context.save();
                context.translate(this.x, this.y);
                context.rotate(this.rotation);
                context.lineWidth = 2;
                context.fillStyle = this.color;
                context.beginPath();
                context.moveTo(30, 0);
                context.lineTo(-20, -25);
                context.moveTo(30, 0);
                context.lineTo(-20, 25);
                
                context.closePath();
                context.fill();
                context.stroke();
                context.restore();
            }
        }

        function captureMouse(element) {
            let mouse = {
                    x: 0,
                    y: 0,
                    event: null
                },
                body_scrollLeft = document.body.scrollLeft,
                element_scrollLeft = document.documentElement.scrollLeft,
                body_scrollTop = document.body.scrollTop,
                element_scrollTop = document.documentElement.scrollTop,
                offsetLeft = element.offsetLeft,
                offsetTop = element.offsetTop;

            element.addEventListener('mousemove', function(event) {
                let 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;
        }
        window.onload = function() {
            let canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d'),
                mouse = captureMouse(canvas),
                arrow = new Arrow(),
                vx = 0,
                vy = 0,
                force = 0.05;

            (function drawFrame() {
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);

                let dx = mouse.x - arrow.x,
                    dy = mouse.y - arrow.y,
                    angle = Math.atan2(dy, dx), //radians  
                    ax = Math.cos(angle) * force,
                    ay = Math.sin(angle) * force;
                arrow.rotation = angle;
                vx += ax;
                vy += ay;
                arrow.x += vx;
                arrow.y += vy;
                arrow.draw(context);
            }());
        };
    </script>
</body>

</html>

HTML5 Game - Canvas Animation Angular acceleration

Introduction

Demo

Related Topic