Discussion for Dynamic 3D with CSS and the DOM
Before you ask specific technical questions, please read or search through the existing comments, and any available documentation, to see if your question has already been answered.
You can also subscribe to this discussion (RSS 2.0)
-
RE: Dynamic 3D with CSS and the DOM
Posted by brandon richards on 2006-08-04 at 13:20:14 (GMT)
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
Posted by Ramon Bispo on 2006-08-04 at 14:20:19 (GMT)
Wow! Fantastic!
Great job!
-
RE: Dynamic 3D with CSS and the DOM
Posted by Jan Korbel on 2006-08-04 at 16:23:40 (GMT)
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
Posted by Dylan FM on 2006-08-04 at 16:59:06 (GMT)
Nice one mate, I made it to the end!
-
RE: Dynamic 3D with CSS and the DOM
Posted by coyr on 2006-08-04 at 21:21:22 (GMT)
Congratulations, It's amazing and incredible. U_U
-
RE: Dynamic 3D with CSS and the DOM
Posted by Bill Creswell on 2006-08-04 at 22:56:39 (GMT)
Just adding my congratulations - that is very interesting. Quick too.
-
RE: Dynamic 3D with CSS and the DOM
Posted by Emil Stenström on 2006-08-05 at 09:43:39 (GMT)
Damn man! Now we're just waiting for the interactive version. Will the monsters be anchors? ;)
-
RE: Dynamic 3D with CSS and the DOM
Posted by Dean Edwards on 2006-08-05 at 17:18:13 (GMT)
Superb!
-
RE: Dynamic 3D with CSS and the DOM
Posted by Alan Vitor on 2006-08-07 at 12:46:15 (GMT)
Awesome!
-
RE: Dynamic 3D with CSS and the DOM
Posted by brothercake on 2006-08-07 at 14:47:54 (GMT)
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
-
RE: Dynamic 3D with CSS and the DOM
Posted by Joel on 2006-08-07 at 16:25:54 (GMT)
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
Posted by Paul Mellors on 2006-08-08 at 11:27:32 (GMT)
Brilliant idea
until you go to a browser with javeacript disabled. -
Keyboard input
Posted by Johan Sundström on 2006-08-08 at 13:10:41 (GMT)
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
Posted by poni on 2006-08-09 at 10:45:50 (GMT)
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
Posted by Mac on 2006-08-09 at 23:23:53 (GMT)
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
Posted by anon on 2006-08-09 at 23:41:25 (GMT)
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
Posted by Leland Scott on 2006-08-10 at 01:20:08 (GMT)
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
Posted by Mark on 2006-08-11 at 09:10:00 (GMT)
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
Posted by brothercake on 2006-08-11 at 23:11:19 (GMT)
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
Posted by Matt on 2006-08-14 at 21:05:21 (GMT)
This is pretty cool, and it's relatively fast for javascript.
-
RE: Dynamic 3D with CSS and the DOM
Posted by Greg Buchholz on 2006-08-14 at 22:29:50 (GMT)
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
Posted by brothercake on 2006-08-15 at 03:59:16 (GMT)
You might also enjoy ...
Fantastic
Great stuff. -
RE: Dynamic 3D with CSS and the DOM
Posted by Pewterfish on 2006-08-16 at 09:02:00 (GMT)
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
Posted by Bolzamo on 2006-08-17 at 13:22:38 (GMT)
Rulezzzz!!!
Good job man! We waiting release of online game based on CSS & JavaScript. -
RE: Dynamic 3D with CSS and the DOM
Posted by Philip Taylor on 2006-08-22 at 14:21:34 (GMT)
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
Posted by brothercake on 2006-09-05 at 01:08:59 (GMT)
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
Posted by Mac on 2006-09-30 at 22:51:23 (GMT)
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.
This discussion is now closed
Discussions are usually kept open until they start getting spammed,
which in practice seems to be about 2-3 weeks
