I am trying to run my code so that the multiple balls apear on the screen. After debugging I found that my circleX and circleY variable is not appearing in my code. circlX is the location of ball I want CircleX and circleY passed into the drawManyBalls function and drawBallsMoving function.
I'm not sure why it's not running my code or not seeing these variables.
I tried using an apply method to try to apply the circlX and circleY variables, where I would run that function and then apply it to another function. like seen in this link.
I also tried running a function within a function and that didn't work.
check out my code on Js Fiddle: https://jsfiddle.net/Blummer92/kuj2tzy4/1/
Java Script
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;
};
}
During Debugging my output was
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
