Lights Out
In this activity you will create a simple version of the game Lights Out. The game consists of a grid of lights. When you you click a light, the light and its four neighbors toggle. That is, if the light is on, it becomes off; if the light is off, it becomes on. Create your web version of Lights Out by doing the following:
Create a new web page and a link to this page on your home page.
Add links for css and JavaScript files.
Add a 3 by 3 table to the page. Add style to the table and cells so that all of the cells are square, have a background color, and have a border.
Give every cell in the table a unique id. Pick id names that make the location of the cell clear like ‘top-left’, and ‘bottom-right’.
Give some of the cells, it doesn’t matter which, but not all, the class ‘on’.
Add style for the ‘on’ class so that the data cell’s that are on have a different background color.
Add JavaScript code so that when the user clicks on a cell the cell, and its neighbors, toggle their background color. Only the four neighbors that are above, below, right, and left need to be toggled. Note, most cells don’t have four neighbors. Toggle only the ones that exist. Use the JQuery function
toggleClass()to toggle the ‘on’ class.
Submission
Please show your completed web page and source code to the instructor.