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坐标，因此所有克隆都将在完全相同的空间中呈现。每个圆圈都需要有自己的坐标。

＆＃13;

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();
    }

＆＃13;

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

＆＃13;

独立移动同一个圈子javascript？

1 个答案: