如何检测对 JavaScript window 背景的点击？

Question

我正在尝试在 https://code.org 游戏实验室制作一个 JavaScript 游戏以增加反应时间和准确性，但我不知道如何检测背景上的点击以减少生命值。这是我目前的代码：

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 }

第39行是我需要的地方。

有人能帮忙吗？

编辑：经过一些测试，我意识到我是否可以检测到点击，就像 mousePressed() 一样，我也可以使用 mouseX 和 mouseY 来查看它是否在其中一个目标的区域，如果不是，我可以删除一条生命。

Answer 1

MousePressedOver 如果鼠标被按下并悬停在元素上则有效。因此用户可以按住右键并在 canvas 周围移动来获得积分。为避免这种情况并解决生命减少问题，您可以使用我们在 Game Lab 中经常用于点击事件的组合。 mouseWentDown() && mouseIsOver(target1)（&& 表示“和”）。当鼠标点击并且它位于目标上方时触发。要减少生命，您可以简单地添加！在 mouseover() 之前，因为它是 JavaScript 的非运算符。它基本上意味着“当鼠标被点击时触发，当它没有超过目标时”。这是完整的代码；

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);
   }
 }

如何检测对 JavaScript window 背景的点击？

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

javascript

background

game-development

code.org