Tworzenie gry komputerowej używającej favicony jako canvasa (film ~5 minut)
Kanał Mashpoe w swoim najnowszym wideo opowiada o fascynującym projekcie, który z pewnością zainteresuje miłośników programowania i gier. Skupił się na tym, jak można manipulować faviconami, czyli ikonami zakładek w przeglądarkach, za pomocą JavaScriptu. Te niewielkie ikony, zazwyczaj mające wielkość 16x16 pikseli, mogą być używane nie tylko do identyfikacji stron, ale również do tworzenia gier. Mashpoe zwraca uwagę, że wiele serwisów korzysta z tej funkcjonalności, a jednym z jego ulubionych jest favicon.cc, gdzie można edytować własne favikony. Ponadto przedstawia grę "Defender of the Favicon", która umożliwia graczom zabawę wewnątrz faviconu, mimo ograniczonego obszaru wyświetlania.
Kiedy Mashpoe musiał stworzyć swoją własną grę w faviconie, postanowił uprościć zasady, biorąc przykład z znanej gry, która pojawia się w Google Chrome, gdy internet przestaje działać. Gra dinozaura jest o wiele prostsza do zaimplementowania, ponieważ wymaga jedynie dwóch kolorów i kilku podstawowych elementów graficznych. Przedstawił minimalistyczne sprity, w tym dinozaura i kaktusy. Mówi również o tym, jak HTML5 canvas, technologia, która staje się coraz bardziej popularna w tworzeniu gier, może być używana do generowania klatek gry.
Podczas gdy większość gier HTML5 jest wyświetlana w oknie przeglądarki, Mashpoe chciał umieścić swoją grę w faviconie, co wymagało stworzenia specjalnego kanwy o rozmiarze 16x16 pikseli. Opisał, jak zmienia się zawartość tagu w HTML, aby zaktualizować ikonkę wyświetlaną przez przeglądarkę. Kluczową technologią jest metoda `toDataURL`, która pozwala na przekonwertowanie grafiki na URL, co oznacza, że nie ma potrzeby hostowania nowego pliku przy każdej aktualizacji ikony. Co więcej, Mashpoe musiał napisać funkcję, która wymienia aktualny element faviconów, aby załadować zawartość z danych URL.
Pisanie kodu do gry okazało się szybkie i efektywne; zajął się tym w ciągu około 5 godzin. Najwięcej czasu poświęcił na poprawne wyświetlanie cyfr na ekranie, aby pokazać wynik gracza. Dla tych, którzy chcą spróbować sami, Mashpoe obiecuje podać linki do kodu źródłowego oraz do gry w opisie wideo. Wspomina również, że nie zapomniał o swoim poprzednim projekcie — grze sandbox podobnej do Terraria, która jest obecnie w toku, mimo problemów, które napotkał.
W momencie pisania tego artykułu film Kanału Mashpoe ma 337070 wyświetleń oraz 13093 polubień, co świetnie świadczy o jego popularności i zaangażowaniu jego widzów. Twórcze podejście do łączenia programowania z zabawą w projektowaniu gier w faviconach bez wątpienia przyciągnie wielu entuzjastów technologii oraz fanów gier. Jak widać, nawet proste pomysły mogą zaskoczyć i przynieść niesamowitą zabawę dla graczy oraz inspirację dla programistów.
Toggle timeline summary
-
Wprowadzenie do faviconów i ich roli w nawigacji przez karty przeglądarki.
-
Wyjaśnienie, jak używać JavaScriptu do dynamicznej zmiany faviconów.
-
Wprowadzenie do favicon.cc, edytora faviconów do aktualizacji w czasie rzeczywistym.
-
Wzmianka o grze Defender of the Favicon, granej wewnątrz faviconu.
-
Dyskusja na temat ograniczeń rozmiaru faviconu wpływających na szczegóły.
-
Opis elementów rozgrywki w Defender of the Favicon.
-
Wyzwania występujące podczas grania w grę w różnych przeglądarkach.
-
Plan stworzenia prostszej gry w faviconie.
-
Wybór gry dinozaura z Google Chrome jako inspiracji.
-
Bieżąca faza projektowania minimalistycznych sprite'ów dla nowej gry.
-
Wykorzystanie HTML5 canvas do wyświetlania gry.
-
Tworzenie ukrytego canvasu do generowania klatek 16x16 pikseli.
-
Wyjaśnienie, jak zmienić favicon za pomocą specjalnego tagu HTML.
-
Wprowadzenie metody toDataURL do dynamicznego generowania obrazów.
-
Wyzwania związane z aktualizacją faviconu przy użyciu adresów URL danych.
-
Podsumowanie czasu rozwoju i napotkanych wyzwań.
-
Obietnica dostarczenia linków do kodu projektu i powiązanych zasobów.
-
Zapewnienie o trwającej pracy nad poprzednim projektem gry 2D w piaskownicy.
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.