What is a good way to create motion borders for a “room” in a game on HTML5 canvas?

Question

So, I have a game and creating a small game using canvas and Javascript, and I need the little character to move around the screen, with a flat image in the background depicting a room.

What would be the best way to determine where a player’s object can and cannot move? If it's just a square room simple enough to check the edges against player x and y, but it gets more complicated if I have different background shapes that I might want the player to move about.

Is there any way to detect the intersection of framed images on canvas? If so, I could make the “walls” separate from the main background and see if the player hit any of them. Or can I change my mind that it has a simpler solution?

thanks

Answer 1

Please give more next time. Is this a top down 2D game? I will admit it.

There are several ways, depending on what you want to do and the level of detail.

If the numbers are almost all rectangles, you can just see if it is completely contained in them.

If not, you can use direct intersection algorithms, otherwise you could turn the map into one big path (so that the center of the path is either hollow or not) and use IsPointInPath (I would suggest making your own, although not using Canvas 'one) to see if all the key points of the player’s geometry are inside (or outside)

Finally, if you want to collide with a pixel , you have to make a simplified black map png (or something similar) of your level and use a ghost canvas, as I do for impact testing here. Then check a few pixels on the player’s silhouette and see if they are black. If any of them is not black, the player goes beyond!

Answer 2

This time I tried to create a simple game on html5 canvas, similar to what you are currently working on (I think this is a general idea). I suggest that you work on a collision engine, at least that was my idea:

• create another layer on top of the one you have as background,
• assign the same border image (transparently) to each object that you want your player to not pass,
• then you need to calculate when the player’s XY coordinates are above this object.
• if (collides) {don't jump} else {go}

This way you can stop the player moving through the wall or otherwise a solid object.

I looked at HTML5 + Collision on Google, but nothing interesting came up, maybe you should try different searches or be the first to realize this idea (mine is only at the basic stage).

Answer 3

Edition:

You may have to define some forms of SVG or have some kind of "map array".

i.e.

  map = { [0,0,0,0,0], [0,0,0,0,0], [0,0,0,0,0], [0,0,0,0,0], [0,0,0,0,0] }