Game Inside a Web Browser

As I first started getting into modern personal computers back in 2000s I first learned HTML. I eventually learned also some CSS. I didn’t learn JavaScript or PHP back then and it seemed like a tough deal for me. I didn’t get into “real” programming in years. It was 2010 when I coded my first tiny applications with Java.

Java is hard to combine with HTML and CSS but learning to code with it helped me to get into JavaScript and also actually PHP later. During my studies I also learned something about MySQL and about databases in general. JavaScript is a versatile language. It can be used in backend (Node.js) or frontend (for example React. You can also use plain JavaScript for frontend).

I actually wasn’t able to combine as effectively as possible my studies and my experiences with HTML and CSS in 2000s. But now it’s 2022 and I can’t help to still be curious about how these things called web browsers handle themselves (or actually, how do they work).

I have been reading a lot about different techniques of how to produce a web application. I don’t have currently a project that I could showcase in job application. I am still learning. I want to learn as much as possible and go through in my mind all this theory that there is. Working with solving different end users problems also helps me to achieve this. It can in best case bring some new knowledge for me. It definitely helps me to develop myself.

But how do things really work inside the browser? Basically you have ways to display shapes that have different colors, texts and images. You can read in the users input from a keyboard or a gamepad. You can ahve commands and buttons that make the user to interact. The possibilities are almost limitless. You can even bring 3D graphics to your web browser.

What can you do, if you find these sorts of things interesting? I would say that building website or two will help you to get started. Don’t set your goal too high. I for example have come up with several different prototypes of games and some of them have been based on JavaScript and HTML and CSS. Start with something small and keep building. It might help if you team up with some talents that can help you with the game, like for example a 3d modeler or a musician.

I would have started to write a paragraph about techniques that you can use when developing a game to be played in a web browser but I think I have already introduced all of them. Having a game inside a browser enables you to play and deliver the game for many platforms. Is there a device, that cannot run a website on it? I think there actually isn’t.

You have so many ways to start building your game that runs on for example Firefox. This might not be your future profession but it sure is a nice hobby. I am saying this because I’ve myself had a ahrd time in trying to be employed as a Full Stack Developer. The competition is tough. But start with HTML, CSS and maybe even JavaScript, and soon you will understand how these things work.

Developing Own Game Using HTML Elements

Let’s go back some years. Actually let’s go back 20 years. In the beginning of 2000s our family bought another electronic device. This time it was a brand new computer. The processor was 400 Mhz. It barely ran some games like Diablo II, Hitman, Tony Hawk’s Pro Skater 2 and Colin McRae Rally 2.0.

This was a time when HTML was the most popular way to make websites. And websites were definitely more simple than they are today. You could even use some WYSIWYG editor like FrontPage or Dreamweaver. The scene was very different than it is today. Internet was accessed mainly with personal computers screens instead of mobile devices and tablets. CSS was already available but JavaScript was a bit different than it is today. If you had will and skill you could learn something like PHP programming or you could even get into databases.

So this was a time for me to get to know how a web browser basically works. I didn’t get so deep in this topic back then. But I did design some websites. You could say that making websites was my hobby. It took me ten more years to actually apply to study programming. I have been interested in computers for a long time of period. And finally I ended up also working in this field.

If you know some HTML you understand that there are elements, like headers, paragraphs and images. You can interact with the system by clicking links and hovering the mouse cursor over some element. All this is done as you run a website on your web browser. HTML displays the structure of the site, CSS styles, sets the colors of fonts and backgrounds of div elements, and JavaScript handles events and manipulation of the elements presented. All this is done inside the web browser.

There are different web browsers available. Today, they don’t differ form each other that much. Back in the day there were wars between browsers. You had Internet Explorer that understood JavaScript in it’s own way. You had to produce code that could be handled in every browser that existed.

This text is nothing like a tutorial in game development. I decided to write this blog post to give you an idea about how you can approach this topic. You don’t necessarily have to start learning something heavy like C programming or OpenGL. You can start with something like HTML. Some might say that it isn’t a real programming language. And actually it really isn’t. It still provides you some ways to create something that can be used when developing a real game.

You can even use a database in your design. You can also use a JavaScript framework like React or Vue or something like that. Making a website is easy and fun. You can make your website to be a game. If  you don’t think that you would want to make a game that can be run in a web browser you can also find tools for converting your game to a desktop application. Only the sky is a limit in this matter.

Different Platforms For Releasing Games

You might have thought about releasing your own game or you might just be curious about what platforms can be used for playing games. This is interesting for me as a programmer so in this blog post I am going to open up a bit these different ways you can today play and even design games.

I have been making websites as a hobby for very long time. I started back in the 90s. To be precise it was the end of 90s. Back then we didn’t have any mobile devices at all. Bluetooth wasn’t where it is today. I think there even wasn’t this thing we call USB standard. So if you had a PC you had to plug in your gaming pad some other way. I don’t recall what that way was. Basically if you wanted to play with game controller you would be preferring PlayStation over PC.

But what I was saying is that one platform that you can make games on is the web browser. You can develop your game with only HTML, CSS and JavaScript. If you make a game this way it is very easy to release it. You just have to upload your game to a web host. There are places on internet that actually sell these games also. So this is one way to make a game.

You might want to go mobile. This means you have to learn Java and after you have mastered it you must learn software development in Android (or iOS and ´the programming language that is used with it). I have tried my hand at Android development. I found it to be very hard. So I gave up on this idea. But this isn’t what you should do. If you have an interest there’s nothing that can stop you from downloading the appropriate IDE (Integrated Development Environment) and start working on it.

One way to release a game is on some gaming console. This is a bit harder since manufacturers of gaming consoles tend to have a sense of control over what kinds of games are being released on their systems. Sometimes you even need a specific development kit for the desired console. So this is a hard way for an independent software developer. It can also cost a lot of money. This way includes also handheld consoles like Nintendo Switch Lite. You might notice that Nintendo is going in it’s own direction as it doesn’t really care so much about mobile gaming.

You can also release a game for an old gaming console. You probably don’t have an appropriate development kit but I can assure you that there are lots of software tools for accomplishing this. So you actually can make a game that is playable through emulator. You can use emulators to play old games on a wide variety of devices that include smart phones, computers like Raspberry Pi and personal computers. There are emulators for playing games of for example Commodore 64, NES, SNES, Master System, Mega Drive, MS-DOS, PlayStation 1 & 2, Dreamcast, GameCube, Wii and many others.

There are also many operating systems that games for PC can be released on. There is Windows, right now it is Windows 10, and many versions of Linux (like Ubuntu). There are also Linux distributions that are dedicated to retro and emulator gaming. I can name some of them. There is Lakka OS, RetroPie and Recalbox just to name some of them.

If you don’t want to release your game for free there are many online software stores that can be used to sell your game. There is Steam and GOG which are big names that have numerous amounts of games available. There are also lots of other options that you can find using your favorite search engine.

I didn’t go to what tools you can use for developing your own game. This might be a good time to have a break. I will come back with another post for you very soon. It would be a good idea to present for you some tools that can be used for developing a game for Android, Windows, Linux or for web browsers. This would be interesting wouldn’t it?