HTML5 Game - Capture bouncing ball with mouse

Description

Capture bouncing ball with mouse
Demo

<!doctype html>
<html>

<head>
    <style>
        canvas {/* w w  w  .j  av  a  2s.  c om*/
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        class Ball {
            constructor(radius) {
                if (radius === undefined) {
                    radius = 40;
                }

                this.x = 0;
                this.y = 0;
                this.radius = radius;
                this.vx = 0;
                this.vy = 0;
                this.rotation = 0;
                this.scaleX = 1;
                this.scaleY = 1;
                this.color = "#ff0000";
                this.lineWidth = 1;
            }

            draw(context) {
                context.save();
                context.translate(this.x, this.y);
                context.rotate(this.rotation);
                context.scale(this.scaleX, this.scaleY);
                context.lineWidth = this.lineWidth;
                context.fillStyle = this.color;
                context.beginPath();
                context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
                context.closePath();
                context.fill();
                if (this.lineWidth > 0) {
                    context.stroke();
                }
                context.restore();
            }
            getBounds() {
                return {
                    x: this.x - this.radius,
                    y: this.y - this.radius,
                    width: this.radius * 2,
                    height: this.radius * 2
                };
            }

        }
        containsPoint = function(rect, x, y) {
            return !(x < rect.x || x > rect.x + rect.width ||
                y < rect.y || y > rect.y + rect.height);
        }

        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),
                ball = new Ball(),
                vx = Math.random() * 10 - 5,
                vy = -10,
                bounce = -0.7,
                gravity = 0.2,
                isMouseDown = false;

            ball.x = canvas.width / 2;
            ball.y = canvas.height / 2;

            canvas.addEventListener('mousedown', function() {
                if (containsPoint(ball.getBounds(), mouse.x, mouse.y)) {
                    isMouseDown = true;
                    vx = vy = 0;
                    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 checkBoundaries() {
                let left = 0,
                    right = canvas.width,
                    top = 0,
                    bottom = canvas.height;

                vy += gravity;
                ball.x += vx;
                ball.y += vy;

                //boundary detect and bounce  
                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) {
                    checkBoundaries();
                }
                ball.draw(context);
            }());
        };
    </script>
</body>

</html>
HTML5 Game - Capture bouncing ball with mouse

Description

Demo

Related Topic
