This is the postmortempartum article about my game, "When my vpn goes offline it allows all kinds of people to snoop on my computer, such as demons and monsters, and that’s inconvenient because I’m trying to finish writing this paper." You can play it here, view my entry page here, or read the source code here.
On the sidebar (or footer if you're on a mobile device) of this site, I included links to other articles I wrote about my process and different things I learned throughout the process, I hope they're helpful for somebody in the future.
Making a game fit under 13kb was a task that I thought would be difficult, but personally, I found that it was a lot easier than I expected. I choose to not use any framework and rely on DOM manipulation, CSS animations, and emojis. I did not have any problem with the size and even had 5kb left over to use for my logo. The tools and strategies to stay under the limit are the same tools and strategies used for any webpage, minification, keeping code DRY, and compressing images and other resources.
I did not have any experience with the Web Audio API before this project. Having a webpage make noise is already jarring and scary, (w3c themselves says to not use autoplay in <audio> or <video> tags!), and being able to play a random frequency, most of them out-of-tune, was a plus to setting the tone of a horror game.
Unfortunately, I completely forgot to use the Web Speech API. I planned on using it initially, but did not remember to add it in before submitting the game. My original idea was to have each word that was successfully typed to be read out to the user, in addition to the sounds generated by the keyboard presses. This would make the dialog events more effective since they are made up of real sentences instead of random words.
Also, I had an idea of emulating geolocation, camera, and microphone requests (like phising pages) to make the user feel like they were being watched. This ended up being problematic because I would have to determine the user's browser, operating system, and browser width for it to be realistic. Also, the safety feature known as "Safe Pixels", where browser security prompts are shown in areas where the browser can't render, such as above the URL bar or in a browser-styles window, would make this technique not seem believable. (If somebody knows a better term for this, please let me know 😊 ).
Using no framework or <canvas> was a good idea. I was initially worried about performance if I was editing the innerHTML of the main page, but parsing even thousands of words, applying their styles and splitting them between characters that have already been hit and characters that the user hasn't hit yet was not a problem:
let innerHTML = ''
// Parse every word and apply styles
words.forEach(function (word) {
innerHTML += `<span class="${word.index >= word.word.length ? 'current' : 'next'} ${word.style ? word.style + ' animate' : ''}">`
Array.from(word.word).forEach(function (char, index) {
let className = (index < word.index) ? 'good' : 'bad'
innerHTML += `<span class="${className}">${char}</span>`
})
innerHTML += `</span> `
})CSS Animations also were made with regards to performance. Animating only transform and opacity caused no unnecessary repaints to happen and made sure the game was being displayed at it's highest FPS.
I learned some new things while making this game that I can carry on to my other projects and I'm glad I participated.
Date: 2018-09-23