How to make all of cells in table unclickable in JavaScript?

Question

I've made simple minesweeper game in JavaScript (for school project).

Its 5x5 matrix based with 10 mines placed randomly in in matrix. I've used 5x5 table for graphical representation, and I've added in every cell onclick function that checks if corresponding matrix cell is mine.If it isn't it colors the cell in yellow and writes how many neighboring cells are mines.

Now i need to make it if the cell is a mine all of the other cells become unclickable.

Any assistance will be appreciated.

Answer 1

I would add a class to the table to mark it as active and have your click handler use that class, upon clicking a bomb, I would remove that class and add a class that indicates the game has ended.

Start with:

<table class="game-active">

After clicking a bomb:

<table class="game-over">

via this:

$('table.game-active').removeClass('game-active').addClass('game-over');

Answer 2

You can add an attribute to the cell (), which will represent the boolean checkable property, and check that property on the click event function. In case you're using jQuery you can use the data() function to set and get that property. You use it like that: Get:

if($(this).data("propName")==booleanValue){
   // write your code here
}

Set: $(this).data("propName",booleanValue");