Game engine using Javascript and HTML canvas
This is a little something I’ve been playing with recently that I just can’t put down. It started with setting up a basic “Move the square up when you press up” experiment one rainy Saturday, and now it’s ballooned out to something that looks like this.
That’s the lovable mute protagonist Link circa 1991 walking around my little test area. The area is controlled by a grid of tiles that have set behaviours attached to them:
- A collision value – Walkable, non-walkable, and diagonal tiles that affect where you can walk.
- An interation value – Ice, ladder, water, etc. Affects sprites, movement speed, and so forth.
- A z-index value – The ‘height’ of the tile, Link can jump down from higher platforms and bridges to lower areas.
The set of behaviours and tiles is set up to accept any number of combinations or new types of tile that have different effects, and the area is completely dynamic. The interation with the world is entirely based upon the map of tile behaviours. The engine is set up to work with any tile size, character boundary size to interact with the environment, any speed of movement. The engine dynamically calculates how to interact with the world in separate modules of the engine and displays everything at a steady 30 frames per second.
The abilities I’ve added for fun are straight out of a Zelda game, of course. Play with the X key to see some of what you can do. There’s dashing, grabbing, swimming, jumping off ledges, bridges you can walk under or over, health, diagonal tiles that you can walk against, ladders to climb up to higher places.
View Version 0.26 (Directional keys to move, X key to do stuff)
Click to Move and Pathfinding
A variation of the engine I decided to play around with is a click to move style engine utilising a pathfinding algorithm and much simpler collision detection.
I developed this version with the intent of creating something that might work well on a touch screen device, but then I actually used the thing on one and it lags like hell all over the place. Maybe in a year or so the phones will catch up, but for now this is just a little demo.
View Pathfinding Experiment (Click to move)