CMSC 22000 Final report

Quarter: Spring 2025

Feature: Adding Games II

Design and Implementation:

The Words Game module in ChiGame is our interpretation of a word-guessing game offering single-player and multiplayer options with a couple of different mode-options. Essentially, the game functions closely (and in the case of the standard mode exactly) to the idea of Wordle but has been created with additional features and personalizations to showcase some software-development fundamentals. Our biggest priorities were maintaining good user experience, real-time connectivity, and integration with the rest of the ChiGame platform.

The game has three modes: Solo Mode, Versus Mode, and Daily Mode. In Solo Mode, the players can customize the game according to their liking by choosing 4, 5, or 6-letter word lengths, while Versus Mode allows two players to play against each other in real-time. In the Daily Mode, there is a shared challenge where all the players attempt to solve the same word. The game is straightforward but addictive - six attempts to solve a hidden word, with each attempt yielding color-coded clues: green for correct letters in the right place, yellow for correct letters in the wrong place, and gray for letters that aren't in the word. This feedback system is complemented by a virtual keyboard that provides real-time visual feedback on letters utilized, enabling players to monitor their progress and make informed guesses in the same way you can in Wordle.

The technical architecture of The Words Game is built on a strong foundation of modern web technologies. The frontend is built on a stack of HTML, CSS, and JavaScript, with the game board designed as a responsive grid layout using CSS Grid. The module uses Socket.IO to enable real-time multiplayer for Versus Mode, enabling real-time bi-directional communication between players which we will get into later. The game employs the Dictionary API (dictionaryapi.dev) for word checking to only permit acceptable words as guesses. Game state is managed through a combination of local storage and in-memory state to allow players to continue games and persist their progress across sessions. We implement localStorage to maintain game state, user preferences, and achievements across browser sessions. For game state persistence, it saves the current game progress (including guessed words, target word, and game status) under different keys for solo and daily modes, allowing players to resume their games even after closing the browser. The game also stores user preferences (like dark mode, colorblind mode, and sound settings) and various achievements (including streaks and special accomplishments) in separate localStorage keys, using JSON.stringify() and JSON.parse() to handle data structures while maintaining the simplicity of localStorage's key-value storage system.

We implement a few models to manage game state and data, with the core model being the word list system that maintains separate collections of 4, 5, and 6-letter words stored in text files (4WORDS.txt, 5WORDS.txt, and 6WORDS.txt). The game state model tracks current game progress, including target word, guessed words, letter positions, and game status (win/loss), while the achievement model maintains player accomplishments and statistics through a combination of localStorage and in-memory tracking. The settings model manages user preferences (dark mode, colorblind mode, hard mode, and sound settings) and persists these choices across sessions, while the multiplayer model (in versus mode) handles real-time game state synchronization between players through Socket.IO.

The implementation includes several features to enhance the game play. The animation system adds tile reveal transitions that are smooth and feedback animations for a shake on invalid words. The multiplayer implementation includes real-time opponent progress tracking, synchronized game state, and a comprehensive scoring system. The Words Game implements animations through a combination of CSS transitions and JavaScript event handling. The animation system uses CSS classes (like "shake" and "animate_animated") for basic animations, while complex animations (like modal transitions) are handled through JavaScript by manipulating style and using transitionend event listeners. The game maintains consistent animation timing through constants (ANIMATION_DURATION and ANIMATION_DELAY).

The code is split into logical modules, with a clear separation of concerns between game logic, UI components, and state management. The feature uses external libraries, using Socket.IO for real-time communication and the Dictionary API for word validation. Sound effects are provided courtesy of Pixabay, and the game has word lists for different word lengths.

The versus mode in the Words Game is implemented as a real-time multiplayer system using Socket.IO as mentioned before, where the server maintains a Map of connected players and generates shared sequence of words when two players connect. On the client side, each player connects to the server using Socket.IO, is assigned a player number, and maintains two game boards - one for themselves and one for their opponent - with real-time updates handled through various socket events like startGame, correctGuess, opponentScored, wordResult, opponentGuess, and gameOver. The game flow is structured around a timer where players compete to solve as many words as possible, with points awarded for each correct guess and new words provided immediately after successful solves, while the opponent's board shows their progress without revealing the actual letters. The game concludes when either the time runs out, a player fails to solve a word, or all words in the sequence are solved, with the server handling the final scoring and determining the winner.

Overall, we believe the design achieves a nice trade-off between complexity and maintainability and provides foundations for future development.

Next Steps:

As we implemented The Words Game, we envisioned a few more features that would enhance the user experience. The features are as follows:

1. Currently we have a Versus Mode, where two users can race to guess a word. It’d be interesting to expand this into more than just two players. Either a group race or a tournament system where players can compete in brackets and spectate each other. We envisioned that this feature would require some sort of player lobby with an interface that easily lets users challenge others within a large group.

2. Right now we’re using localStorage to store all user’s game data. localStorage has many drawbacks, the main one being that it’s browser dependent. One feature we had trouble implementing was a key/value data storage system, where we’d request all user game data via an API with ChiGame’s backend. This feature would be a great improvement to our game, as it allows users to maintain their game state, even if they login to the same account on a different laptop .

3. While there’s a live chat in ChiGame, we wanted to implement a live chat within The Words Game itself. This chat would exist in the lobbies/parties we previously mentioned, and would be great for spectators to use during tournaments. This feature would involve working with the Live Chat Team on implementing this feature into our game.

4. One last feature that’d be a fun addition is the option to choose/make words for your friends to guess. This option could be integrated into Versus Mode, where one user could create the answer that their friends would race to guess. This would perhaps consist of sending the user’s planted answer to the server, and the other users using this word instead of querying the file with the list of words.