Discuss: Dynamic 3D with CSS and the DOM

RE: Dynamic 3D with CSS and the DOM

brandon richards — 2006-08-04T13:20:14+00:00

This is the coolest thing ive seen in awhile. What'd be incredible is to create some of the old-school dungeon games like Zork, with an entire game engine etc.

RE: Dynamic 3D with CSS and the DOM

Ramon Bispo — 2006-08-04T14:20:19+00:00

Wow! Fantastic!

Great job!

RE: Dynamic 3D with CSS and the DOM

Jan Korbel — 2006-08-04T16:23:40+00:00

Man, oh man... this is unbelievable.
How long now for doom in javascript and CSS?
Only question is why....
But still... it may come in handy somewhere.
This is pushing the boundaries for real.

Thank you

RE: Dynamic 3D with CSS and the DOM

Dylan FM — 2006-08-04T16:59:06+00:00

Nice one mate, I made it to the end!

RE: Dynamic 3D with CSS and the DOM

coyr — 2006-08-04T21:21:22+00:00

Congratulations, It's amazing and incredible. U_U

RE: Dynamic 3D with CSS and the DOM

Bill Creswell — 2006-08-04T22:56:39+00:00

Just adding my congratulations - that is very interesting. Quick too.

RE: Dynamic 3D with CSS and the DOM

Emil Stenström — 2006-08-05T09:43:39+00:00

Damn man! Now we're just waiting for the interactive version. Will the monsters be anchors? ;)

RE: Dynamic 3D with CSS and the DOM

Dean Edwards — 2006-08-05T17:18:13+00:00

Superb!

RE: Dynamic 3D with CSS and the DOM

Alan Vitor — 2006-08-07T12:46:15+00:00

Awesome!

RE: Dynamic 3D with CSS and the DOM

brothercake — 2006-08-07T14:47:54+00:00

Excellent, I'm glad you're enojying it :) It would indeed be fantastic to extend this into a full game, and there are all kinds of possbilities, though the most difficult thing I can see would be adding combat.

I mean fundamentally all it would take is an image of a character drawn at 8 different distances, so it can be viewed at any point in the corridor, but then to extend that with an online environment that's time-accurate enough to allow for realtime combat ... it could be tricky. It might be that turn-based combat is more appropriate .. not really sure :)

As to the question why ... well, because it's there :D

RE: Dynamic 3D with CSS and the DOM

Joel — 2006-08-07T16:25:54+00:00

Turn based combat upon confrontation certainly could be done. Realtime movement otherwise - choppy as that would be. When monsters move towards you it could be done to look like ghost girl in "The Ring"... Could actually be quite creepy. Really cool stuff. With some embedded flash we could really start blurring the line between desktop apps and web apps.

RE: Dynamic 3D with CSS and the DOM

Paul Mellors — 2006-08-08T11:27:32+00:00

Brilliant idea :) until you go to a browser with javeacript disabled.

Keyboard input

Johan Sundström — 2006-08-08T13:10:41+00:00

It could use some Dungeon Master style keyboard controls. I took the liberty of making a Greasemonkey script to attach them at http://userscripts.org/scripts/show/5049 :-)

flame

poni — 2006-08-09T10:45:50+00:00

useless waste of time, no application whatsoever � slow, ugly � and no point to prove

ever heard of canvas?

RE: Dynamic 3D with CSS and the DOM

Mac — 2006-08-09T23:23:53+00:00

Who disables JavaScript these days? If you're afraid of getting some viruses, use an efficient anti-virus software.

RE: Dynamic 3D with CSS and the DOM

anon — 2006-08-09T23:41:25+00:00

absolutely gorgeous. not only does it bring me back to all my favorite dungeon crawl games, but it really is just a great implementation with web technologies.

simply, you ROCK

RE: Dynamic 3D with CSS and the DOM

Leland Scott — 2006-08-10T01:20:08+00:00

Um, what makes you think this only works in Firefox and Opera? Guess you don't have a Mac, mate. It works great in Safari as well as WebKit, the nightly build of Safari for Mac OS X. Just thought you might want to let visitors know.

RE: Dynamic 3D with CSS and the DOM

