HTML5 Game - Canvas Animation Bouncing Box

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Bounce

Description

Bouncing Box

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>

<body>
    <canvas id="animation">
        <p>Fallback not supported.</p>
    </canvas>
    <script>
        // Pollyfill for RequestAnimationFrame
        (function() {//from   w  w  w .  jav a 2  s. c  om
            let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
            window.requestAnimationFrame = requestAnimationFrame;
        })();


        let ele = document.querySelector("#animation");
        ele.height = window.innerHeight;
        ele.width = window.innerWidth;
        let ctx = ele.getContext('2d');
        let x = 10;
        let y = 10;
        let duration = 0;
        let width = height = 50;
        let heading_x = heading_y = Math.random() * 360;
        let distance_x = distance_y = 0;

        function logic() {
            if (heading_x > 360 || heading_x < -360) heading_x = 0;
            if (heading_y > 360 || heading_y < -360) heading_y = 0;

            if (x <= 0 || x >= ele.width - width) {
                heading_x = heading_x + 180;
            }

            if (y <= 0 || y >= ele.height - height) {
                heading_y = -heading_y;
            }

            distance_x = dir_x(2, heading_x);
            distance_y = dir_y(2, heading_y);
            if (duration < 10) duration += 0.05;
            x = lerp(x, x + distance_x, duration);
            y = lerp(y, y + distance_y, duration);
            requestAnimationFrame(draw);
        }

        function draw() {
            ctx.clearRect(0, 0, ele.width, ele.height);

            // This sets the fill colour to red
            ctx.fillStyle = "#ff0000";

            // fillRectangle(x, y, width, height);
            ctx.fillRect(x, y, 50, 50);
        }

        function lerp(start, end, speed) {
            return start + (end - start) * speed;
        }

        requestAnimationFrame(draw);
        setInterval(logic, 1000 / 60);

        function degreesToRadians(degrees) {
            return degrees * (Math.PI / 180);
        }

        function dir_x(length, angle) {
            return length * Math.cos(degreesToRadians(angle));
        }

        function dir_y(length, angle) {
            return length * Math.sin(degreesToRadians(angle));
        }
    </script>
</body>

</html>

Related Topic