Excel-custom-functions/web-worker/home.html

<!-- Copyright (c) Microsoft Corporation.
     Licensed under the MIT License. -->

<html>
    <head>
        <title>Custom functions using WebWorker</title>
        <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
        <script src="functions.js" type="text/javascript"></script>
        <script type="text/javascript">

        let ballX = 100;
        let ballY = 10;
        let ballDirection = 'downRight';

        Office.onReady(function() {
            animate();
            console.log("Office.onReady");
        });

        function animate() {
            
            setInterval(drawBall, 10);
         }

         const drawBall = () => {
            const canvas = document.getElementById('mycanvas');

            if (canvas.getContext) {
                const ctx = canvas.getContext('2d');
                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                moveBall(ctx.canvas.width, ctx.canvas.height);
                const radius = 20;

                ctx.beginPath();
                ctx.arc(ballX, ballY, radius, 0, 2*Math.PI, false);
                ctx.fillStyle = 'green';
                ctx.fill();
                ctx.lineWidth = 4;
                ctx.strokeStyle = '#003300';
                ctx.stroke();
            }
         }

         const moveBall = (width,height) => {
             //check for ball collision with context boundaries
           
             if (ballX <= 0) {
                 if (ballDirection === 'upLeft') {
                     ballDirection = 'upRight';
                 } else {
                     ballDirection = "downRight";
                 }
             }
            if (ballY <=0) {
                if (ballDirection === 'upLeft') {
                    ballDirection = 'downLeft';

                } else {
                    ballDirection = "downRight";
                }
            }
            if (ballX >= width) {
                if (ballDirection ==='upRight'){
                    ballDirection = 'upLeft';

                } else {
                    ballDirection = 'downLeft';
                }
            }
            if (ballY >= height) {
                if (ballDirection ==='downRight'){
                    ballDirection = 'upRight';
                } else {
                    ballDirection = 'upLeft';
                }
            }
            switch (ballDirection) {
                case 'upRight': {
                    ballX++;
                    ballY--;
                    break;
                }
                case 'upLeft': {
                    ballX--;
                    ballY--;
                    break;
                }
                case 'downRight': {
                    ballX++;
                    ballY++;
                    break;
                }
                case 'downLeft': {
                    ballX--;
                    ballY++;
                    break;
                }
            }
         }

        </script>
    </head>
    <body>
        <canvas id = "mycanvas" width = "200" height = "200"></canvas>
    </body>
</html>