This assignment requires that two circles change their radius and color randomly with each click. Been racking my brain over it for awhile but I cannot figure it out.




// game variables
var stage = null;
var canvas = null;
var score = 0;
// we have declared global variables for our two circles
var circle1 = null;
var circle2 = null;

// ------------------------------------------------------------ private methods
// method since this code is called many times - arguments always have local scope in the method
function circleMe(myShape, locX, locY, radius, color) {
myShape.graphics.beginFill(color);
myShape.graphics.drawCircle(0, 0, radius);
myShape.x = locX;
myShape.y = locY;
myShape.alpha = 0.6;
}

function randomMe(low, high) {
var iRandomNum = 0;
iRandomNum = Math.floor(Math.random() * high) + low;
return iRandomNum;
}

// ------------------------------------------------------------ event handlers
function onInit() {
console.log(">> initializing");

// get reference to canvas
canvas = document.getElementById("stage");
// set canvas to match the dimensions of the canvas
canvas.width = 600;
canvas.height = 600;
// create stage object
stage = new createjs.Stage(canvas);

// we now construct the Shape object outside circleMe() and put it in a global variable
circle1 = new createjs.Shape();
circleMe(circle1, 100, 100, 40, "#FF0000");
circle1.name = "circle1";
circle1.addEventListener("click", onCircleClicked);
stage.addChild(circle1);

circle2 = new createjs.Shape();
circleMe(circle2, 200, 200, 60, "#1c5bc1");
circle2.name = "circle2";
circle2.addEventListener("click", onCircleClicked);
stage.addChild(circle2);

stage.update();
}

function onCircleClicked(e) {
if (e.target.name == "circle1") {
score++;
} else {
score+=2;
}

// move to random location
e.target.x = randomMe(50, 550);
e.target.y = randomMe(50, 550);
stage.update();

console.log("Score: " + score);
}