Creating a Game in JavaScript in... Microsoft Word (film, 4 minutes)
In his latest video, SethEric introduces a groundbreaking project: the very first video game created entirely in Microsoft Word. Remarkably, everything on screen operates in real-time without any video trickery. The only additional elements included are sound effects that enhance the gameplay experience, while the core mechanics rely on JavaScript and Microsoft Add-ins, an open developer tool for creating third-party extensions in Microsoft Word.
SethEric details his journey through the game development process, starting with the input command 'yo office', which triggers the appearance of a robot in the document. He demonstrates how he brought the character to life using JavaScript and how he cleverly utilized tables to enable movement within the game. Despite the limitations of Microsoft Word, he managed to create a playable product complete with a working score and health system, showcasing the potential of unconventional tools for game development.
The video outlines the various challenges he faced while programming the game. SethEric navigated not only character movement but also the mechanics of falling fruits and bombs. With each new hurdle, he found innovative solutions. For example, he implemented an update method that runs every frame, enabling the fruits to fall accurately within the game environment.
Later in the video, SethEric focuses on enhancing the visual details, including improving special effects. He swaps out sprites for more engaging graphics and designs the 'game over' screen. This intricate process proved to be time-consuming yet rewarding. He successfully completed the project, illustrating that creativity and programming skills can yield impressive results even in tools not typically associated with gaming.
At the time of writing this article, the video has garnered 21,957 views and 853 likes, indicating that the online community has warmly received this unique project. SethEric encourages viewers to subscribe to the channel and join the Discord server for collaboration and idea-sharing, ensuring that this captivating video inspires many fellow programming enthusiasts to explore Microsoft Word in a new and creative way.
Toggle timeline summary
-
Introduction to the first video game made in Microsoft Word.
-
Explanation of how the game runs in real time without video editing.
-
Game features a working score and health system.
-
Introduction to Microsoft Add-ins as a tool for creating the game.
-
Transitioning to past self to explain the game development process.
-
Initial interaction with a character in the game.
-
Challenges faced with moving game elements and JavaScript limitations.
-
Achievement of creating mobile game character with keyboard input.
-
Introducing falling fruit mechanics into the game.
-
Development of bomb mechanics, including VFX considerations.
-
Finalization of a game over screen.
-
Reflection on the challenges of developing a functioning game.
-
Closing remarks and invitation to subscribe.
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.