Question: This program adds blue circles (water drops). My assignment is to add code to collect the water droplets with the click of the mouse. Here
This program adds blue circles (water drops). My assignment is to add code to collect the water droplets with the click of the mouse. Here are the requirements:
Removing Collectables
In order for us to remove an item when clicked upon, and make sure its the correct item, well need to use the following:
getElementAt(x, y) - if a graphic object exists at (x, y), it returns it, otherwise it returns null. As used in prior activities, we can store the returned value in a variable.
graphic.type - where graphic is the variable name. This will return the type of graphic. For example, if the user clicks on a circle graphic object, graphic.type will return the string Circle. We can use this to check to see if the graphic object is a specific type. In this example, the expression (graphic.type == "Circle") would evaluate to true. This will give us some helpful information to determine when to remove an object from our game.
remove(graphic) - this removes the graphic object stored in the variable graphic from the canvas.
Here are the requirements for this step:
Create your mouse click event and call a function that will collect the items you created with the 2nd timer (for us, the water drops).
Define the function the mouse click event calls.
Check if the click was on top of a graphic object.
If so, check if the graphic is the type you want to remove (e.g. a Circle for our water drops). If you arent sure what the type is, print graphic.type to the console when you click!
Remove the element from the canvas and decrease your collectable item count.
When i added the function collectObjects(e) below and mouseClickMethod(collectObjects) in the main function, my program stopped working. I'm not sure what I am doing wrong? Please help.
//global constants const RIGHT_SHEEP = "https://codehs.com/uploads/75f314be2357647fa8077d17f1285345"; const SHEEP_WIDTH = 80; const SHEEP_HEIGHT = SHEEP_WIDTH * (322 / 500); const MAX_DROPS = 20; const DROP_RADIUS = 20;
//global variables let sheep; let dropCounter = 0; let dx = 3; let dy = 3; let obj;
function main() { addBackground(); sheep = initObstacle(RIGHT_SHEEP,SHEEP_WIDTH, SHEEP_HEIGHT,20,20); setTimer(run,50); setTimer(addItem,2000); mouseClickMethod(collectObjects); }
//this function will add a green background function addBackground(){ let rect = new Rectangle(getWidth(),getHeight()); rect.setPosition(0,0); rect.setColor("#9ACD32"); rect.layer = 1; add(rect); }
//this function will add sheep function initObstacle(image,width, height,x,y){ sheep = new WebImage(image); sheep.setSize(width,height); sheep.setPosition(x,y); sheep.layer = 10; add(sheep); return sheep; }
function run(){ checkCollision(); sheep.move(dx,dy); }
//This funtion will add water droplets function addItem(){ if (dropCounter < 25){ let waterDrop = new Circle(DROP_RADIUS); waterDrop.setColor("skyblue"); let x = Randomizer.nextInt(0 + DROP_RADIUS,getWidth() - DROP_RADIUS); let y = Randomizer.nextInt(0 + DROP_RADIUS,getHeight() - DROP_RADIUS); waterDrop.setPosition(x,y); waterDrop.layer = 2; add(waterDrop); dropCounter ++; } else{ stopTimer(addItem); } }
/*This function checks to see if the object has hits the wall and will reverse its direction*/
function checkCollision(){ // Bounce off right wall if(sheep.getX() + SHEEP_WIDTH >= getWidth()){ dx = -dx; sheep.rotate(180); } //Bounce of bottom wall if (sheep.getY() + SHEEP_HEIGHT >= getHeight()){ dy = -dy; } // Bounce off left wall if(sheep.getX() <= 0){ dx = -dx; sheep.rotate(180); } //Bounce off top wall if(sheep.getY() <= 0){ dy = -dy; } function collectObjects(e){ obj = getElementAt(e.getX(), e.getY()); if (obj != null){ type = obj.type(); if (type == "Circle"){ remove(obj); } } } main();
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
