Button events in nested functions HELP!!

Question

I want to make space shooting animation. If player clicked shoot button, function inside animate function will be executed, otherwise it wont be.

<button id="shoot-btn">Shoot</button>
for(var i = 0; i < numberOfBullets; i++){
ctx.fillRect(bullets[i].x, bullets[i].y, bullets[i].width, bullets[i].height)

//It would be executing bullets[i].shoot() when shoot button is clicked. Thus, there would be a bullet animation. If we place .shoot() outside this scope, no animation
//else, dont execute and no changes
}
https://code.sololearn.com/W0vkm7d4c34t/?ref=app

Answer 1

I manage to make it work, the idea is:
1. Don't pop away the bullet, you still need it to properly animate the shooting
2. Record the index for the next bullet to fire (e.g. Index=0; bullets[index++].isShooting = true;)
3. Since we don't want to pop away the bullet, but we want to show that the bullet number is decreased, decrement numberOfBullets to show the bullet left to the player, but left the bullets array unharmed and use it's length to loop through all the bullets to properly animate the fired bullet with the isShooting boolean and shoot function of Bullet

For your reference: (this is just fast modification to make it works, I believe you can write and organize it better)
https://code.sololearn.com/W0VBJFGGD0t5/?ref=app

Answer 2

Gratefully thanks for answering, its now on working. I will check that for more information.

Answer 3

i think it would look like this
same as player collision

for(var i = 0; i < numberOfBullets; i++){
for(var j = 0; j < numberOfFruits; j++){
if(
bullets[i].x < fruits[j].x + fruits[j].width && bullets[i].x + bullets[i].width > fruits[j].x && bullets[i].y < fruits[j].y + fruits[j].height && bullets[i].y + bullets[i].height > fruits[j].y
){
fruits.pop()
numberOfFruits -= 1
}
}
}

Answer 4

Anyway, along with shooting animation, how can i build collision detection between bullets and fruits?

Answer 5

Hmm, I think the idea will be similar with collision of player and fruit, but this time is nested loop of fruits and bullets who isShooting = true

Answer 6

Tri Satria [NEW] , I think your way of writing things is wrong , I will suggest you to write a class for bullet , then a function for generating bullets and the engine function that runs the whole game in which bullets r going and when they go out of screen , it will be spliced
https://code.sololearn.com/W2CmsPBbaJb7/?ref=app <-- this code will help u a lot

Answer 7

Yeah, something like that (I think)