I created different views which gets displayed when the user interacts with the game:
- Welcome View
- Game Options View
- Game View
- Place View
- Place Options View
- Score View
- About View
Built using Flexbox.
The board is built using three classes:
- cell - Gives size and background color to all cells.
- gap - If added, it displays an image of a gap and gives the property of being a possible movement when a ball is clicked/dragged.
- ball - If added, it displays an image of a ball. It has Click and Drag-and-Drop Events.
Functions:
- chooseOptions();
- createBoard();
- getPossibleMoves(obj);
- showPossibleMoves(obj);
Event Listeners:
- drag
- dragstart
- dragend
- dragover
- dragenter
- dragleave
- drop