How can I detect a click on the background of a JavaScript window?

Question

I am trying to make a JavaScript game on https://code.org game lab to increase reaction time and accuracy, and I cannot figure out how to detect a click on the background to decrease lives. Here is the code I have so far:

1  var score = 0;
2  var lives = 3;
3  var target1 = createSprite(randomNumber(50, 350), randomNumber(50, 350));
4  target1.setAnimation("Target1");
5  target1.scale = 0.5;
6  target1.setCollider("circle");
8  var target2 = createSprite(randomNumber(50, 350), randomNumber(50, 350));
9  target2.setAnimation("Target2");
10 target2.scale = 0.5;
11 target2.setCollider("circle");
12 
13 function draw() {
14         scoreboard();
15         targetClick();
16         life();
17         drawSprites();
18 }
19 
20 function scoreboard() {
21         background("black");
22         textSize(20);
23         text("Lives: " + lives, 10, 375, 100, 100);
24         text("Score: " + score, 10, 10, 100, 100);
25 }
26 function targetClick() {
27         if (mousePressedOver(target1)) {
28                 target1.x = randomNumber(50, 350);
29                 target1.y = randomNumber(50, 350);
30                 score = score + 1;
31         }
32         if (mousePressedOver(target2)) {
33                 target2.x = randomNumber(50, 350);
34                 target2.y = randomNumber(50, 350);
35                 score = score + 1;
36         }
37 }
38 function life() {
39   if (mousePressedOver(mousePressedOver(background)) {
40     lives = lives - 1;
41   }
42   if (lives <= 0) {
43           target1.destroy();
44           target2.destroy();
45           textSize(50);
46           text("Game Over!", 10, 150);
47   }
48 }

Line 39 is where I need it.

Can anyone help?

Edit: After some testing I realized if I could detect a click, just in general like a mousePressed() I could also use mouseX and mouseY to see if it was in the area of one of the targets and if it wasn't, I could remove a life.

Answer 1

MousePressedOver works if the mouse is pressed and over the element. So users can hold the right click and just move around the canvas to get points. To avoid that and solve the decreasing lives problem, you can use the combination we often use for click events in Game Lab. mouseWentDown() && mouseIsOver(target1)(&& means "and"). This triggers when the mouse clicked and it is over the target. To decrease lives you can simply add ! before the mouseover() since it's the not operator of the JavaScript. It basically means "trigger when the mouse is clicked, and when it is not over the target." Here's the full code;

var score = 0;
  var lives = 3;
  var target1 = createSprite(randomNumber(50, 350), randomNumber(50, 350));
  target1.setAnimation("Target1");
  target1.scale = 0.5;
  target1.setCollider("circle");
  var target2 = createSprite(randomNumber(50, 350), randomNumber(50, 350));
  target2.setAnimation("Target2");
  target2.scale = 0.5;
  target2.setCollider("circle");
 


 function draw() {
         scoreboard();
         targetClick();
         life();
         drawSprites();
 }
 
 function scoreboard() {
         background("black");
         textSize(20);
         text("Lives: " + lives, 10, 375, 100, 100);
         text("Score: " + score, 10, 10, 100, 100);
 }
 function targetClick() {
  
         if (mouseWentDown() && mouseIsOver(target1)) {
                 target1.x = randomNumber(50, 350);
                 target1.y = randomNumber(50, 350);
                 score = score + 1;
                 
         }
         if (mouseWentDown() && mouseIsOver(target2)) {
                 target2.x = randomNumber(50, 350);
                 target2.y = randomNumber(50, 350);
                 score = score + 1;
                 
         }
 }
 

 function life() {
   if (mouseWentDown()&& !mouseIsOver(target1)&& !mouseIsOver(target2)) {
     lives = lives - 1;
   }
   if (lives <= 0) {
           target1.destroy();
           target2.destroy();
           textSize(50);
           text("Game Over!", 10, 150);
   }
 }