Tworzenie gry w JavaScript w... Microsoft Word (film, 4 minuty)
W najnowszym filmie na kanale SethEric widzimy rewolucyjny projekt, który jest pierwszą grą stworzoną w całości w Microsoft Word. Co więcej, wszystko, co widzimy na ekranie, działa w czasie rzeczywistym i nie wymaga żadnej magii wideo. Autor podkreśla, że dodano tylko efekty dźwiękowe, aby nadać grze odpowiedni klimat, a cała logika i mechanika rozgrywki opiera się na Javascript i Microsoft Add-ins. To narzędzie deweloperskie jest otwarte dla każdego, kto chciałby stworzyć własne rozszerzenia do Microsoft Word.
SethEric ze szczegółami opisuje swoje kroki podczas tworzenia gry, zaczynając od momentu, gdy wprowadza polecenie 'yo office', co powoduje pojawienie się robota w dokumencie. Autor pokazuje, jak za pomocą JavaScript udało mu się ożywić postać, a także jak wykorzystał tabele do poruszania się w grze. Zaskakujące jest to, że mimo ograniczeń, jakie stawia Microsoft Word, udało mu się stworzyć grywalny produkt z działającym systemem punktacji i zdrowia.
Wideo ukazuje różne wyzwania, które napotkał podczas programowania gry. SethEric nie tylko musiał poradzić sobie z poruszaniem postaci, ale także z mechaniką spadających owoców i bomb. Z każdym nowym problemem, który pojawiał się w trakcie, autor znajdował kreatywne rozwiązania. Na przykład, użył funkcji do aktualizacji co klatkę, co umożliwiło owocom prawidłowe opadanie.
W drugiej części filmu SethEric koncentruje się na detalu wizualnym, w tym poprawie efektów specjalnych. Zmienia grafiki na bardziej interesujące oraz tworzy ekran „game over”. Cały proces okazał się czasochłonny, ale także angażujący. Udało mu się zakończyć projekt z sukcesem, co pokazuje, że nawet w narzędziu, które nie jest przeznaczone do gier, kreatywność i umiejętności programistyczne mogą przynieść niesamowite rezultaty.
Na zakończenie, film zdobył już 21 957 wyświetleń i 853 polubienia, co świadczy o tym, że społeczność internetowa z zainteresowaniem przyjęła ten unikalny projekt. SethEric zachęca widzów do subskrybowania kanału oraz dołączenia do serwera Discord, aby współpracować i dzielić się pomysłami. Z pewnością to nagranie zainspiruje wielu entuzjastów programowania do zabawy z Microsoft Word w nowy, kreatywny sposób.
Toggle timeline summary
-
Wprowadzenie do pierwszej gry wideo stworzonej w Microsoft Word.
-
Wyjaśnienie, jak gra działa w czasie rzeczywistym bez edycji wideo.
-
Gra posiada działający system punktów i zdrowia.
-
Wprowadzenie do dodatków Microsoft jako narzędzia do tworzenia gry.
-
Przejście do przeszłości, aby wyjaśnić proces rozwoju gry.
-
Pierwsza interakcja z postacią w grze.
-
Wyzwania związane z poruszaniem elementów gry i ograniczeniami JavaScript.
-
Osiągnięcie stworzenia postaci mobilnej z wejściem z klawiatury.
-
Wprowadzenie mechaniki opadających owoców do gry.
-
Rozwój mechaniki bomb, w tym kwestie efektów wizualnych.
-
Finalizacja ekranu końca gry.
-
Refleksja nad wyzwaniami związanymi z rozwojem działającej gry.
-
Zakończenie i zaproszenie do subskrypcji.
Transcription
What you're looking at right now is the very first video game created entirely in Microsoft Word. There's no video magic here, everything you're seeing on your screen is running in real time completely in Microsoft Word alone, including a working score and health system. The only things that have been added in post are the sound effects because I felt like they added a nice touch. All of this is made possible by using Microsoft Add-ins. It's an openly available dev tool to create third-party add-ins for Microsoft Word using JavaScript. I first came across this tool about a week ago and to my knowledge no one else has created a game with it yet. I'll let me from the past take it from here and run you guys through my process fumbling my way to get to where I am now. So according to the documentation I just type yo office and we should get a robo dude who shows up allegedly. Oh yo, okay sick. Okay, run. Okay, let's take a look at what this actually looks like. This is a test. There we go. Nice. Oh, this is so sick. This is literally so powerful. You can do so much with JavaScript. Oh my gosh. We got to figure out some way to get this guy to move because it's not going to let me use CSS because you can't link it to your HTML. So we're going to have to figure something out. There we go. Nice. Okay, can we reference a table? Okay, can we put things inside the table dot body dot insert picture? Yes. What the hell is base 64? Base 64. Um, bunch of numbers. Is there a converter? Base 64 image converter. Yes. Yes. Yes, okay. Take him, put him in there, show me the code. This is really freaking long, man. This is a really long string. Yes, we finally got little buddy moving now. Okay, so he's just pretty much hopping from one cell to the next, deleting him from the last one, and it's working with keyboard input, which I wasn't sure if I was going to be able to do. Okay, we need to get some sort of like update method kind of thing working here that updates every frame so that I can like make the fruit actually fall. Set interval is looking like it's the way to go. That's not right. I need a cashew break. I'm mildly allergic to cashews. I did it. I finally got the frigging fruit to fall. I'm sick of looking at this background every time I'm going to make one real quick. It's not letting me put the background in because it wants to stack the table under it. Oh, big brain. I can set this as the watermark for the page. See if it works. Look at that. Frigging background. This is a real ass game. All right, bombs are going to be easy. Just copy this, paste, and we're done. Okay, not really, but close enough. We also have to add in lines where there's absolutely no point in having bombs. We're definitely close. I think I just need to add like some VFX almost. Kind of VFX. I was going to swap the bomb sprite with an explosion one and maybe swap the apple with like a plus one or something to show when you got a point. Yeah, I'm just going to have to add a dispose function or something because since it's not dropping, it's going to stay on the screen the whole time until we clear it. When we create the explosion, I'll just add it to the dispose array, and it should get rid of it after a couple frames. Okay, that actually looks so good. That adds so much more to the game than I thought it would. All right, that's game over screen working. I think that means I'm pretty sure I'm done with the game. Hell yeah. Honestly, there was a lot of stuff getting this game working that was a pain in the ass, but it's so cool that I actually have a functioning game in Microsoft Word now. Thank you so much for sticking around until the end. If you enjoyed it, please subscribe. If you liked the video, leave a like. If you didn't enjoy the video, dislike. If you'd like to join our community Discord server, the link is in the description below. Either way, I will catch you guys next time. See ya.