Assessment wanted for BouncingBalls

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 :

  1. the evil circle cause in your draw method the last line should be
    ctx.stroke(); you missed the ()

  2. the counter is not working as it should be

  3. 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

  4. 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 :slight_smile:

1 Like

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 ?

1 Like

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

1 Like

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 :slight_smile:

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();
}
1 Like