In another day as a final-year student, stressed out by FYP, an e-mail was received, containing the invitation to yet another hackathon: Facebook Hackathon. The 24-hour hackathon did not ask for any participation fee. Intuitively, having joined several hackathons before, I knew that this is a nice deal to get free food over the weekends. So, I signed up.
The path for free food isn’t easy. The ones signing up were sent a 90-minute coding test, hosted at HackerRank. I saw that kind of problem before, it can be solved using binary search. I have never coded binary search for a long time, and I was a bit rusty; so I searched the C++ documentation, did some trial and error until all the test cases are passed and I submitted and ended the test.
Few days afterwards, I gained a ticket for a weekend full of free food. :) But unfortunately, one of my friend that we all greed to be a team did not pass this stage. But fortunately, this was a similar case with Dian’s team; so we merged the two teams into a single team, a team that consists of me, Peter, Dian, and Pentium.
Brainstorming was hard, initial ideas were either too hard or uninteresting. One day, Dian talked about making Pac-Man game using Google Map. I got extra excited that time, I thought it was “Pac-Man Go”, a game where the world is a huge Pac-Man arena, with players acting as Pac-Mans, collecting the pills and avoiding the ghosts. But no, it wasn’t. The idea was to have massive multiplayer online Pac-Man game using arena defined from map data from Google Map.
After few days of deliberating and negotiating ideas, finally, by majority voting 3:) , Pac-Man idea was chosen.
On the day itself (4 September 2016), me, Dian, and Peter arrived at Boon Lay around 10 am and went to Facebook Singapore HQ, stopping at and walking from City Hall MRT station. The name of the place itself was quite confusing, it is located at “The South Beach” which was different from “South Beach Tower” (which was still under construction).
Arriving at Facebook Singapore, before going in, we were to sign a document on an iPad (which is linked to our Facebook profile, oh no); then we were given an ID. Going in, we were told to choose a table. Since we were early, we chose the table of best view: beside the window. Our table was already filled with lots of goodies: stickers, pens, papers, USB hub, and a weird speaker-like device, which turns out to be really a speaker with a peculiar shape and jack location.
Pentium came arrived around 12 because he got an early morning meeting. After him coming, we’ve finalized the idea of Pac-Man; and we realized that the idea of using data from Google Map or other map sources were too difficult at the moment. The technical concern was on how to navigate around a junction with more than 4 roads. So we decided to just make our own map in 2D grid but still keep the multiplayer idea and make it infinite world.
Lunch was served at 1 pm. Over lunch, we talked about further issue on the infinite world: how to store map states and how to place ghosts. Ghosts placing issue was resolved by zoning: at one zone, there will be at most certain number of ghosts initialized and the ghosts shouldn’t leave their own zones. Meanwhile, the infinity of world issue was resolved with making it finite but large enough so people won’t notice. :P
After lunch, we started coding, for real. And we did some job allocation. And I got to handle the front-end. Again.
So I started coding, laid down basic HTML structure, with canvas, CSS and JS. Then I realized that I need sprites of Pac-Man and ghosts. Since Peter’s role was to generate map, and he can’t do that till Dian/Pentium’s part were done; he was enslaved to generate the sprites 3:)
The Pac-Man Dossier became my best reference in terms of naming and map drawing. It contains the specification of the map in the original Pac-Man: an object is tracked in a grid but can be drawn out of grid (overlapping other grids). The walls were also “tricked” to be drawn in the middle of grid instead of at the side of the grid. It was genius, this reduces the logic of drawing wall by a lot (from 13 conditions to 6, if I’m not mistaken). By drawing objects bigger than the grid, the feeling of objects being too far from walls were eliminated.
At the Hackathon, there were two-hourly lucky draws too, denoted by the playing of the song “One Direction – What Makes You Beautiful”. And Peter won a blanket with sleeves and pocket at 12 am (in which I think it can also be a Dumbledore costume :P ). There are times where the prizes were quite valuable, like Polaroid camera and wireless speaker.
Besides that, our motivation of coming to hackathon were fulfilled: free food. There were abundance of food, snacks, and drinks. I tasted the best bottled Green Tea ever; at the bottle there were Japanese characters written all over (so I don’t know which brand I’m drinking); and I drank 2 litres of it that night (cause I thought that green tea does not contain any caffeine). The lunch was really nice: prawns, chickens, etc (wow). Dinner was not as high-standard as lunch, since each got a packed Mexican food. Supper was good: pizza and bubble tea. There was supposed to be “ice-cream” at 3 am, but I’m so busy and not in mood that I skipped that. Breakfast was just so-so since I’m a fan of French bakery: there were selections of croissants and similar bread.
Anyway, my development took longer than I thought. After I finished drawing all those assets, it was already dinner time. After I finished animating the sprites, it was almost 9 pm. Initial server communication implementation started around midnight, and only finished around 4 am; but with technical limitation of only supporting Firefox (due to requirement of “event.key” instead of traditional “event.keyCode” or “event.which”) There were Facebook Hackathon T-Shirt giveaway around 5 am, and all we needed to do is a limbo, and this hurted my arm. Since my work was more or less done, and since my arm felt hurt, I went to the “sleeping area” (the Facebook Wall area); but I couldn’t sleep, and then I started to doubt my conception of green tea not having any caffeine. (later I checked, and yeah, it contained a small amount of caffeine, but since I took large dose of it, I think the caffeine really affects me). During sunrise, I implemented drawing the energizers and put alert when Pac-Man dies. Yeah, basically that was it.
Our two-minute presentation was near the end of the pitches, and it turned out to be quite short as we do not prepare anything beforehand to pitch. Just Dian and Peter talking about what our project is and the technologies used, and then straight to demo time, which is controlled by me and Pentium. The judges looked interested, cause at the end they asked further question regarding the technologies used.
During the judging time, we went to take photos around and played foosball. Then all participants were gathered to take mass photo and also announcement of winners. There were announcement of prizes before the announcement of winners. Third place will get solar-panel backpacks; second place will get Fitbit; and first place will get a trip to Facebook HQ in November to join the Facebook Global Hackathon. In my mind, I thought, third place prize sucks, and first place might cause me not finishing my FYP; so 2nd place prize was the best for me :P
Third place was an app (named “Dalton”) to help color-blind people to “see” colors. Second place was, surprisingly, us. Wow. Wow. Wow. I can’t believe it. Expectation to win prize at this hackathon has never crossed my mind before (since I was really being motivated by the free food and coding fun project). And the first place was a Facebook-like site called Tombbook, basically Facebook for the dead so those alive can post messages and those deads can leave messages to those alive (which they must do before their death).
After the celebrations, we went back by taxi; and arriving at my room, the first thing that I did was to take shower and then took a nap.
Afterwards, I put the server up on Heroku and client accessible from more browsers. If you are interested, you can access it here: https://spanisharmada.github.io/mmopm-client/ (note: player movement is controlled from server, so there will be lots of lags during movement)