Mark — 2006-08-11T09:10:00+00:00

You know what I'm thinking?

Wizardry.

A web-based "exact" replica of the old Apple ][ game, except multiplayer.

RE: Dynamic 3D with CSS and the DOM

brothercake — 2006-08-11T23:11:19+00:00

until you go to a browser with javeacript disabled.

People do disable javascript, and that's fair enough, but this is not intended as an all-user public-ready application. It's a javascript game, which by its very nature has its own restrictions - you can't have a JS game without JS.

and no point to prove

Quite right, no point to prove. I did it just because I wanted to. I'm sorry you can't appreciate that.

Um, what makes you think this only works in Firefox and Opera? Guess you don't have a Mac, mate

I do have a Mac (3 of them in fact :)), but I considered it too flaky to call it "working": it does work, but the rendering is pretty slow to update, and his is something that needs attention - the general speed and rendering overhead of it. So I thought it would be better to say that it's Firefox and Opera only, because those are the ones it definitely works okay in, they're the best to demo it in. In fact it probably works in IE7 as well, but probably not very well.

It could use some Dungeon Master style keyboard controls

What's that script doing then - it routes particular keypresses to the movement actions?

RE: Dynamic 3D with CSS and the DOM

Matt — 2006-08-14T21:05:21+00:00

This is pretty cool, and it's relatively fast for javascript.

RE: Dynamic 3D with CSS and the DOM

Greg Buchholz — 2006-08-14T22:29:50+00:00

You might also enjoy a Wolfenstein3D clone...

http://www.wolf5k.com/

...or just graphics with CSS...

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

...and fractals in JavaScript...

http://sleepingsquirrel.org/mandel.html

RE: Dynamic 3D with CSS and the DOM

brothercake — 2006-08-15T03:59:16+00:00

RE: Dynamic 3D with CSS and the DOM

Pewterfish — 2006-08-16T09:02:00+00:00

That's pretty damn spanky. Takes me back to the days of 'Embassy Assault' on the ZX Spectrum (tell me someone else played that...?).

I'm gonna be forced to have a tinker with this code later.

RE: Dynamic 3D with CSS and the DOM

Bolzamo — 2006-08-17T13:22:38+00:00

Rulezzzz!!!
Good job man! We waiting release of online game based on CSS & JavaScript.

RE: Dynamic 3D with CSS and the DOM

Philip Taylor — 2006-08-22T14:21:34+00:00

That's a rather neat trick! :)
If you don't mind being limited to Firefox/Opera/Safari, there's probably more scope for improvement in the canvas tag instead of CSS (but still using pure HTML and JS) - http://www.abrahamjoffe.com.au/ben/canvascape/ was the original one, and http://canvex.lazyilluminati.com/ is a new version that I made recently. That makes it fairly easy to do textures and full rotation (not limited to right angles) - I'd imagine both of those would be possible in this CSS method after some fairly substantial effort, but I wouldn't expect particularly good framerates out of it... Still, it's great to see new ways of doing this stuff :)

RE: Dynamic 3D with CSS and the DOM

brothercake — 2006-09-05T01:08:59+00:00

Phew! I don't know how well JS could handle the amount of animation involved in that! SVG is clearly the better tool for that kind of job, I reckon!

But the main reason I favoured a JS/CSS approach with static views, is that it's easy to transcode into text descriptions, making the game more accessible to users who can't see, or can't see well, as well as providing additional information to users with learning or cognitive disabilities.

Single views could be programatically described quite easily, but fluid movement is much more difficult to describe, since the scene is constantly shifting.

Or maybe I'm thinking about it the wrong way! Either way, what's important to me is to try and experiment in the area of accessible games - games which work irrespective of modality :)

RE: Dynamic 3D with CSS and the DOM

Mac — 2006-09-30T22:51:23+00:00

Wow! Talk about bringing back some memories... I had done this very thing on my old Atari ST using gfaBasic. I can relate to *all* your headaches. Computing a decent prespective, determining coordinates, shading; it got complicated real quick. But it was fun! I might just drag out my old notes, look at your implementation, and see if we can bring some of it back to life.