Creating pseudo 3D games with HTML 5 canvas

Jacob Seidelin from nihilogic.dk has a lot of exciting tricks up his sleeve, with regards to creating games using HTML 5 <canvas>. This week we are lucky enough to have him sharing some of his techniques with us, in the shape of some code for creating pseudo-3D first person perspective games using canvas and raycasting.

( Read the article )

Great article, thanks!
I have posted it to Digg and Reddit!

how create a widget?

...<abr title="field of vision">FOVabbr. - Needs fixin - Noticed when corrected it doesn't underline with dashes.

Fortunately, this feature can be disabled in opera:config under "Multimedia".

"config:opera" only shows the following 3 for Multimedia (v9.62):
Always load favicon
Play Background Sound
Show Animation <- ?????

Post edited Sunday, 30. November 2008, 20:11:00

DesertDawg: That's odd, I wonder if they removed the option? I still have it in my 9.60. Will try upgrading.

Nope, still there. I've no idea why you don't have the interpolation option.

Originally posted by jseidelin:

Jacob Seidelin from nihilogic.dk has a lot of exciting tricks up his sleeve, with regards to creating games using HTML 5 <canvas>. This week we are lucky enough to have him sharing some of his techniques with us, in the shape of some code for creating pseudo-3D first person perspective games using canvas and raycasting.

( Read the article )

Hi ..sorry new to the forum and opera .. cld somebody tell me how to event key board events for opera in javascript .. i have no clue on this.. thanks ..

A very useful article, especially for those who like me are currently engage in creating 3D games and presentations. I was digging into the subject for quite some time and this article was just what I needed to sort come doubts out. Thanks!

Very interesting article

I've been working on similar projects for a while now and am beginning work on normal-mapping textured triangles using a canvas. I'm sure the final product will be very slow, but it's a learning experience. I've already worked on texture-mapping, real-time shading, shadow-mapping, ray-tracing, z-sorting, and a few other graphical techniques. Here are some widgets of what I've made so far:
http://widgets.opera.com/author/geekrecon/

And my website for Opera-centric projects, targeted at the Wii:
http://wiioperasdk.com

I'd like to share some ideas. Tangent128 is another individual who hangs around Opera's website creating projects like these. Maybe we could all code something since three heads are better than one.

I'm working on an engine based on this raycasting technique, which includes some nice eye candy effects like shading based on light sources.

What bothers me greatly though is the lack of floor textures. As much as I try to bend my mind around the problem, I just can't come up with a way to make floor tiles, simply because they would need to rotate as you rotate, to retain their texture pattern with the correct facing. Since JavaScript can't rotate images without canvas, we are out of luck.

Still, even one colored div floors would be better than nothing, since you could at least have different colors at diffrent places (right now the whole world has a gray floor in the demo), but I'm unsure how to make something like that. Any ideas?

Yes, floors are a problem and you won't get very far without rotation. I suppose it would be possible to have single colored zones with a bit of math and some horizontal divs, although I'm not sure of the specific details of how to implement it (yet).

@geekrecon: Nice stuff! I'll have to check out Tangent128 as well.

Wonderful code that i'm currently porting to Java. It works nicely.
Just wanted to report an error in the code inlined in the article :

The castRays() function is called once per game cycle after the rest of the game logic. Next comes the actual ray casting as described above.

function castSingleRay(rayAngle) {
// make sure the angle is between 0 and 360 degrees
rayAngle %= twoPI;
if (rayAngle > 0) rayAngle += twoPI;

.. should be (and in fact IS corect in the downloaded code) :

if (rayAngle < 0) rayAngle += twoPI;

(I have had strange behaviour with the green ray because of that).

Hi

I found a small error in the article: In the chapter Opera and image interpolation you recommend to "uncheck Show Animation" but it sure should read "uncheck Interpolate Images".

Rooter