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.