Question

PS：（这是我第一次写帖子，可能做错了很多事，提前道歉）

嘿，在学校，我们正在做一个游戏项目。我想制作一个游戏，在该游戏中，在一定时间后消失的扩展圆圈会以随机坐标在屏幕上弹出。现在我只能做一个圆圈，我想让它每 2 秒弹出一个新圆圈，或者当我的（计数器到达某个点时）。我的老师建议使用对象，但我不确定如何使用。

总结：

如何使用对象和数组制作新的随机圆（如代码中所示的圆），并使用新坐标

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    
    
    <canvas id="canvas" height="500" width="700" ></canvas>
    <script type="text/javascript">
        
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

        
        
    var counter = 0;
    var coordinates = [];
    

    
      function drawCircle(x,y) {
            
             
            ctx.fillStyle = 'lightblue';
            ctx.fillRect(0,0,canvas.width,canvas.height);
            
            ctx.beginPath();
            ctx.arc(x,y,radius,0,2*Math.PI); 
            ctx.closePath();
            ctx.fillStyle = 'red';
            ctx.fill();
            if (radius < 40 && radius > 0) {
            radius += 0.05;
            counter ++;
            
        }
        else{
            radius = 0;
        }
      }

      var i = 300;
      var j = 300;
      var radius = 15;
      function draw(){
        
        drawCircle(i,j);
      
      }
      var intervall = setInterval(draw,1);

      function newCircle (xvalue, yvalue, radius) {
                var object = {
                    xvalue: 200,
                    yvalue: 300,
                    radius: 12
                    

                }
                coordinates.push(object);

            }

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

在画布（Javascript）中绘制扩展圆圈，随机坐标

0 个答案: