HTML5 Canvas 2D Game Experimentation: Basic sprite movement and map management

Here’s an HTML5 experiment in progress…

HTML5’s canvas element is pretty powerful and easy to use. Rendering images, shapes, and text typically does not require a lot of code. So I decided it would be fun to build a simple javascript gaming engine to see what I could do with the canvas element in a few hours. The type of game being assembled is an aerial view sprite based game. Similar to what you would see in many early RPGs.

This is just an experiment, the code was not optimized for performance, and I do not recommend using it for any projects, however I will post a working engine sometime in the near future.

I ended up doing this all in just under an hour, and I have to say it was pretty easy getting everything to work together. I have not included graphics yet, so for now everything being displayed on the screen is text. I mostly focused on collision detection and sprite movement. Via key presses the sprite will move either horizontally or vertically around the canvas. The sprite will also bump into the edges of the defined map using via the collision detection I wrote. Finally the sprite has been configured to handle parameters such as which direction it is facing, if it is standing still or moving, etc. I might expand these parameters down the road to support things like health or special behaviors. The explanation of code is broken down into 4 main chunks: the environment, keyboard detection, sprites, and movement. Each code section has unique attributes and functions, and the environment section controls what is displayed on the canvas as well as refreshing and redrawing the canvas.

Continue reading »