Last week the Global Game Jam 2019 took place all over the world. I took part together with my group, Team 10, at the Milan Jam Site, specifically in building 26, aka the canteen, of the Politecnico di Milano.
The main theme, which we can now reveal, is: “What home means to you?”. A theme that’s definitely much more complex than last year’s “transmission”. Home can mean anything, from “family” to “resting”, or even the “bathroom”. It took us just a few hours to realise we wouldn’t be able to make a game with a deep meaning: each of us has our own idea of home, and it’s impossible to bring them all together under a single concept. So we decided to make something definitely more concrete and less deep, you could even say bordering on trash.
The home of a website is its homepage, and that’s the goal of our videogame.
You are browsing the web and you find yourself blocked in a webpage with no return button. What will you start looking for? Maybe you’ll start searching for a “Home” button… and that’s when the game start. You’ll find yourself (as a chicken :P) blocked at the bottom of the page and you’ll need to start jumping around to reach the home button. Once you get there, you will be redirected to the home page you were looking for!
Despite the game’s innate stupidity, we realised that playing it manages to bring out a few smiles, especially because the game’s difficulty comes from the web pages themselves, which sometimes manage to make reaching the homepage impossible. Imagine a website with a very tall full-width image in the middle: the protagonist of Cock O’ The will never be able to get past it. We added the bomb-eggs to give the character a boost to get across longer gaps but, sometimes, that’s not enough. In those cases the only solution is to go and edit the page source with inspect element, all in less than 60 seconds, of course. Finally, to add a further complication, we gave the page’s components a lifespan: after a random time they’ll fall and won’t let you climb any more. Good luck climbing back up a site with infinite loading!
Now let’s dive into the technical section of this game which, as an occupational hazard, will obviously turn out to be the most interesting one.
The game is a Chrome extension developed in ES7 and packaged with Webpack and Babel.
Finding the homepage
One component of the game takes care of finding the candidate homepages in the web page. Using XPath queries it finds everything that looks like a homepage and replaces it with a game trigger. Obviously, in cases where the homepage isn’t an actual link but a wrapper that links to the homepage via javascript, the component can’t find it.
Parsing the page
The page is parsed as soon as the game starts. The parser has a fundamental job: it finds the components of the page the character will be able to jump on. To do this it looks for all the paragraphs, headings, images, links, etc. and applies various transformations to them, thus blocking the ones whose width spans the whole page. One of the most important transformations is definitely wrapping all the text in a span wrapper so that the container only takes up the width of the text itself.
Rendering and event handling
We decided to rely on the browser engine to handle the character’s movement, so we didn’t use canvases. This decision was dictated by the little time available: we wouldn’t have managed to build an engine in less than 48 hours. Re-rendering the page is therefore tied to the number of ticks per second the game runs. We set this value to 60 to make it smoother, at the cost of making the game itself heavier. Every sixtieth of a second the Ticker component calls the tick() function of all the components registered to it, which check the time, move the character, update the ui, handle shooting, etc.
Multiplayer
We didn’t have time to implement an efficient rendering engine, but we decided to try implementing multiplayer. Within a few hours we gave up on this crazy idea, especially when we realised that letting two players play on the same web page, even with different tab sizes, was impossible, unless we applied weird transformations to the page. In any case, you can try the multiplayer in development mode. We built a mini web-socket server with socket.io that does nothing but broadcast the positions of the various players to all connected clients, and the game renders the players at the position it receives. Obviously it isn’t secure or working in any way, it’s just a scratch.
Source
All the source code is available on GitHub at this address: https://github.com/pupaxxo/cock-o-the.
Don’t hesitate to contact me at my email address for any other information: [email protected]