在同一时间独立移动同一个圆圈javascript？ [关闭]

Question

我正在使用 html 和 javascript 来制作游戏，我已经被困了一段时间了 这部分代码是关于让敌人从屏幕的一侧移动到另一侧，这不是我遇到的问题与其他角色一起完成。最大的问题是我无法克隆它们并让它们独立移动。

var canvas = document.getElementById('canvas');
var h = canvas.height;
var w = canvas.width;
var ctx = canvas.getContext("2d");
var x = w
var y = Math.floor((Math.random() * 500) + 1);

clear();
circleE();

function clear(){
  ctx.fillStyle = "Blue"
  ctx.fillRect(0, 0, w, h)
}

function circleE(){
  ctx.fillStyle = "Pink";
  ctx.beginPath();
  ctx.arc(x,y,15,0,Math.PI*2,false);
  ctx.closePath();
  ctx.fill();
}

<canvas id="canvas" width="1000" height="500" style="border:1px solid #000000;"></canvas>

Answer 1

由于它们共享 x 和 y 坐标，所有克隆都将在完全相同的空间中呈现。每个圆圈都需要有自己的坐标。

var canvas = document.getElementById('canvas');
    var h = canvas.height;
    var w = canvas.width;
    var ctx = canvas.getContext("2d");

    clear();
   
    function clear(){
        ctx.fillStyle = "Blue"
        ctx.fillRect(0, 0, w, h)
    }

    function circleE(){
        var x = Math.floor((Math.random() * w) + 1);
        var y = Math.floor((Math.random() * h) + 1);
        ctx.fillStyle = "Pink";
        ctx.beginPath();
        ctx.arc(x,y,15,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
    }

<button onclick="circleE()">Spawn</button><br>
<canvas id="canvas" height="200" width="300"></canvas>