javascript - 独立的javascript同时移动同一个圆？

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 7 年前。

Improve this question

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

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>