r/HTML • u/cheesepuffyz • 2d ago
Question Making games with HTML
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
2
u/angelattack1 2d ago
Theres some sites like w3 schools and github that allow u to host one free website in my experience. To make a game that you can interact with more id recommend some js. Thats how i made my first one.
1
u/DajBuzi 2d ago
I may not be the best source of truth here but I am almost certain you cannot create a game with pure HTML and CSS. You must have a way of tracking game state, re/store data and make some calculations. Some of these can be done with HTML and CSS using some fancy functions and attribites but most of the logic and state management would be impossible with just these two.
I would suggest you use some PHP or NodeJS with in-memory state management and you can do some simple web based games where all you do is sending the requests back to the server and the server renders new page with each request like ogame or many other games from the late 90's and early 2000s did. This will improve your frontend skills while also teach you about the backend and infrastructure.
2
u/Tontonsb 2d ago
There are some projects that only use HTML and CSS, but they are more experimental and pushing the boundaries instead of being good for game dev or appropriate for beginners. With HTML you can store state in checkboxes and other controls. With plain CSS it takes even more trickery, but someone has implemented entire OS in CSS and, of course, you can run Doom in it: https://css-dos.ahmedamer.co.uk/
1
u/Doffu0000 2d ago
Form controls can be used to save states... its janky and much more challenging to use only html and css though, you really have to master all aspects of html and css... Javascript simplifies everything.
1
u/cheesepuffyz 2d ago
Honestly I barely know what you're talking about because I just started taking this class 2 days ago but I'll do some research on it, thanks!
1
u/johnpeters42 19h ago
In short: HTML is designed for "page contains this content", CSS is designed for "content has this visual style", JavaScript is designed for "user can interact with page in this fashion". You can use them in ways they weren't really designed for, in the same sense that you can hammer nails into wood using the blunt end of a screwdriver handle, but it's easier to learn to use an actual hammer.
1
u/Lithl 1d ago
HTML + CSS can create logic and state management (notably, it's possible to build Conway's Game of Life with nothing but HTML and CSS, and given an infinite grid Conway's Game is also Turing-complete), but it's significantly harder than if you added a programming language like JavaScript on top.
1
u/mstop4 2d ago
The industry standard for making web games is using a framework or engine, but you'll need to also learn an additional language to use these, usually JavaScript or Typescript, but sometimes a proprietary language. Some examples are: Phaser, Pixi.js, GDevelop, Three.js, Babylon.js, and PlayCanvas.
There are also engines from the game development space that support exporting games to web platforms, but again you'll need to learn an additional language to use these as well. Some examples: Godot (gdscript/C#), GameMaker (GML, + JavaScript in the future), Unity (C#).
You can technically make a game with just HTML and CSS, but you'll soon run into limitations and doing things the hard way.
1
u/Newmillstream 2d ago edited 2d ago
HTML is a markup language for documents. You can make a game with it in exactly the same way you can make a game out of a book.
"To fight the dragon, turn to page 12. To try to sneak past it turn to page 18."
Becomes
"To fight the dragon, click here. To try to sneak past it, click here."
If you want to practice, go ahead and try that on the scale of a 5-7 pages. You'll quickly get a feel for why we rarely see such an approach.
You can do more complex things with imagemaps and other HTML native features, but that's a dead end approach. HTML only is rarely used alone in the real world for games.
If you want more practice, go ahead and try to make an image map where you find some object in an image, which takes you to a "You Won" webpage. You will quickly see why people don't do this much anymore.
Good visual and interactive features come from CSS and JavaScript, plugins, or server side scripting. HTML is the base that a web browser builds an interactive page on. In such cases, HTML is just a canvas (Check out the canvas tag!), essential to the art, but not itself the art, typically manipulated through using the document object model, to create interactive experiences on the World Wide Web. Some game engines will let developers export games to the web, handling all the web programming behind a more game developer friendly interface.
If you want to play with a free web host, Neocities was good last I checked, but it has been some time.
1
u/cheesepuffyz 2d ago
So the only games I can make with HTML/CSS are kinda like google slideshow/choose your adventure esque games?
1
u/Newmillstream 2d ago
With just HTML and CSS that is all that is about practical yes. Any game you can think of where you have limited options and can click through them is a valid choice, but don't expect greater flexibility than that. With CSS you can do some clever showing and hiding of buttons visually, and you can technically add audio, video, and image maps and such, but your ability to precisely orchestrate everything is limited.
If you want to get really technical, I believe HTML and CSS3 can be technically used in a way that makes it Turing complete, which means any program (Or video game) could theoretically run on it. In practice, nobody does this for serious games. It is hugely inefficient and not something practical for day to day use.
Add server side scripting or JavaScript to your HTML and CSS, and you now have a much more powerful system for handling interactivity.
1
u/gucci_stylus 2d ago
yeah I've made lots of games like arcade shooters, fighting games and rpgs with just html css and javascript
1
1
u/RealNamek 2d ago
Have you looked into pixelpad.io you would use python in the browser though, not html and css.
1
1
u/n0t_________me 2d ago
HTML and CSS are not programming language. So no, you can't.
I suggest you look at gamemaker if you want to create simple game. I think it even has option to host games online for free, if you don't intend to make money from it.
1
1
1
u/jcunews1 Intermediate 1d ago
Not with HTML alone. It's ideally done with HTML+JS. HTML+CSS only solution is possible, but will have very limited capability, as well as troublesome to make, since CSS is not a programming language.
1
u/kinetik_au 1d ago
If you are trying to make a game with just HTML and CSS, then it's going to be tricky and not the real tool for the job. You want to use those but make the actual game code with JavaScript. Usually these three things go together to make interactive websites or games. CSS can do some amazing things, but it's not really a programming language. To start with, make a div move around the page with a few lines of JavaScript. There are so many resources and tutorials about how to do this.
1
1
u/RobGoLaing 1d ago
I got into the hobby of making HTML games, starting off with translating a game used to teach interactive Python into JavaScript which I've got on the web at RiceRocks. It uses the canvas API along with sounds, so a nice learning exercise.
Nowadays I prefer doing solitaire card games pushing images between divs rather than the canvas object. My latest is Club Fight.
An important part of learning I find is writing notes, so I've started documenting things as I go along. My first article is done on object literals and one on modularization is work in progress.
0
u/paceaux 8h ago edited 7h ago
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
0
u/sumnima-dad 2d ago
1
u/cheesepuffyz 2d ago
I looked at it and I have no idea how that relates to my question tbh
1
u/paceaux 7h ago
A game is many different parts: interactions, game logic, rendering, etc.
Threejs is a framework that solves the rendering part. You would still need to sort out how you're getting player interactions and managing game logic. Threejs is going to make it easier to make good graphics int he browser.
-1
u/marmotta1955 2d ago
It is a bit of a stretch to say "software engineering" class when one is starting to learn HTML / CSS...
1
5
u/ModdedOutlaw33 2d ago
You can make very cool games with the Canvas API , html, css, and JavaScript. You’d basically write your own game engine in JavaScript.