Estoy tratando de hacer el juego MineSweeper y hasta ahora he hecho todas las celdas que necesito, pero también necesito que se pueda hacer clic en las celdas para quitarles la cubierta, pero parece que no hay forma de hacerlo.
Empujé cada objeto en una matriz e intenté recorrerlo y luego agregar EventListener, pero dice que cell.addEventListener no es una función igual si intento agregar una función onclick en la matriz de celdas. estoy haciendo algo mal o no se puede?
const canvas = document.getElementById("myCanvas") const ctx = canvas.getContext("2d") canvas.style.border = "1px solid black" class Cell { constructor(x, y, w) { this.x = x this.y = y this.w = w let bomb = false let revealed = false } show() { ctx.beginPath() ctx.rect(this.x, this.y, this.w, this.w) ctx.stroke() } } let w = canvas.width let h = canvas.height let ColumnRow = w / 15 let cell = [] function setup() { for (let x = 0; x < w - 1; x += ColumnRow) { for (let y = 0; y < h - 1; y += ColumnRow) { cell.push(new Cell(x, y, ColumnRow)) } } } function draw() { for (let c of cell) { c.show() } } function update() { setup() draw() requestAnimationFrame(update) } update() <canvas id="myCanvas" width="500" height="500"></canvas>Debe usar el constructor Path2D para verificar si el evento de clic está dentro de una ruta de lienzo en particular:
const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); canvas.style.border = '1px solid black'; class Cell { constructor(x, y, w) { this.x = x; this.y = y; this.w = w; let bomb = false; let revealed = false; } create() { // Create cell const cell = new Path2D(); cell.rect(this.x, this.y, this.w, this.w); ctx.stroke(cell); this.cell = cell; } } const w = canvas.width; const h = canvas.height; const ColumnRow = w / 15; const cells = []; function setup() { for (let x = 0; x < w - 1; x += ColumnRow) { for (let y = 0; y < h - 1; y += ColumnRow) { cells.push(new Cell(x, y, ColumnRow)); } } } function draw() { for (const cell of cells) { cell.create(); } } function addListeners() { const handler = function (event) { for (const cell of cells) { if (ctx.isPointInPath(cell.cell, event.offsetX, event.offsetY)) { ctx.strokeStyle = 'green'; ctx.fillStyle = 'green'; ctx.fill(cell.cell); } else { ctx.clearRect(cell.x, cell.y, cell.w, cell.w); ctx.strokeStyle = 'red'; } } }; canvas.addEventListener('click', handler); } function update() { setup(); draw(); requestAnimationFrame(update); } update(); addListeners(); <canvas id="myCanvas"></canvas>cierta área del lienzo: