0

I am new to HTML programming, and I am trying to make a shooter game set in space. I have this code so far:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Shooter
        </title>
        <style>
            body{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <canvas width='1000' height='500' id='myCanvas'></canvas>
        <script>
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            var radius = 1;
                ctx.fillStyle = 'white'
                ctx.fillRect(0, 0, canvas.width, canvas.height)
                ctx.fillStyle = 'rgb(0, 0, 0)'
                ctx.fillRect(1, 1, canvas.width - 2, canvas.height - 2)
                var i=0;
                var j=0;
                for (i=0; i < 1000; i++){
                    for (j=0; j < 500; j++){
                        if (Math.random() > 0.999) {
                            ctx.beginPath();
                            ctx.arc(i, j, radius, 0, 2 * Math.PI, false);
                            ctx.fillStyle = 'white';
                            ctx.fill();
                            ctx.lineWidth = 0;
                            ctx.strokeStyle = '#FFFFFF';
                            ctx.stroke();
                            ctx.closePath();
                        }
                    }
                }

        </script>
    </body>
</html>

and I want to make a loop starting after the definition of radius and ending before the </script> tag, and neither draw=function() nor while(true) work, the entire script has no effect if I add them.

ssddf
  • 21
  • 6
  • 1
    you'll want to look at [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) - perfect for games – Jaromanda X May 05 '20 at 00:02
  • 1
    Does this answer your question? [Best way for simple game-loop in Javascript?](https://stackoverflow.com/questions/1955687/best-way-for-simple-game-loop-in-javascript) – Emile Bergeron May 05 '20 at 00:03
  • 1
    javascript executes to completion before rendering or processing any input, so an infinite loop will hang the browser. Timer or above suggestions are needed – Garr Godfrey May 05 '20 at 00:06
  • Thanks. requestAnimationFrame did it. – ssddf May 05 '20 at 00:14

0 Answers0