Unable to get the mouse clicked function as a constant

Question

Im trying to make a simple game for school, basically its a simple aim trainer. All it needs to do is draw dots, have them killed when you click them then add to your score, then when you click on the background instead of the dots your game is over. Now i have the problem of ending the game, whenever i click dots it runs the code inside the gameend() function, it SHOULD only do this when the dots are clicked. Is there any way to make sure the gameend() function both stays as a constant and only activates when the background is clicked

I've tried to use a mouseClicked function but it broke my code

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>

pass the event into the click function and call `event.stopPropagation()` in the click function. — skellertor, Dec 21 '18 at 21:49
You're missing the key part of the code - binding event listeners! That being said, skellertor is right. You need to stop the event from propagating to the background, and resulting in `gameend` — robinsax, Dec 21 '18 at 21:55

score 0 · Accepted Answer · answered Dec 21 '18 at 22:18

Create a variabel gameover, which gets stated when the background is clicked:

let gameover = false;

Instead of calling a function (click) which checks continuously if the mouse was pressed, create a mousePressed() event. The event states the variable gameover, when a click missed the points:

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

In the draw function you can either draw the points or the "gameover" scree, dependent on the state of the variable 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)
        }
    }
};

See the example, where I applied the changes to your original code:

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>

OMG man thank you so much for that, and thanks for including a lesson in it instead of just solving it for me :) — Aidon Lambert-McComb, Dec 21 '18 at 22:45

Unable to get the mouse clicked function as a constant

1 Answers1