tl;dr 🔗

I created a simple JavaScript space invaders like game using the browser's local storage as "canvas". You need to open your developer tools to be able to play it.

Try it yourself...

Launch Cookie defender
Sound

Controls 🔗

Control your player with your arrow keys or WASD.

Browser support 🔗

I've run the game successfully on Chrome 72 @ Mac + Windows 10, Firefox 65 @ Mac + Linux Mint, Firefox X @ Windows 7, Vivaldi 2.3 @ Mac and Opera 58 on Mac + Windows 10.

It does not work on Microsoft Edge 42 @ Windows 10 as their DevTools doesn't auto-refresh any of their web storages. Internet Explorer 11 (at least on Windows 7) doesn't have a proper localStorage viewer.

...or just watch the video 🔗

Fake Asked Questions (FAQ) 🔗

Why would anyone make this? 🔗

Are you kidding me? Because it could be done, because it's something I haven't seen before, and because programming is tons of fun. When I got the idea I had to finish it.

It is a bit annoying to play the game in Firefox's devtools as they have a (probably normally useful) feature of blinking every time the localStorage is updated.

Where did you get the inspiration from? 🔗

From somewhere completely elsewhere. I recently saw a Hacker News post about an 11 year old favicon game called Defender of the favicon. I was a bit annoyed that I didn't come up with that idea (either before 2008 or any of the 11 following years..), so I wanted to create something nerdy and fun I hadn't seen before. Pretty quickly I came up with the idea of using the browser developer tools as the game "screen". First I thought about running the game in the cookies, but the JavaScript API for handling cookies is almost non-existing. Using the localStorage is so much simpler, and to my surprise all the browsers I first tested immediately updated the developer tools to show the contents of the local storage.

Is the game open source? 🔗

Yes! Just head over to my GitHub repository for the game. Please note that while my game code is licensed under MIT License, the sound and music assets have their own licenses.

Do you have any other fun stuff to try out? 🔗

Why don't you try out my bookmarklet game DOM II: JavaScript Hell? 😎

What's next? 🔗

I hope that you will make Tetris or a car game for the browser devtools. That would be so cool. 😀

Today I Learned (TIL) 🔗

1. None of the developer tools I tried used a monospaced font for the localStorage, making it really hard to make the game at all.

2. Emojis might not be of the same width, but they are almost of the same width, making it easier to make the game.

3. There's a whitespace character called ideographic space that are about the same width as many emojis. Without that I don't think I could have made this game.

4. Mozilla has a really nice description on how internationalize your keyboard controls so that WASD magically becomes ZQSD for people with AZERTY keyboards. (Hello 🇫🇷.)

5. The world isn't ready for ES6. This is no surprise I suppose. I started out going all classes, fields (ok, that's TC39), arrow functions, computed property names, various String functions, etc., but had to go back to good old days to make the code run everywhere.