Wall of bricks

Question

Wall Of Bricks

Tasks:
1. Recreate the wall of bricks,
- Size of red/orange = 2 x size of blue/purple
- White is white space
- Use CSS Grids
2. Implement the following functionalities,
- The bricks should turn into random colours on every click.
- Click blocks to move the blocks to white space if its adjacent (Left,
right, top, bottom)
3. Submit your solution as a codepen link.

I have completed all functionalities except this

Click blocks to move the blocks to white space if its adjacent (Left,
right, top, bottom)

Can anyone help me to complete this functionality.
U can continue my code through the below link.

https://codepen.io/ganesh-arch/pen/LYBYWxx

Answer 1

Does your white need to be white space, can't you make box with background white?
If you make this box you will easier find are box next to target box "real" or it is "white space", you can also disable eventlistener for click if background is white.

Then you need to just know position of every box, and make some formula to calculate top and bottom(left and right are easy it is just next or prev box from array)
To calculate top and bottom you need to know how much boxes are in 1 row / 1 column, then find on what index box need to be white background, then you just add or remove number of boxes from row to go to next or prev row.

Click event for this is little wird, does you need to drag maybe, so user can choose direction, or direction is random? If random make sure you track all 4 position and then choose some random position from possible.

Answer 2

There is some post about finding grid white spaces, maybe this can help you in case you need to use exacly this functionality:
https://stackoverflow.com/questions/65646314/how-to-get-grid-coordinates-which-has-some-empty-cells-in-javascript

It is second comment, it also use lot of ES6 so if you don't understand some part of code fill free to ask.

Answer 3

Can anyone write code and send me the link