javascript mouse input event not responding

Question

I'm trying make a p5js tic-tac-toe game but the mousePressed function is not working.

Is there another way I can do this or how can I solve this problem? I tried calling the function mousePressed but I don't want to spam the console I instead want a mouseClick event.

 function setup() { createCanvas(400, 400); } function draw() { background(255); frameRate(60); function grid() { strokeWeight(2); //up u1 = rect(80, 92, 75, 70); u2 = rect(155, 92, 75, 70); u3 = rect(230, 92, 75, 70); //middle rect(230, 162, 75, 70); rect(80, 162, 75, 70); rect(155, 162, 75, 70); //bottom rect(230, 232, 75, 70); rect(80, 232, 75, 70); rect(155, 232, 75, 70); } function cursor() { frameRate(70); strokeWeight(5); cursor = circle(mouseX, mouseY, 2); text("X:" + mouseX, 0, height / 4); text("Y:" + mouseY, 0, height / 2); } function mousePressed() { if (mouseX > 80 && mouseX < 155 && mouseY > 92 && mouseY < 160) { console.log('In u1'); } } grid(); cursor(); } function changeColor() { let elem = document.getElementById('asd'); elem.style.color = 'red' }

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

Answer 1

You should move your mousePressed event callback function outside of the draw function. It will start working after that. See the example below.

You can also remove all the hard-coded values by looping over the rows/cols or determing the x/y positions ahead of time and assigning them to const variable.

Edit: I changed the mousePressed event to loop over all the cells to determine which cell index was clicked.

 const startX = 80, startY = 92; const cellWidth = 75, cellHeight = 70; const rowCount = 3, colCount = 3; const x1 = startX; const x2 = startX + cellWidth; const x3 = startX + (cellWidth * 2); const y1 = startY; const y2 = startY + cellHeight; const y3 = startY + (cellHeight * 2); function setup() { createCanvas(400, 400); } function draw() { background(255); frameRate(60); function grid() { strokeWeight(2); // Top u1 = rect(x1, y1, cellWidth, cellHeight); u2 = rect(x2, y1, cellWidth, cellHeight); u3 = rect(x3, y1, cellWidth, cellHeight); // Middle rect(x1, y2, cellWidth, cellHeight); rect(x2, y2, cellWidth, cellHeight); rect(x3, y2, cellWidth, cellHeight); // Bottom rect(x1, y3, cellWidth, cellHeight); rect(x2, y3, cellWidth, cellHeight); rect(x3, y3, cellWidth, cellHeight); } function cursor() { frameRate(70); strokeWeight(5); cursor = circle(mouseX, mouseY, 2); text("X:" + mouseX, 0, height / 4); text("Y:" + mouseY, 0, height / 2); } grid(); cursor(); } function mousePressed() { for (let x = 0; x < colCount; x++) { for (let y = 0; y < rowCount; y++) { const xMin = startX + (x * cellWidth); const yMin = startY + (y * cellHeight); const xMax = xMin + cellWidth; const yMax = yMin + cellHeight; if (mouseX > xMin && mouseX < xMax && mouseY > yMin && mouseY < yMax) { const index = y * colCount + x; console.log(`index = ${index} | row = ${y + 1} | col = ${x + 1}`); } } } } function changeColor() { let elem = document.getElementById('asd'); elem.style.color = 'red' }

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

---

Dynamically drawing

You can draw the grid based on a context. This can be stored inside of a JSON file.

 const context = { width: 400, height: 400, grid: { origin: { x: 80, y: 92 }, cell: { width: 75, height: 70 }, rows: 3, cols: 3 } }; function setup() { const { width, height } = context; createCanvas(width, height); } function draw() { background(255); frameRate(60); function grid() { const { grid: { rows, cols, cell: { width: cellWidth, height: cellHeight }, origin: { x: xOffset, y: yOffset } } } = context; strokeWeight(2); for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { let x = xOffset + (col * cellWidth); let y = yOffset + (row * cellHeight); rect(x, y, cellWidth, cellHeight) } } } function cursor() { frameRate(70); strokeWeight(5); cursor = circle(mouseX, mouseY, 2); text("X:" + mouseX, 0, height / 4); text("Y:" + mouseY, 0, height / 2); } grid(); cursor(); } function mousePressed() { const { grid: { rows, cols, cell: { width: cellWidth, height: cellHeight }, origin: { x: xOffset, y: yOffset } } } = context; for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const xMin = xOffset + (col * cellWidth); const yMin = yOffset + (row * cellHeight); const xMax = xMin + cellWidth; const yMax = yMin + cellHeight; if (mouseX > xMin && mouseX < xMax && mouseY > yMin && mouseY < yMax) { const index = row * cols + col; console.log(`index = ${index} | row = ${row + 1} | col = ${col + 1}`); } } } } function changeColor() { let elem = document.getElementById('asd'); elem.style.color = 'red' }

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