P5.js mousePressed() not responding correctly :(

My p5 installation is all set up and running smoothly, but I've encountered an issue with the mousePressed() function (keyPressed() isn't working either). Here's the problematic part of the code:

//press play button
if (mouseX > 120 && mouseX < 480 && mouseY > 160 && mouseY < 220) {
    playfill = 120;
    inButtonP = true;
} else {
    playfill = 0;
    sharefill = 0;
    settingsfill = 0;
    inButtonP = false;
};
function mousePressed() {
    if (inButtonP) {
        playing = true;
        println("pressed");
    };
};

Here is the full code:

//is the game over?
var playing = false;

//speed at which the square will move
var speedx = 6;
var speedy = 4;

//setting square variables
var square = {
    x : 300,
    y : 200,
    length : 80
};

//score
var score = 0;

//start + end background
var g = 120;

//start menu colour colChange
colChange = -3;

//transparency of buttons
var playfill = 0;
var sharefill = 0;
var settingsfill = 0;
var inButtonP = false;

function setup() {
    createCanvas(600, 400);
}

function draw() {
    //start screen
    if (!(playing)) {
        //background
        background(221, g, 222);

        //menu rectangle
        stroke(255, 255, 255);
        strokeWeight(5);
        fill(0, 0, 0, 0);
        rectMode(CENTER);
        rect(300, 200, 500, 300, 50);

        //menu text
        textAlign(CENTER);
        textSize(32);
        text("THE WAITING GAME", 300, 120);

        //play button
        stroke(255, 255, 255);
        strokeWeight(2);
        fill(255, 255, 255, playfill);
        rectMode(CENTER);
        rect(300, 190, 360, 60);

        textSize(20);
        text("PLAY GAME", 300, 197);

       // More content exists here.

    };


    // Main game section.
    if (playing) {
        // Additional content and logic present in this section.

    };

}

I added some filler text for separation purposes. If needed, more information can be provided about the code.

Answer №1

The mousePressed function should be placed separately from the draw loop.

Take a look at this demonstration where it works better outside of draw: https://jsfiddle.net/xh9p28r6/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I retrieve an updated object array within an extended class in JavaScript?

Hey everyone, I am new to working with ES6 classes. Currently, I am trying to inherit an initialized object (this._obj) with updated data in the class B, but I am encountering an issue where I am getting the length of the initialized object instead of the ...

Making sure javascript functions properly after loading content through Ajax in Wordpress

I'm currently facing an issue with loading content through Ajax. I'm encountering difficulties in getting the Woocommerce javascript to function properly when I am loading a product via Ajax. The content is being loaded in the following manner: ...

Using Javascript to deactivate a clickable image upon clicking another image

I have two buttons with alert functions assigned to each. I want the function on the first button to only work when that button is clicked, and not work if the second button has been clicked. Below is the code I've tried, but it's not functioning ...

Error in Typescript: TypeError is not defined

I am still getting the hang of TypeScript and React. Lately, I've been working on integrating the react-rewards npm library into my project but I'm facing one unresolved issue. type Props = {} class Surprisebutton extends Component<Props> ...

Retrieving data in [slug].js using Reactjs

I am currently working on a project in Reactjs utilizing the "nextjs" framework. I have successfully managed to retrieve data (specific blog details) based on the slug([slug.js]). However, I now need to display data from all other blogs within the same c ...

preventing further executions by halting a function after the initial click

I've come across this function: function display() { $.ajax({ url: "new.php", type: "POST", data: { textval: $("#hil").val(), }, success: function(data) { ...

Secure your website with the latest JWT cookie security measures

After storing a JWT with an expiry date set 30 days ahead, the question arises - is it secure to store this JWT in a cookie? The aim is for the token to persist beyond a single session, much like the "Keep me logged in" feature found on some websites. Se ...

issues with jquery on function malfunctioning

I have some jQuery code that I'm struggling with $(".delete").on('click', function (e){ e.preventDefault(); var id = $(this).prop('id'); console.log('Delete button id: '+id); var formWrapper = $(".form-wr ...

Arrows on the button are unresponsive and there seems to be an incorrect number of

I've been working on a project by combining various examples I found online. I'm puzzled as to why it's displaying all the buttons at once instead of just one per page, and why the number of visible buttons decreases by one with each right c ...

How do you update the bind value in VueJs when using :value="text"?

My attempts at updating a string when the content is changed inside a textarea are not successful. Vue component: <template> <div> <textarea :value="text" @change="changed = true" @keyup="changed = true"&g ...

Filter object in Angular to remove empty values

Below are the specific data sets: $scope.icons = [{ "id": 1, "bonuses": [ { "id": 1, "name": "Rob", "amount": 10, "foreman": 1, "percA": 1, "percB": 0 }, { "id": 2, "name": "Mark", "amount": 20, "foreman": 1, "percA": 1, "percB": 0 }, ] }, { ...

Updating input values in AngularJS using a custom directive in AngularJS

When the value of an input does not meet a certain condition, I need to change it. In this example, if the unit price input is changed to a non-numeric value when adding a Detail, I want to set the value to "0.00". scope.$watch(attrs.ngModel, function(new ...

Choosing an index on material io with setSelectedIndex

I am currently working on modifying select-menus to adjust the selected index: let filterField= mdc.select.MDCSelect.attachTo( document.querySelector(".mdc-select--location") ); This is how I am connecting MDCSelect to a specific field and at ...

Utilizing custom form fields with JavaScript in Symfony2

Here is my form field template: {% block test_question_widget %} {% spaceless %} <div {{ block('widget_container_attributes') }}> {% set type = type|default('hidden') %} <input type="{{ typ ...

Working with JSON responses in ASP.NET

Being a PHP Developer with limited knowledge of asp, I am working on a portal in PHP that requires an ajax post to an asp page on an external server. The response from the asp page is formatted like this: OK|some_id|some_name|some_id|0|1|||some_name|some_ ...

Uh-oh: create-react-app installation has been canceled

As per the guidelines provided in Reactjs documentation: To start a new project, you must have Node version >= 8.10 and npm version >= 5.6 installed on your system. Use the following command to create a project: npx create-react-app my-app My envir ...

Utilize the power of EasyAutocomplete in jQuery to easily filter JSON

I have a functioning code, but I need help filtering JSON data to display labels of corresponding IDs greater than or equal to 3. In this scenario, only "India" and "France" should appear in the suggestion list. It's important to note that I am usin ...

"Encountering errors when attempting to load partials on the server-side

Currently, I am working on creating a basic single page application using the MEAN stack. Everything was running smoothly when I was developing on localhost. However, upon uploading the code to the server, I encountered a status code 500 (Internal Server ...

Does jQuery always make event.currentTarget equal to $(this)?

Is it always true that this phrase is correct? $("p").click(function(event) { alert( event.currentTarget === this ); }); Is one method better than the other? Personally, I prefer using $(this) over event.currentTarget, but are there certain condition ...

extracting the ID from within an iframe

Currently, I am developing a script using pure javascript. parent.*nameofiframe*.document.getElementById('error').value; However, when attempting to achieve the same using jQuery, it doesn't seem to work: $('*nameofiframe*', win ...