javascript - 如何确保我可以在 Java Script 的绘图函数中制作许多球动画？

Question

我正在尝试运行我的代码，以便多个球出现在屏幕上。调试后我发现我的circleX和circleY变量没有出现在我的代码中。circlX是我希望将 CircleX和circleY传递给drawManyBalls函数和drawBallsMoving函数的球的位置。

我不确定为什么它没有运行我的代码或没有看到这些变量。

我尝试使用 apply 方法来尝试应用circlX和circleY变量，我将在其中运行该函数，然后将其应用于另一个函数。就像在这个链接中看到的那样。

我还尝试在一个函数中运行一个函数，但没有奏效。

在 Js Fiddle 上查看我的代码：https ://jsfiddle.net/Blummer92/kuj2tzy4/1/

Java 脚本

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

//every frame has been drawn to make it appear that the ball is moving
//this sets the moving ball
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

//every frame has been drawn to make it appear that the ball is moving
//this sets the moving ball
let circleX = canvas.width / 2;
let circleY = canvas.height - 30;
var ballRadius = 10;

// newly spawned objects start at Y=25
var spawnLineY = 25;

// spawn a new object every 1500ms
var spawnRate = 1500;

// set how fast the objects will fall
var spawnRateOfDescent = 0.5;

// when was the last object spawned
var lastSpawn = -1;

// this array holds all spawned object
var objects = [];

// save the starting time (used to calc elapsed time)
var startTime = Date.now();

var dx =2;
var dy =-2;

function spawnRandomObject(object) {

    // select a random type for this new object
    var t;

    // About Math.random()
    // Math.random() generates a semi-random number
    // between 0-1. So to randomly decide if the next object
    // will be A or B, we say if the random# is 0-.49 we
    // create A and if the random# is .50-1.00 we create B

    if (Math.random() < 0.50) {
        t = "red";
    } else {
        t = "blue";
    }

    // create the new object
    var object = {
        // set this objects type
        type: t,
        // set x randomly but at least 15px off the canvas edges
        x: Math.random() * (canvas.width - 30) + 15,
        // set y to start on the line where objects are spawned
        y: spawnLineY,
    }

    // add the new object to the objects[] array
    objects.push(object);
}

let drawBall = (circleX, circleY) => {
  ctx.beginPath();
  let dimentions = ballRadius => {
    ctx.arc(circleX, circleY, ballRadius, 0, Math.PI * 2);

    ctx.fillStyle = "#0095DD";
    ctx.fill();

    ctx.closePath();
  };

var drawManyBall = () => {
    let CircleX = spawnRandomObject.object.X;
    let CicleY = spawnRandomObject.object.Y;
    drawBall();
    drawBall.dimentions.apply(this, circleX, circleY); // use .apply() to call it
    ctx.moveTo(circleX, circleY + spawnLineY);
    ctx.lineTo(canvas.width, spawnLineY);
  };
let draw = () => {
  circleX += dx;
  circleY += dy;

// get the elapsed time
var time = Date.now();

// see if its time to spawn a new object
if (time > lastSpawn + spawnRate) {
  lastSpawn = time;
  spawnRandomObject();
}

// request another animation frame
requestAnimationFrame(draw);

ctx.clearRect(0, 0, canvas.width, canvas.height);
// runs a loop that
for (var i = 0; i < objects.length; i++) {
  var object = objects[i];

  //should I be using cirlce why as a part of my method?
  object.Y += spawnRateOfDescent;
  let CircleX = object.X;
  let CicleY = object.Y;

  var drawBallsmoving = () => {
    drawBall();
    drawBall.dimentions.apply(this, circleX, circleY);
    ctx.beginPath();
    ctx.arc(object.x, object.y, 8, 0, Math.PI * 2);
    ctx.fillStyle = object.type;
  };
}

在调试期间，我的输出是

drawBall: (circleX, circleY) => {…}
arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:1:142) at <anonymous>:1:1]
caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:1:142) at <anonymous>:1:1]
length: 2

标签： javascriptgame-engine