javascript 鼠标输入事件无响应

Question

我正在尝试制作 p5js 井字游戏，但mousePressed不起作用。

有没有其他方法可以做到这一点，或者我该如何解决这个问题？ 我尝试调用 function mousePressed但我不想向控制台发送垃圾邮件，而是想要一个mouseClick事件。

 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

您应该将mousePressed事件回调 function 移到draw function 之外。 之后它将开始工作。 请参见下面的示例。

您还可以通过循环遍历行/列或提前确定 x/y 位置并将它们分配给const变量来删除所有硬编码值。

编辑：我更改了mousePressed事件以循环遍历所有单元格以确定单击了哪个单元格索引。

 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>

---

动态绘制

您可以根据上下文绘制网格。 这可以存储在 JSON 文件中。

 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>