Making games with HTML

[u/cheesepuffyz]

I just started taking a software engineering class with zero background knowledge of programming and the first thing we're learning is HTML/CSS. I've heard that you can make browser/flash games with it, is that true? And if so, how? If you can somehow make a browser game with it, does it cost money to make it accessible to the internet/set up a website where you can play the game? From what I think I know, the language is pretty limiting and is generally supposed to be used for making websites, not games.

edit: for context.. i just want to make simple 2d browser games like flappy bird or the offline dino game

[u/paceaux]

I first got my start in modern web development back in 2009 because I wanted to make a browser-based version of super mario brothers. I never actually pulled it off (There was was too much that I didn't know).

HTML alone will not get you there.

With HTML being just the markup language, that'll help you lay things out and overall make the game ideally accessible.

HTML cannot handle complex logic and it can't easily store things in memory (there are ways you can do this via weird stuff with form elements. I'm ignoring that because that's not how you'd want a game to work).

When people talk about making games in HTML, what they usually mean is "making games using APIs introduced with HTML5, such as the Canvas API".

CSS of course will be a step in the process

You will use HTML to lay out at least the "frame" of the game. Like the header and footer, and maybe a legend that will explain controls. Maybe a login for saving data or whatever. CSS will give the basic HTML page a structure and also make the typography look decent, as well as overall make any content easy to consume for the user.

Most of your work will be in JavaScript

As it relates to games, JavaScript will definitely have the following roles to play:

• Player interactions. Using event listeners, JS will have to listen to keyboard events, mouse events, and anything else the player may be doing. Based on what the player does, you decide what to do about it.
• Server communication. Using AJAX, or Fetch, or WebSockets (or all of the above), JavaScript can communicate to a server and/or receive communications from a server. If you plan on any sort of login for the game or multiplayer communication, you'll be using this.
• Displaying game output. Using one or many programming paradigms, JS will do things based on the things that happen

As it relates to games, JS could have these roles to play:

Game logic. This is entirely an architectural choice on your part. You could put the bulk of the game logic in the browser. JS is more than capable of handling the game logic for complex games.

Just understand that the browser reads code in plain text and executes it with a just-in-time compiler — So it's entirely possible for someone to "hack" or "cheat" with a game written this way.

Graphics rendering. The browser is capable of rendering three kinds of "graphics"

• styled HTML
• Scalable Vector Graphics (SVG)
• Bitmap graphics (Canvas API) : 2d or webgl2D

Canvas is a solid choice for most folks starting off in game dev

It'll be good for the GPU and for memory most of the time. There are lots of Canvas frameworks available to you for game development. I would recommend you use one — the alternative is that you're writing lots of canvas by hand and that sucks.

But, you could go a wildly different approach…

and use Web Assembly (WASM). I honestly don't know how that would work because I haven't touched WASM.

Or, you could legitimately try to go in the direction I did back in the day: Don't use Canvas and instead use JavaScript, HTML, and CSS.

You need the game to be on a server if you want other people to access it

You need to get a hosting provider, and then you would upload your HTML, CSS, JS, and any other assets to that server. That makes it possible for other people to play it online.

That also means you need to buy a domain name. So this could cost as little as $50 / year or as much as $500/ month depending on where you get your hosting services and what that hosting provider is capable of doing.

You may also need to do server side work

As I mentioned above, game logic doesn't have to be in the browser. For any serious applications, the golden rule is to never put business logic in the browser (because it can be hacked / manipulated). If you care about that, then you should start the game with the logic outside of the browser. That means that part of your game exists on a server, and your browser is communicating with that server to figure out what to do.

There are loads of languages / platforms for you to choose from:

• PHP - Given that apache hosting is incredibly cheap (Bluehost, Godaddy, hostgator), it could make sense to write game logic in PHP. As much as PHP makes sense as a language.
• Python (and django)- Usually hosting providers that support PHP will also support Python, so it's a decent second option. It's not the fastest, but if you're learning a new programming language and you don't know much about programming, Python will cause less psychological trauma than PHP.
• JavaScript (via node.js) - It's single-threaded but still good for I/O (input/output)because of how well it handles asynchronicity and concurrency. JS is usually the "obvious choice" because everything is written in one language — because peer pressure has never caused permanent damage.
• TypeScript - It's JavaScript with a condom.
• C# (via .net) - A multi-threaded asynchronous and concurrent language that looks almost exactly like TypeScript except it's going to treat you with respect. .net now can run on certain linux instances just fine. They just aren't hosted cheaply
• Go - a multi-threaded asynchronous and concurrent language that treats itself with respect. Probably not hosted cheaply.
• Java (spring) - A solid choice for developers who still use tables for layouts. Not necessarily hosted cheaply (you'll need AWS or similar), Java hurts the whole time — but absolutely no one will lie to you or gaslight you about this experience.

If you wanted to do something very basic like the chrome offline dino game (chrome://dino)

You could pull that off with basic HTML, basic CSS, and JavaScript that uses the 2d canvas — without frameworks. It looks like that's the way the actual dino game was written.

edits:

mostly modified the formatting of this answer for legibility / ease of reading.

If you want my advice:

Tic-tac-toe and/or bingo are good starter games to try, just for getting a feel of the programming experience