Drawing a Tile Map - Canvas & Javascript
Discover the basics of tile maps, using Canvas and Javascript. In this tutorial we'll learn how to draw a simple Tile Map to an HTML Canvas.
Keyword: gamedev
Character, Movement and Input on a Tile Map
We now look at adding a Character and converting user input to movement in our tile map tutorial.
Viewport and Culling on a Tile Map
Displaying maps larger than the visible area by moving the viewport and culling off-screen tiles.
More Tile Types for the Tile Map
Making it simple to add more types of tiles to our map, and creating some helper functions for Character movement.
Using PNG Tilesheets for Graphics
Improving the appearance of our Canvas map by using an Image tilesheet for our Graphics.
Animated Sprites in Canvas
Animating the sprites we're using on our Canvas game with some simple Javascript.
Active tiles, ice and conveyor belts
Making tiles just sit there and look pretty, we see how to force Character movement with slippery tiles and moving surfaces.
Movement speeds on different tile types
We can't move on all surfaces with the same ease, so now we learn how to set different movement speeds dependant on the type of tile.
Pausing and changing game speeds
Time must stop! We'll look at how to not only pause the game, but also speed up or slow down time.
Tile events and triggered functions
The Character arriving at a specific tile may need to progress or alter the game world or story. We can do that by assigning functions to be triggered on arrival at certain tiles.
Binary Tree maze generation in Javascript
A method for generating Binary Tree mazes in Javascript.
Recursive Backtracking mazes in Javascript
A method for generating Recursive Backtracking mazes in Javascript.
Growing tree maze algorithm in Javascript
A method for generating lovely mazes in Javascript using the growing tree algorithm.
No Backtracking
Simple movement method that gives the appearance of limited intelligence and path-finding.
Raytracing on Tile maps, basic concepts
An introduction to raytracing on 2D tile maps and an example of a method that could be used for illumination.
Raytracing vision cones on a 2D tilemap
Using raytracing to determine vision on a tile map.
Snake Game
A complete example of the theory and practise behind writing the game Snake in Javascript.
Creating the Memory Game
How to write the Memory game in Javascript with Canvas + HTML, from scratch and game theory.
Minesweeper in Javascript and Canvas
Theory and implementation for developing the classic game Minesweeper for browsers in Javascript.
Image 15-Puzzle mechanics
How to write the 15-Puzzle (Image puzzle) game in Javascript and render to a Canvas element, theory and practise.