top of page
Set
Desktop Card Game
__________________________________________________________________________________________________
OVERVIEW
This mini-project was completed during my senior year of college and it was assigned as en entry project for the semester to allow us to learn to work within our groups. It is a game called Set in which players try to find 3 cards on the board which meet the requirements to classify as a complete set. The game was designed in Figma and then created with HTML & CSS. Other programmers in the group were assigned to additional functionality.
PREVIEW
Main Page
Menu Page
End Screen Page
PROBLEM/GOAL
The goal was to create a working desktop application which would allow users to play the game of set. Additionally, the app was to display the rules to the player in some way so that they knew how to play, as well as tell them if they won or lost by the end of the game. For extra credit, the group could choose to implement several different features such as multiple game difficulties, a top score indicator, a hint button, etc.
The group chose to include a timer that would begin with different lengths of time depending on the difficulty chosen before the game. Regardless of the time, the player would need to create 15 sets before the timer ran out in order to win.
A 'session best' score would also tell the user what their top score was since opening the app.
Finally, the group chose to include a hint button which would highlight a single card which would be included in an available set that existed on the board.
CREATION
The game requires an array of rectangular cards. So, roughly 2/3 of the screen was designated to be filled by the game board itself as this is where the player would select and view the cards. In the design, however, the board was extended beyond the starting 12 cards as it is possible for the board to eventually hold up to 20 cards without a valid set. This can occur if the player is unlucky. So, the board was doubled in size to keep its rectangular shape and to allow for enough space for 21+ cards to ensure a valid set. The background of the board was also chosen to be dark gray to help the white cards stand out.
Game Board
To remind users which cards they had already selected when forming a set, clicked cards would become shaded to indicate that they did not need to be considered again for the same set. If a player realized that they could not find a set containing a selected card, then deselecting an already clicked card would return the card to its original bright shade.
Unselected vs. Selected Card
Space was also included above the game board to let players know about specific information to their game such as when they found a set, when 3 selected cards were not a set, or when they needed to select more cards in order for the game to check whether those cards were a set. This space with a message displayed can be seen below.
Empty Space Above Game Board For Messages
The right-hand section of the board contained most of the text so that the player could learn the rules from the game and see their stats and then fully immerse in the board on the left when actually playing. This section of information would be divided up into subsections so that the info was easy to navigate through.
The top portion contained the game statistics with the specific numbers in bold so that the players could quickly see the important info even when under time pressure.
Game Statistics
Below the statistics and near the middle of the right hand section were the hint and menu buttons. By placing these buttons near the upper-center vertically, it would increase the likelihood that a players mouse was already at the right height and thus decrease the amount of time that it would take for them to move the mouse from the board to the buttons. This would help the player quickly view a hint when under time pressure.
Hint & Menu Buttons
Finally, furthest away from the game cards in the bottom right of the entire screen was the text which described the rules of the game and offered help. These items were furthest away because they would likely be read before beginning the game and then ignored for most sessions. However, if a player were to forget the rules, it was important to still display them so that they could remind themselves mid-game.
Help & Rules Sections
All of these features combined to create an enjoyable game with visual consistency. By planning out where each item would go beforehand and then using that layout to make the final designs, the group was able to avoid costly mistakes later in the project. Similarly, having a visual representation of what the final product was expected to look like helped the other engineers begin work on the functionality of the application before the designers had completed the HTML & CSS for the page. This allowed us to work simultaneously and be more efficient. Once the main page was laid out, the menu and end screen were also completed to finish out the game design.
Main Page Rough Sketch
Finished Main Page
Finished Menu Page
Finished End Screen Page
bottom of page