What and Why
For the final project, I made a simple snake game that recorded the replay of each game. The replays of all the people who played the game can then be watched at the same time and the interactions between the snakes become very apparent. The point of the project is to illustrate the way we interact with people in our lives, whether they be complete strangers, simple acquaintances, or close friends. Here is the message that is displayed after a player finishes a game:
“That seemed like a pretty basic snake game, and up until this point it was. But a recording of the game you just played was saved and can be viewed alongside all the other people who played this game. Your snake might have been in the same spot at the same time that another’s was, but there was no way for you to know until you watch all of these recordings in parallel.
Living in New York City, I pass by hundreds of people just on my way to class and I never interact with any of them. It’s interesting to think about where they might have come from and where they might be headed. In half an hour I’d be sitting in a lecture I’m probably not paying attention to and they could be on a train to Boston. But for that brief moment in time while we waited at that stop light, our lives intersected. Maybe we’ve stood at that same spot together multiple times before, or maybe that was the first time we had ever “met”. Maybe those few seconds of our lives would be the only few seconds we will ever spend in the same spot. The point is, we tend not to think about these things. We tend to focus on our own lives and our own goals. While playing this game, you happened to follow a very similar path as someone else who wandered to this site.”
After this message is displayed, the player can watch their own recording alongside the replay that most closely matched their own. This way, the player can see how they were running alongside someone else at the same time but didn’t notice while playing by themselves. Once the replay is finished, another message is displayed to the user:
“As you may have seen, there were points where the two snakes intersected, and there were points where they ran in parallel. I think it’s an interesting illustration of how we interact with people, whether they be complete strangers, colleagues, or close friends. We each have our own goals, but that doesn’t mean we should block out everyone else’s.”
Players can also watch everyone’s replays at the same time here: http://snakes.kzhang.io/replays
How
To implement this, I used Node.js on the backend to serve the static html files while also storing all of the replays in a JSON file. I also used socket.io to implement real time functionalities like replays being displayed at /replays instantly after someone finishes their game. I use p5.js to draw the game board, snakes, and food. A “snake” is a simple array of coordinates, with which I draw a series of ellipses that progressively become more opaque so that it looks like it is fading out.
To implement replays, I store all of the necessary information in a Javascript object:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
[ { points: [ { snake: "[coords, coords, coords]", food: coords }, { snake: "[coords, coords, coords]", food: coords }, { snake: "[coords, coords, coords]", food: coords }, ], "color": [r, g, b] }, { points: [ { snake: "[coords, coords, coords]", food: coords }, { snake: "[coords, coords, coords]", food: coords }, { snake: "[coords, coords, coords]", food: coords }, ], "color": [r, g, b] } ] |
This object is stored on the server in memory and also in a JSON file that is parsed when the server is started up. This way, if the server ever crashes, the replays are still saved. To display the replays, I simply go through each point in the replay and draw the snake as well as the food objective at that point. This happens for all of the replays at the same time so they can all be viewed in parallel.
The code can be found on my github: https://github.com/Kinzeng/socket-snakes
Demo
To see all of the replays currently stored on the server, simply click this link: http://snakes.kzhang.io/replays
If you want to try it out, go to http://snakes.kzhang.io and hit space!