Set is a card game in which players have to find a group of cards that satisfy a particular criterion. It is a speed game: 12 cards are dealt face-up, and the players try to be the first to make a set from the visible cards.
There are 81 cards. 12 cards are dealt at a time. As the player finds a set of cards, that set is removed, and three cards from the deck are dealt to make a 12 again. There are four categories: color, number, shape, and shading. A set consists of three cards with either all same of one feature, or all different of a feature. For a complete description of the game see the Wikipedia entry.
Enter this code on the terminal:
$git clone https://github.com/cse3901-2020au-1240/proj5-dabuggers.git
Open the index.html file from the proj5-dabuggers folder. The HTML file will open automatically in a default web browser.
Click start to begin the game, and a grid of cards will appear. Once you find a set among the cards, click on the 3 cards that belong in that set. If the game tells you that it isn't a set, you can click on a card again to unselect it. Once you get a set, the game will tell you that that was a set and add new cards to the grid. Continue this process until there are no more sets.
The code is written in HTML (for structure/content), CSS (for styling), and JavaScript (for the game engine).
There are 3 files: set.js, index.html, and stylesheet.css.scss
index.html: This contains the html for the page. It contains just one div which is a container for the webpage, which will otherwise be generated by javascript.
stylesheet.css.scss This contains all the css styling for the webpage.
set.js This contains all the javascript to populate the webpage. It will start off with the homepage containing a header, start button, highscores button, and a rules button. All of these have onclick methods that will generate the pages that they correspond to.
When the start button is pressed a div is displayed that contains a 1x2 grid. Another div is displayed for the left and right side of that grid. The div for the right side also contains a grid that has 1 column and 2 rows and 2 divs are added to fill these spots as well.
When the rules button is pressed a header and a paragraph is displayed containing the rules.
When the high scores button is pressed a table element is generated using a loop and the high scores array that contains the top highscores along with the number of sets they got correctly for each attempt and the time each attempt took. This table is then appended to the page.
The deck array contains all the cards that are not displayed and have not been made into a set, which means it starts off with all 81 cards. To display the cards, 3 random indices are removed from deck at a time until there are at least 12 cards displayed and they contain a set. The cards themselves are generated by creating divs that have classes based on the card's characteristics. When a user selects a card, it is highlighted and added to the input array. Once that has 3 cards selected, the user can no longer select another card. If the three selected cards are a set, they are removed from the displayed cards, a message saying that was a set is displayed, and new cards are added to the display. If the selected cards are not a set, a message saying so comes up, and the user can deselect the cards. Once there are no more sets in the displayed cards and no cards left in the deck, the game ends and there is an alert telling the user their score and time. The score is calculated each time a new set is found by accounting for the number of sets the user has found and how much time they took.
- Hint generator
- Score keeper
- Highscores saved
- Sleek user interface
There isn't really a way to systematically test this project because of all the user interaction, so we tested this by hand. We ran through all the scnearios we could think of that might break the code. We made sure the hint cards weren't clickable, we made sure only 3 cards could be selected at a time, we made sure selected a card a secend time would deselect it, we made wure more than 12 cards were displayed if necessary, and we made sure the highscores displayed correctly.
We used ESLint to check the style on the JavaScript code and the W3 Schools HTML and CSS validator.
Colors were taken from the Office Theme color palette on Microsoft PowerPoint.
SET is a registered trademark of Cannei, LLC.