Hacker News new | ask | show | jobs
by e1ven 6155 days ago
The CANVAS tag allows per pixel placement. It's what makes things like this possible.

From the Source-

This file is part of the article series by Jacob Seidelin about creating a ray casting engine with JavaScript, DOM and Canvas.

If you have questions or comments, please contact the author at either jseidelin@nihilogic.dk or http://blog.nihilogic.dk/

The code samples here are freely available under the MIT license. See: [http://www.nihilogic.dk/licenses/mit-license.txt]

The graphics for sprites and walls are property of id Software.
1 comments
axod 6155 days ago
>> "It's what makes things like this possible."

You could, and I've seen, versions that use loads of <div> elements which get resized, or you could use a ton of <img> elements. So it's certainly possible without canvas, but I'm not sure how the frame rate would compare.

link
TrisMcC 6155 days ago
Check the source. This one is done without canvas, and with div and img elements. The canvas elements used here are for the minimap.
link
ars 6155 days ago
It's png sprites:

http://devfiles.myopera.com/articles/650/walls.png http://devfiles.myopera.com/articles/650/lamp.png http://devfiles.myopera.com/articles/650/tablechairs.png http://devfiles.myopera.com/articles/650/guard.png

You use the piece you want then scale it. For distance, make it smaller, for viewing something that is on the side you shrink it in width while leaving the height alone, this gives the illusion that it is slanted.

It would not be possible to do true 3d with this because you would need to scale something into a trapezoid which HTML can not do.

The guard png implies that you can shoot (and get shot), but I could not get that to work. By the name of the URL looks like there should be a step 6.

link