[英]javascript mouse input event not responding
I'm trying make a p5js tic-tac-toe game but the mousePressed
function is not working.我正在尝试制作 p5js 井字游戏,但
mousePressed
不起作用。
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
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>
You should move your mousePressed
event callback function outside of the draw
function.您应该将
mousePressed
事件回调 function 移到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.您还可以通过循环遍历行/列或提前确定 x/y 位置并将它们分配给
const
变量来删除所有硬编码值。
Edit: I changed the mousePressed
event to loop over all the cells to determine which cell index was clicked.编辑:我更改了
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>
You can draw the grid based on a context.您可以根据上下文绘制网格。 This can be stored inside of a JSON file.
这可以存储在 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.