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.

4
  • 1
    you'll want to look at requestAnimationFrame - perfect for games Commented May 5, 2020 at 0:02
  • 1
    Does this answer your question? Best way for simple game-loop in Javascript? Commented May 5, 2020 at 0: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 Commented May 5, 2020 at 0:06
  • Thanks. requestAnimationFrame did it. Commented May 5, 2020 at 0:14

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.