How do I make it so that when I press the left mouse button, an object from my array gets removed?

I’m at the “Make a Video Game” project, and I’m stuck to point where I need to create a function that can remove something from an array of enemies I made. And I think I need to turn the array into a variable, but, I dunno how . So, if anyone can gimme a helping hand, I appreciate it. Here’s the code I used:
HTML Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Blow up big bois!</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    </head>
    <body>
        <canvas id="canvas" width="600" height="500">
    
        </canvas>
        <script type='text/javascript' src='script.js'></script>
    </body>
</html>

CSS Code:

canvas {
    background-color: purple;}

JavaScript Code:

var my_canvas = document.getElementById("canvas");
var context = my_canvas.getContext ("2d");

for(var i = 1;i < 6;i++){
    
  var x = i*89;
  context.fillStyle = "yellow";
  context.fillRect(x,60,60,50);
}
context.fillStyle = "blue";
context.fillRect(300,250,25,25);

have you tried to google? The first answer i found:

https://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element

you need to add a general click event to the canvas, then get the clicked coordinates to determine the element clicked, this would involve some math.

shouldn’t you make an array containing the elements? To keep track on which elements are present and which elements are not?

also, this:

for(var i = 1;i < 6;i++)

is not the best idea, hard coding values, do something like:

var my_canvas = document.getElementById("canvas");
var context = my_canvas.getContext ("2d");
numberOfEnemies = 5
for (var i = 0; i < numberOfEnemies; i++)

this makes it much easier to change parameters of the game

Thanks for the tip. :slight_smile: