Hello,
Could you help assess my work. it does not seem to be working as expected. The Evil Circle is not working as expected. I have made my best attempt but still not working.
Link:
Hello,
Could you help assess my work. it does not seem to be working as expected. The Evil Circle is not working as expected. I have made my best attempt but still not working.
Link:
Hello @Idris
you doing great well done just few notice :
the evil circle cause in your draw method the last line should be
ctx.stroke();
you missed the ()
the counter is not working as it should be
you need to check if the evilcircle is at the edge of the canvas so it does not move forward try to move the circle to the edge of the canvas and keep pressing and you will notice it hide
try to use an text editor or IDE to help you to detect those king of error
here are some list of them
hope that help and have a nice day
Thanks! it’s displaying now and working as it should. Could you give me a few more clue on how to get the counter working? I’ve made my best attempt.
you very welcome
try to update the para.textContent each time evilcircle eat a ball
also
if (balls[0] <= balls[1] && balls[len - 2] <= balls[len - 1]) {
len++;
para.textContent += ': ' + len;
} else {
if (balls[0] >= balls[1] && balls[len - 2] >= balls[len - 1]) {
len--;
para.textContent += ': ' + len;
}
}
what this code should do ?
The purpose of the code is to increase or decrease the ball counter and display the output on the paragraph, if a ball is added to the Canvas or eaten by the EvilCircle.
I’m not 100% sure of the logic in the code. it’s just my best attempt.
you should call it for each time the evil eat one so i updated it a little bit
i make it as function
function counter(){
let len = balls.length;
para.textContent = 'Ball count: ' + len;
}
and updated the collision method in the evilcircle to be like that just edited the last if and added a call to the method that we just created
if (distance < this.size + ball.size) {
balls.splice(index, 1);
counter();
}
notice that the evil circle will vanish at the end could yo make it show up
Thanks! The Ball Counter is working now. Your last statement “notice that the evil circle will vanish at the end could yo make it show up”. I noticed that It’s never getting to the end. Some of the balls don’t move diagonally. They’re either moving horizontally or vertically such that they’ll never meet the EvilCircle no matter what. Is this normal?
Thanks once again I appreciate.
Could you please suggest more practice I could do to make these topics more concrete?
@Idris you welcome
get this 3 line out of the for loop in the loop function
evilCircle.draw();
evilCircle.checkBounds();
evilCircle.collisionDetect();
so it be like this
for (const ball of balls) {
if (ball.exist) {
ball.draw();
ball.update();
ball.collisionDetect();
}
}
evilCircle.draw();
evilCircle.checkBounds();
evilCircle.collisionDetect();
they move randomly so if the random make then certain ball to move horizontal then once it hit the edge it will move backword same as when yo hit ball in wall in strat line it will move back in strt line same thing with vertical other ball will move diagnal so all depend on their first move
and you can use the the 4 keyboard w a s d to move the evil one
never give up and do not lose your patient easily and keep trying and do not look for the whole code just split it by function and check each part of it slowly so that how to fix any problem
and do not look at your clock ever when learning cause you could get something in 2 sec that other get in one hour and visa versa
and you will always learn from your failure more than your success
and no issue to reread same topic more than once or even look for other resources cause maybe this resource good with certain topic and not for other and good or bad are subjective so you could read book and you find it will written other say it bad one
and keep the good work and happy coding
Alight thanks @justsomeone.
As for the EvilCircle to be able to disappear after it has eaten all the Balls, I have tried to implement that functionality using the following code:
disappear(){
if(balls.length === 0){
ctx.clearRect(0, 0, , );
}
I then called the function on the bottom of function loop(). But I’m a bit confused here, the clearRect() method takes four arguments: x, y, width, and height. I don’t know how to make a reference to the width and height of the EvilCircle in the cleaRect() Method
you welcome @Idris
could you share your full code
here is the link
first the task does not ask to make it disapear but if that what you want then
the clearRect take the width and the height of the canavs using this will be the evilcircle object
check this
at the start of your js file you have this
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
so you can use width and height instead of this
by the way you can do it just write the if inside
so inside the loop function use it will be look like this
for (const ball of balls) {
if (ball.exist) {
ball.draw();
ball.update();
ball.collisionDetect();
}
}
if(balls.length != 0){
evilCircle.draw();
evilCircle.checkBounds();
evilCircle.collisionDetect();
}