Create a webpage that enables the user to play the game of 8-Puzzle. Theres a 2-by- 4 board (implemented as an HTML5 table) for a total of 8 slots. One of the slots is empty. The other slots are occupied by 7 tiles, randomly numbered from 1 through 8.

The exercise will incorporate a two-dimensional array, and the 8-puzzle requires significantly fewer tile objects and a significantly smaller 2d array.

Some Hints (for one approach to completing the exercise):

Have each cell (tile) in the HTML table be a distinct object (with a distinct id). Use CSS to specify how the objects display (font size & color, border, etc.)

Have the JavaScript file generate a two-dimensional (2-d) array, with elements identified with those in the HTML table. Create a listener for each cell element.

Store the numbers 1 through 8 randomly in a 1-d array and use this to populate your 2-d array.

Build a function which can swap any numbered tile with the blank tile (only if the blank tile is directly adjacent).