HTML5 Canvas - Best practice for moving objects

Question

I'm creating a game using and JavaScript. The game will involve the player navigating through a dungeon. My question is what is the best way to code objects like walls, doors etc? I'm stuck between two obvious choices

1. Draw every object onto the canvas and move the objects based on how the player moves

2. Have all of the object pre drawn onto a background image and just move the background image according to how the player moves

I'm thinking option 2 will be easier but I'll still have to detect where the objects are so the player can't just walk over a wall.

Basically I want to know if anyone can speak from experience about the best way to design the game and are there any resources on this?

Answer 1

The performance requirements for your role-playing game are less than, for example, an arcade game.

You will probably be ok just redrawing everything in their new positions.

But even so, you gain performance by having your background (that moves infrequently) on a separate layer than your often moving character.

A layer can be as simple as a background img element that is moved by CSS or can be a separate background-canvas that is layered under a top player-canvas.

The good news is that you can start out with a single layer and then fairly easily change to multiple layers if performance becomes an issue.

There's not a "best way to design a game" but here's some advice:

• Get a tiny working prototype running very soon in the project.
• Make incremental changes to the prototype.
• test, test, test...

Disclaimer: I don't design games, but I do design quality-control applications that use many of the same interactive technologies used in gaming.