Creating a Computer Game Using a Favicon as a Canvas (video ~5 minutes)
In his latest video, Mashpoe explores an intriguing project that is sure to capture the attention of programming and gaming enthusiasts. He focuses on how one can manipulate favicons, the small icons in browser tabs, using JavaScript. Typically sized at 16x16 pixels, these icons are not only used for page identification but also for creating games. Mashpoe points out that many websites utilize this functionality, and one of his favorites is favicon.cc, where users can edit their own favicons. He also introduces the game "Defender of the Favicon," which enables players to have fun inside a favicon, despite the limited display area.
When Mashpoe needed to create his own game within a favicon, he decided to simplify the concept by drawing inspiration from the well-known dinosaur game that appears in Google Chrome when the internet is down. The dinosaur game is much simpler to implement as it only requires two colors and a few basic graphical elements. He introduced minimalist sprites, including a dinosaur and cacti. He also discusses how the HTML5 canvas—a technology that is becoming increasingly popular for game development—can be utilized to generate game frames.
While most HTML5 games are displayed in a browser window, Mashpoe wanted to embed his game in the favicon, which necessitated the creation of a special 16x16 pixel canvas. He described how to modify the HTML tag contents to allow for favicon updates within the browser. A crucial technology discussed is the `toDataURL` method, which allows converting graphics to a URL, meaning there's no need to host a new file for each icon update. Furthermore, Mashpoe had to write a function to replace the current favicon element to load the content from the data URL.
Coding the game turned out to be quick and efficient; he completed it in about 5 hours. The most time-consuming aspect was displaying the digit sprites correctly to show the player's score. For those eager to try it themselves, Mashpoe promises to provide links to the source code and the actual game page in the video description. He also reassures viewers that he hasn't forgotten his previous project—a sandbox game similar to Terraria, which is still underway despite encountering some minor glitches.
At the time of writing this article, Mashpoe's video has garnered 337070 views and 13093 likes, which speaks volumes about its popularity and viewer engagement. This creative approach to merging programming with the fun of designing favicon games is bound to attract many tech enthusiasts and gaming fans. As demonstrated, even simple ideas can surprise and deliver amazing enjoyment for players, while providing inspiration for developers.
Toggle timeline summary
-
Introduction to favicons and their role in browser tab navigation.
-
Explanation of using JavaScript to change favicons dynamically.
-
Introduction to favicon.cc, a favicon editor for real-time updates.
-
Mention of the game Defender of the Favicon played inside the favicon.
-
Discussion about the limitations of favicon size affecting detail.
-
Description of gameplay elements in Defender of the Favicon.
-
Challenges faced while playing the game in different browsers.
-
Plan to create a simpler game within a favicon.
-
Choice of using the dinosaur game from Google Chrome as inspiration.
-
Current design phase for minimalist sprites for the new game.
-
Utilization of HTML5 canvas for game display.
-
Creating a hidden canvas for 16x16 pixel frame generation.
-
Explanation of how to alter the favicon using a special HTML tag.
-
Introduction of the toDataURL method for dynamic image generation.
-
Challenges faced with favicon updating using data URLs.
-
Summary of development time and challenges encountered.
-
Promise to provide links for the project code and related resources.
-
Reassurance about ongoing work on a previous 2D sandbox game project.
Transcription
Whenever you have multiple tabs open in your browser, you probably use the tab icons, which are also known as favicons, to quickly locate the correct page that you opened earlier. What most people don't realize is that you can use a little JavaScript to manipulate the DOM and actually change the favicon on demand. There are a few websites that use this functionality, and one of my favorites is actually a favicon editor called favicon.cc, which will display the favicon you're currently editing in the actual tab and update it whenever you make any changes. One website takes it a step further by allowing you to play a game called Defender of the Favicon inside of the favicon. Unfortunately, favicons can only be 16x16 pixels on most displays, which means there's not a lot of room for detail. Despite this, Defender of the Favicon still manages to do a great job squeezing in as much detail into the icon as possible, featuring the player's ship, waves of aliens, lasers, and a nice city background. This game plays okay in Firefox, but it's extremely difficult to play, partly because of the low resolution. Chrome updates the icon much slower than Firefox, resulting in a significantly lower framerate, which makes the game unplayable. I decided to make my own game inside of the favicon, but I wanted to make it much simpler to compensate for the low level of detail and the lower framerate on Google Chrome. The most simple game I could think of is the dinosaur game that pops up on Google Chrome when your internet goes down. It only has two colors, a dinosaur, and the cacti. Pong would have also been a good choice, but it's a little cliche, and adding either two players or an AI would have been needlessly complicated. I began by designing minimalist sprites for the game. I made two different cactus sprites, a set of extremely small digits for keeping score, a very small dinosaur sprite, and a title screen that says Press Space. Just like Defender of the Favicon, my project uses an HTML5 canvas to display what's going on in the game. For those who don't know much about web development, canvases are used in many webpages to display games and web apps, and have slowly been replacing the vast majority of Adobe Flash Player applications over the past decade. We don't want our game to be displayed inside the webpage like most HTML5 canvas games, so we'll make a special hidden canvas that's only 16x16 pixels, which will be used to generate each frame of our gameplay, and then the frames will be displayed as the webpage's favicon. Web browsers look for a special HTML tag that tells it what to use for the page's favicon, so we have to change the contents of this tag to change the icon that's being displayed. This HTML tag belongs in the head of the document, and it provides the favicon to the browser via a URL to the icon file, which is then loaded and displayed. If we want to display our game's current frame, we have to provide a URL to it. Does that mean we have to host a new file on our server each time we want to display a new frame? No, actually. HTML5 canvases have a method called toDataURL, which returns a special URL that actually encodes the entire image, which means we don't actually need to host the file anywhere because the URL contains all of the image's information. If I were to encode a picture of Nicolas Cage into a data URL, that URL would work forever, even when you have no internet. This is because it's not stored on a server somewhere that might stop running someday, which would result in a dead link. Unfortunately, you can't just take these data URLs and put them in the href attribute of the favicon element I mentioned earlier, because the web browser won't update the favicon in the actual tab. To get around this, I had to write a function that deletes the current favicon element and replaces it with a new one that uses the data URL for the current frame. Now all I had to do was write the code for the dinosaur game, which wasn't actually that hard because the game is extremely simple. This whole project only took me about 5 hours to complete because of this, and I think most of that time went into properly displaying the digit sprites to show the player's score. I will link both the code for this project and the actual page where you can play the game in the description. I'll also link the favicon editor and Defender of the Favicon, which was the main inspiration for this project. For anyone who watched my previous video where I stated I would make a 2D sandbox game similar to Terraria but made completely out of text, don't worry, I'm still working on it. I got stuck on a stupid and easily fixable bug for a while, and I decided to make this video for the time being.