I really wanted to use the Network library in Processing as this was something new to me. Thus, I hoped to create some sort of two player game.
As a kid, my siblings and I would make a grid of dots on napkins and play the dots and boxes game where you’d have to form as many boxes as possible by drawing lines between the dots.
I hoped to implement a version of this game with a limitation of what dots you could draw on.
I began by creating the Dot class. I thought about user feedback a lot for this object. When the user hovered over a dot, I wanted it to become lighter. I wanted there to be a beep tone. Upon selection, the dot’s color would change. I originally just kept the posX and posY of each dot object, but later realized it would be useful to be able to have the row and column number as attributes to avoid multiple for loops.
Working with the server and client was easier than I expected because it was quite simple to send data over the socket. Originally, I sent a longer string, also including variables like whether a box was created, etc. I realized this was redundant and I would just need to send the selected row and column dot numbers and have a function to handle the data on each side and see whether a box was created, etc.
Some of the edge cases I identified for error validation:
- Does the user select exactly two dots?
- Does the user select “opponent dots?”
- Does the user select dots that are next to each other (not including diagonals)?
To keep track of the dots selected before they were sent to the other player, I used an ArrayList to hold the dots. When the user clicked the user button, the error validation process would occur. If it was okay, then the data was actually sent.
The most difficult aspect for me was designing how to track boxes. I first created another ArrayList to hold all the pairs of a dot, but that was quite inefficient. I also tried manually checking each potential box position, but that was also unsuccessful. I ended up creating a Box class that matched row and column numbers with the dots. This worked because I could simply refer to the x and y position attributes in the dot class when drawing elements like lines between dots and rectangles for the boxes.
Another challenge was making sure to avoid having an array out of bounds error when checking dots/boxes on the edge of the grid. I solved this by only checking a dot if it was within the boundaries of the grid.
Finally, I did not redraw the background each time. Redrawing the background would remove the lines and boxes. Perhaps, I could have redesigned my architecture to draw lines and boxes each frame depending on certain attributes of the objects. However, my choice to not redraw made things difficult when updating the error message and scores. I ended up cheating a bit and redrawing a rectangle on top of the old messages with the same color as the background.
I relied on the Processing function mouseMoved() to help detect hover state of the dots and make the color slightly lighter. I used mouseReleased to help click the dots and do error validation.
I created a start screen to fulfill the image requirement of the project. I designed the screen image in Figma. When the user clicks, the game state changes.
The end screen comes up when every box has been completed.
Overall, this project was fun to complete and I became a lot more familiar with the Network library.
As always, there is room for improvement. I would make the project better by:
- having a grid size option so the user could make more or less squares depending on their preference
- having background music in the beginning
- having an option to mute sound
- having an instructions/pause game state
- having a more beautiful method of filling in the rectangles
- changing the “end turn” button if it is not the user’s turn.
- use ngrok to make it more playable
But, I suppose there is always more one can do so here is my game for now. The game takes around 12-20 minutes to play through, so here is my game in about a minute. The audio is quite messed up in the demo video since I am playing it at 20x speed.
Here’s the code:
https://github.com/simranparwani/introtoIM_midtermproject
//be sure to read the README.md to start the server and client correctly!