Step 1: Board
Fill in the skeleton of index.html so that it displays a400x400-pixel checkerboard. The upper left square should be white.The number of squares across the board should be dynamicallydetermined by the BOARD_SIZE variable in the code. This sizedefaults to 8x8, but you can change it to any value n by adding?size=n to the end of the URL, e.g. index.html?size=16. No matterhow many squares are in the checkerboard, it should always be400x400 pixels. You can use either canvas (the stroke approach) orHTML elements (the object approach) to solve this problem.
Step 2: Checkers Display all the checkers on the board usingHTML elements (the object approach). Four pictures are provided foryou (red-piece.png, black-piece.png, red-king.png, andblackking.png, found in the graphics folder). 3 Please don'treplace them with different pictures. Your view must update whenthe board changes so that it displays the current state of theboard at all times. You can test this by clicking on the buttons,which produce various board configurations in the model.
Step 3: Move Feedback When a checker moves from one place toanother, draw a yellow arrow from the center of its old square tothe center of its new square, appearing above all checkers. Thisarrow should persist until the next change to the board.
The checkerboard should look like this with all buttonsconfigured, the buttons should move. I will downvote if youcopy some other code and paste it here.
- Please Use Html Css Js Not Any Other Will Upvote Step 1 Board Fill In The Skeleton Of Index Html So That It Displays 1 (28.34 KiB) Viewed 42 times