Is it possible to make a game in the browser using plain HTML?

Question

Is it possible to make a game in the browser based on divs, <imgs>, HTML5, CSS3, and good ole' jQuery? According to this guy, browser rendering speed is pretty good these days, which is the only reason I'm even considering this option. Is his answer applicable to creating a game in vanilla HTML?

When I said vanilla HTML I meant just plain HTML as opposed to ` — Elliot Bonneville, Mar 22 '12 at 17:18

score 1 · Answer 1 · answered Mar 22 '12 at 17:01

1

Yes. Theres an HTML5 Angry Birds, Cut the Rope, even Pac-man.

answered Mar 22 '12 at 17:01

Daniel A. White

187,200
47
362
445

What are my limits? E.g. what's the max amount of divs I can have on the screen without affecting performance? – Elliot Bonneville Mar 22 '12 at 17:02
2

it all depends on the browser and the hardware you are running on. – Daniel A. White Mar 22 '12 at 17:03
2

Those tend to use HTML5 canvas, not divs and images. – Chris Sobolewski Mar 22 '12 at 17:05
he said html5 so `canvas` is applicable. – Daniel A. White Mar 22 '12 at 17:06
Nope, no ` – Elliot Bonneville Mar 22 '12 at 17:18

Tim M. · Accepted Answer · 2012-03-22T17:56:55.697

1

Yes. DHTML games have been around for over a decade and HTML 5 provides fairly advanced rendering via the CANVAS. Check out Microsoft's rendering examples for the IE engine to see the type of performance you can expect (some things perform better than others--most are very impressive).

Check out this little HTML 5 MMO project and Illyriad (which claims to be HTML 5 based).

Is it possible to write a game without the CANVAS element? Visually, you will be limited but logic can still be sophisticated. A game engine should be based on high-performance structures, not on DOM elements. For example, if you were calculating collision on a 2D field, you might evaluate a matrix and redraw only the impacted elements. You should not evaluate the position of DOM elements, as this will be very slow.

edited Mar 22 '12 at 17:56

answered Mar 22 '12 at 17:03

Tim M.

53,671
14
120
163

Thanks for the helpful links! I'll give my idea(s) a shot, then. I've actually been doing some testing on my own, and it seems pretty decent. I've actually got ~3150 `p` elements on a page with frequently changing CSS attribues (a tile map, if you must know). It performs perfectly! – Elliot Bonneville Mar 22 '12 at 17:55
@ElliotBonneville - 3000 elements isn't that many and modern browser engines are incredibly smart. As long as you aren't constantly iterating through all the elements it should perform fine (see my edit about using simple structures to perform calculations). – Tim M. Mar 22 '12 at 18:04
This is cool. :) Thanks for the information. Can I ask what you mean by 'evaluate a matrix'? A few links or something would be fine. – Elliot Bonneville Mar 22 '12 at 18:08
Take the old Super Mario games for example. You can represent the position of the character, the ground, enemies, ladders, etc. with a 2 dimensional JavaScript array (a matrix). When you need to perform a calculation (e.g. did the player just run into an enemy?) you examine the matrix to see where each element is. Once you have a result, you can update just the impacted DOM elements. This will be much faster than looping through all the DOM elements and asking them for their position. – Tim M. Mar 22 '12 at 18:23
There are many posts on 2D arrays on this site (starting with http://stackoverflow.com/questions/966225/how-to-create-a-two-dimensional-array-in-javascript) – Tim M. Mar 22 '12 at 18:23
Ah, okay, thanks. Yeah, that's what I would do, I just didn't understand your terminology. I'd never heard that 2D array = matrix, although I suppose that's pretty obvious in hindsight. =) – Elliot Bonneville Mar 22 '12 at 18:26

score 1 · Answer 3 · answered Mar 22 '12 at 17:12

1

I am not totally clear what you mean by "Plain HTML" since you also mention HTML5. If you just mean what can you create in a browser without plug-ins then I would take a look at come of the work being done in Canvas and SVG. The example that really changed my idea of what is possible is a demo of the CAKE library which you can view here. Sadly it is beyond IE8 (not sure about IE9 and I can't test it from where I am) but it runs well on an iPad which amazed me.

answered Mar 22 '12 at 17:12

Matthew Nichols

4,866
4
41
48

By plain HTML, I meant specifically the DOM as opposed to SVG libraries, the ` – Elliot Bonneville Mar 22 '12 at 17:27
OK great. Never the less the demo is worth a look as an example of what is becoming possible. – Matthew Nichols Mar 22 '12 at 18:57
Agreed, it's really amazing stuff. +1 – Elliot Bonneville Mar 22 '12 at 19:01

score 1 · Answer 4 · answered Mar 22 '12 at 17:20

Strickly using the DOM is possible, but improbable. I actually wanted to do this, so i was thinking of using the jQuery UI javascript to move items around and perform collision detection, ect... It would be pretty neet to see a game using strickly dom elements and javascript.

If you have ever played any of those moving the blocks to solve a puzzle game (i do not know what they are called, but i bet its something like "Blocked In") would be very possible with strictly Div elements and Javascript and i would applaud you for such maneuvers.

score 0 · Answer 5 · answered Mar 22 '12 at 17:02

0

Is it possible to make a game in the browser using plain HTML?

Yes, but it's relatively limited; you wont be making World of Warcraft with complex 3D worlds, audio, and animations without a serious performance hit.

answered Mar 22 '12 at 17:02

zzzzBov

174,988
54
320
367

Well I know *that*. I wasn't even planning on making an MMORPG. I'm guessing you noticed I was fifteen. *sigh* – Elliot Bonneville Mar 22 '12 at 17:04
There are webgl js libraries like three.js that would allow you to make something like this: http://triggerrally.com/. Just don't try it in IE :) – PhillipKregg Mar 22 '12 at 17:07

score 0 · Answer 6 · edited May 23 '17 at 10:30

0

Yes and no.

Most games like Angry Birds, Fieldrunners etc, use what is called "HTML5" when they use the canvas new tag.

Using the DOM to make a game is impossible (unless you're writing pong, and still...). The DOM is way too slow.

A canvas is an element you can manipulate to draw on a bitmap. In javascript.

You should read this answer to understand the choice of API ot use depending on your use case (DOM vs Canvas vs SVG).

edited May 23 '17 at 10:30

Community

1
1

answered Mar 22 '12 at 17:08

Florian Margaine

58,730
15
91
116

I understand the differences between the DOM and ` – Elliot Bonneville Mar 22 '12 at 17:19

Is it possible to make a game in the browser using plain HTML?

6 Answers6