>>2 Added some improvements:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Lights Out Game</title>
<style>
table#board { max-width:none;overflow: scroll;
border: 1px solid green; }
table#board td {
font-size:1em;
width:1em;
height:1em;
border: 1px solid red;
}
td::before{ content:attr(state); }
</style>
</head>
<body>
<table id="board"></table>
<input type="text" onchange="generateTable(this.value)">Enter Board Size</input>
<script>
const onstate='O';
const offstate=' ';
function generateTable(boardsize) {
var table = document.getElementById('board');
table.innerHTML='';
for (var i = 0; i < boardsize; i++) {
var row = table.insertRow(i);
for (var j = 0; j < boardsize; j++) {
var td = document.createElement('td');
td.setAttribute('row', i);
td.setAttribute('col', j);
td.setAttribute('state',Math.random()>0.5?offstate:onstate);
td.addEventListener('click', updateBoard);
row.appendChild(td);
}
}
}
function updateBoard() {
var row=parseInt(this.getAttribute('row'),10)
var col=parseInt(this.getAttribute('col'),10);
toggle(row,col);
toggle(row+1,col);
toggle(row-1,col);
toggle(row,col+1);
toggle(row,col-1);
if (!document.querySelector(`td[state="${offstate}"`)) alert('Victory');
}
function toggle(row,col){
var cell=document.querySelector(`#board td[row="${row}"][col="${col}"]`);
if(!cell)return;
var state=cell.getAttribute('state');
if(state==onstate){cell.setAttribute('state',offstate)}
else{cell.setAttribute('state',onstate);}
}
generateTable(25);
</script>
</body>
</html> Edited on 15/08/2020 06:11.
>>2 Added some improvements:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Lights Out Game</title>
<style>
table#board { max-width:none;overflow: scroll;
border: 1px solid green; }
table#board td {
font-size:1em;
width:1em;
height:1em;
border: 1px solid red;
}
td::before{ content:attr(state); }
</style>
</head>
<body>
<table id="board"></table>
<input type="text" onchange="generateTable(this.value)">Enter Board Size</input>
<script>
const onstate='O';
const offstate=' ';
function generateTable(boardsize) {
var table = document.getElementById('board');
table.innerHTML='';
for (var i = 0; i < boardsize; i++) {
var row = table.insertRow(i);
for (var j = 0; j < boardsize; j++) {
var td = document.createElement('td');
td.setAttribute('row', i);
td.setAttribute('col', j);
td.setAttribute('state',offstate);
td.setAttribute('state',Math.random()>0.5?offstate:onstate);
td.addEventListener('click', updateBoard);
row.appendChild(td);
}
}
}
function updateBoard() {
var row=parseInt(this.getAttribute('row'),10)
var col=parseInt(this.getAttribute('col'),10);
toggle(row,col);
toggle(row+1,col);
toggle(row-1,col);
toggle(row,col+1);
toggle(row,col-1);
if (!document.querySelector(`td[state="${offstate}"`)) alert('Victory');
}
function toggle(row,col){
var cell=document.querySelector(`#board td[row="${row}"][col="${col}"]`);
if(!cell)return;
var state=cell.getAttribute('state');
if(state==onstate){cell.setAttribute('state',offstate)}
else{cell.setAttribute('state',onstate);}
}
generateTable(25);
</script>
</body>
</html>