The game-board is made up of a 20 by 20 table. At the start of the game, all table cells should be given a grey background indicating an unvisited cell. At the same time, forty cells are chosen at random to represent the “treasures”. The user will then click on one table cell at a time as guesses. If the guess is correct (i.e. the cell contains a treasure), the cell will be marked with green. If the guess is incorrect (i.e. the cell contains no treasure), the cell will be marked red. The game ends when twenty treasures have been found or when the user clicks on a “reveal answer” button on the webpage.
It is totally up to you how you would like to organize your code. But here are several requirements:
- The puzzle board must be represented using a <table> tag.
- There should be a button to reveal the answer (revealing all 40 treasures)
- When the user makes 20 correct guesses, feedback should be given to the user, including the number of moves needed to reach the winning state.
- Although not shown in the images above, there should be a button that Resets the gameboard to its original state, essentially restarting the game. This should also run the process of re-randomizing the game board.
- You are not constrained to the styles shown in the screenshots above. Be creative, use different colors, make your page responsive, or introduce transitions for user interactions. You may also add elements to explain to the user how to play the game and keep a current high score using localStorage.
- For this assignment, you may not use frontend frameworks or libraries such as React, jQuery, or Bootstrap. If you are unsure if something is allowed, please ask either Bobby or one of the TAs.
本网站支持淘宝 支付宝 微信支付 paypal等等交易。如果不放心可以用淘宝交易！
E-mail: email@example.com 微信:itcsdx