I'm trying to make the game MineSweeper and have till now made all the cells i need but i also need the cells to be clickable to remove the cover from them, but it seems like there is no way of doing it.
i have pushed every single object into an Array and tried to loop through it and then addEventListener but it says that cell.addEventListener is not a function same if i try to add an onclick funtion on the cell Array. am i doing something wrong or is it not possible to do it?
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>You should use Path2D constructor to check if the click event is inside a particular canvas Path:
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>certain canvas area: