Etch-a-Sketch is the browser version of the toy sketchpad.
- This game is a beginner friendly game.
- Also a beginner friendly project.
- Create so many images just hovering over the blocks of the grid or touch the blocks of the grid.
- Create as much large grid as you want.
- First we will create a grid of 16x16 of square divs using JavaScript.
- For making the grid, we have used the logic of nested loops. Every row is appended to the container and for every row, each cell is appended.
- We then add a button to change the size of the number of grids.
- A clear function is also created to first clear the canvas before changing the number of grids.
- We added another button clear all to clear the whole canvas without removing the cells. Here, we select each cell and for each cell we change the background color to white.
- In addition, we have to add a drop down list to select the color and change it accordingly. In the makeGrid function, the style attribute will change the color according to the value of the option selected.
- Thus, we have a basic and fun etch-a-sketch game where you can fill the cells in a canvas by moving the cursor across the canvas and additional features of changing the color other than black.
- Hover the mouse or touch the blocks of the grid that will be coloured.
- You can make any figure by connecting dots of the grid.
- Enjoy the game !
