无法获取鼠标点击函数作为常量

Question

我正在尝试为学校制作一个简单的游戏，基本上是一个简单的瞄准训练器。它需要做的就是画点，当你点击它们时让它们被杀死然后添加到你的分数，然后当你点击背景而不是点时你的游戏就结束了。现在我遇到了结束游戏的问题，每当我单击圆点时，它都会运行 gameend() 函数内的代码，它应该只在单击圆点时执行此操作。有什么方法可以确保 gameend() 函数既保持常量又仅在单击背景时激活

我尝试使用 mouseClicked 函数，但它破坏了我的代码

let x;
let y;
let circle;
let dots = [];
let score = 0;

function setup() {
    createCanvas(1080, 800);
    xycircle();
}

function draw() {
    background(100, 100, 255);
    click();
    scorer();
        for (let dot of dots) {
        ellipse(dot.x, dot.y, dot.circle, dot.circle)
    }
};


function xycircle() {
    for (i = 0; i < 25; i += 1) {
        dots.push({
            x: random(1080),
            y: random(100, 800),
            circle: random(25, 50)
        })
    };

};

function click() {
    for (let dot of dots) {
        if (dist(dot.x, dot.y, mouseX, mouseY) < dot.circle / 2 &&             
mouseIsPressed) {
            dots = dots.filter(dot1 => dot1 !== dot)
            score++
            if (dots.length === 0) {
                xycircle();
            }
        } else if (dist(dot.x, dot.y, mouseX, mouseY) != dot.circle / 2 &&     
mouseIsPressed) {

        }
    };
};


function scorer() {
    fill(20, 75, 200);
    rect(0, 0, 1080, 75);
    fill(0, 0, 0);
    text(score, 950, 50)
    fill(255, 255, 255);
}

function gameend() {
    background(255, 0, 0);
    fill(0, 0, 0);
    text("GAME OVER", 540, 400);
    text("Your score was " + score, 540, 420);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

Answer 1

创建一个变量 gameover，单击背景时会显示该变量：

let gameover = false;

创建一个 mousePressed() 事件，而不是调用连续检查鼠标是否被按下的函数 (click)。事件声明变量 gameover，当点击错过点时：

function mousePressed() {

    var hit = false;
    for (let dot of dots) {
        if (dist(dot.x, dot.y, mouseX, mouseY) < dot.circle / 2 ) {
            dots = dots.filter(dot1 => dot1 !== dot)
            hit = true;
            if (dots.length === 0) {
                xycircle();
            }
        }
    };

    if ( hit )
      score++
    else
      gameover = true;
}

在 draw 函数中，您可以绘制点或 "gameover" 屏幕，具体取决于变量的状态 gameover:

function draw() {
    if ( gameover ) {
        gameend();
    } else {
        background(100, 100, 255);
        scorer();
        for (let dot of dots) {
            ellipse(dot.x, dot.y, dot.circle, dot.circle)
        }
    }
};

查看示例，其中我将更改应用于您的原始代码：

let x;
let y;
let circle;
let dots = [];
let score = 0;
let gameover = false;

function setup() {
    createCanvas(1080, 800);
    xycircle();
}

function draw() {
    if ( gameover ) {
        gameend();
    } else {
        background(100, 100, 255);
        scorer();
        for (let dot of dots) {
            ellipse(dot.x, dot.y, dot.circle, dot.circle)
        }
    }
};

function xycircle() {
    for (i = 0; i < 25; i += 1) {
        dots.push({
            x: random(1080),
            y: random(100, 800),
            circle: random(25, 50)
        })
    };

};

function mousePressed() {

    var hit = false;
    for (let dot of dots) {
        if (dist(dot.x, dot.y, mouseX, mouseY) < dot.circle / 2 ) {
            dots = dots.filter(dot1 => dot1 !== dot)
            hit = true;
            if (dots.length === 0) {
                xycircle();
            }
        }
    };

    if ( hit )
      score++
    else
      gameover = true;
}

function scorer() {
    fill(20, 75, 200);
    rect(0, 0, 1080, 75);
    fill(0, 0, 0);
    text(score, 950, 50)
    fill(255, 255, 255);
}

function gameend() {
    background(255, 0, 0);
    fill(0, 0, 0);
    text("GAME OVER", 540, 400);
    text("Your score was " + score, 540, 420);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

无法获取鼠标点击函数作为常量

Unable to get the mouse clicked function as a constant

javascript

processing

p5.js