//here is the grid 

var grid = [

  [false, false, false, false, false], 

  [false, false, false, false, false], 

  [true, false, true, false, true], 

  [false, false, false, false, false], 

  [false, false, false, false, false], 

]

​

//this creates the red line color 

function setup() {

  createCanvas(400, 400);

  stroke(255);

}

​

//this calls the function drawGrid

function draw() {

  drawGrid();

  var won = true;

  for(var r = 0; r < grid.length; r++)

    for (var c = 0; c < grid.length; c++) 

      if (grid[r][c] === true) {

        won = false;

      }

  if (won === true) {

    background(0); 

    textAlign(CENTER);

    fill("white");

    stroke("white");

    textSize(30);

    text("You turned off all the lights.\nYou win!",200,200);

      }

}

​

//400/5 is equal to 80. If you divide the length of the whole thing, which is 400, you should get 5 squares. If you divide any number that the mouse is on by 80, you get the square that it's on because of int. This all works when the mouse is pressed because of the function.

//by adding row and column into flipLight, it affects each row and column by changing it to the opposite color 

//the if statements say that if each sentence is true, it'll affect the row or column above, below, to the right, or to the left. 

function mousePressed() {

  let col = int(mouseX / 80);

  let row = int(mouseY / 80);

  flipLight(row, col); 

  if (isValid(row - 1, col) === true) { 

    flipLight(row - 1, col);

  }

  if(isValid(row,col - 1) === true) {

    flipLight(row, col - 1);

  }

  if(isValid(row + 1,col) === true) {

    flipLight(row + 1, col);

  }

  if(isValid(row,col + 1) === true) {

    flipLight(row, col + 1);

  }

}

​

//this function makes sure that every time you press with the mouse, the color of each tile that is affected will never be the same. 

function flipLight(r,c) {

   grid[r][c] =! grid[r][c]; 

}

​

function isValid(r,c) {

  if (r < 0) {

    return false; 

  } 

  if (c < 0) {

    return false;

  }

  if (r > 4) {

    return false;

  }

  if (c > 4) {

    return false;

  }

  return true;

}

​

function drawGrid(){

  for (var r = 0; r < grid.length; r++)

    for (var c = 0; c < grid[r].length; c++) {

      let x = c * 80;

      let y = r * 80;

      if (grid[r][c] === false) 

        fill(150,90,230);

      else 

        fill(50,100,200);

      rect(x, y, 80, 80);

    }

}

​

​