Question

I’ve been gathering ideas for my personal project in CSS/JavaScript/XHTML.
The idea is to replicate this:

And so far I have this (I know it’s far away from what I need, but just playing around)

http://jsfiddle.net/dburelax/XY8CA/9/

I was wondering if http:// processingjs.org/exhibition/ is my best choice to get this done in javascript? Thanks

P.S: I have no idea how to make the character move within the tiles any suggestions are welcome 🙂

Answer 1

I’d say light years away. But don’t take it as sarcasm; let me explain.

What I see when I look at the gif is an engine that supports block “primitives”.

Because, you see, every time he hovers a tile with the pointer it gets decorated with a white border.
In your case, you just have two images:

• A map background

• A gif of sprites for the character (without his back or sideway, but let’s just forget that for now).

With these two in order to achieve the block highlighting you should always calculate offset, and apply image filters on the background with the border decoration (and shadows and what not). Then, when moving outside the box remove decoration the last window.

After that what do you do if you change box size? Recalibrate all offsets? What if you have boxes/bocks (I’ll call them interchangeably now) in mixed sizes?

In game engines particularly you have primitives such as boxes, where you can detect collisions and either allow passage or not from the colliding box (a character is a box as well). Think how this would be practical if you for example had “fog of war” and allowed vision only in adjacent boxes.

It’s not just about processing.js, which may or may not be helpful to you, but there are key bindings, character movement, character orientation to be thought about first.

I don’t know about you, but I wouldn’t be able to encode all that information in Javascript objects and still have it performant. Not with current Javascript engines, at least.

While your hobby project is a fun idea, there is much much more you have to learn first to be able to pull this off.

In the case I have offended, take but this and all is mended — The Goblin

If this is in the scope of learning programming, while having a project to keep you motivated; then go for it (use the path I’ve deemed hard), learn first how to move images on the HTML5 canvas and when having actual code problems come back.