独立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>