A tile game

Flood Zone Duel. Farm Flip Mahjong. Moon Elf Mahjong. Hexajong Tower. Hexagons And Circles. Animals Connect 2. Sugar Mahjong. Sports Mahjong. Stone Age Mahjong Connect. Mahjong Master 2. Mahjong 3D Construction. Connect Deluxe. Four Seasons Mahjong.

Halloween Scary Blocks. Golden Snitch. Shape Mahjong. Set the Blocks Betty Boop. Your goal is to play all your tiles by matching the numbers at the ends of the row. The first one to play all tiles wins the match.

Are you looking for some nice tunes? Then try Piano Tiles, an exciting reaction-game about music and the rhythm. Everybody loves music and Piano Tiles will let you play with it! Sometimes it's happy or whimsical. Sometimes it's sad or regretful. All that takes a back seat when it comes to keeping the music going. This allows the game to share the majority of the Rendering logic between the MapRenderer and a CharacterRenderer , which we'll define later.

While iterating, if the tile to draw is unwalkable, then the MapRenderer executes drawTile , passing the tile coordinates to draw at. Multiplying coordinates and dimensions by the tileSize enables us to translate from game coordinates to screen coordinates. When run, it produces the render shown below. The black background is just a solid black square made using the CSS background property, which will be replaced by an image later.

This layer can be any block level element you like. A div should be sufficient. Absolute positioning of the background and the canvas to top:0 and left:0 will allow you to stack them with z-index declarations, or simply the order they arrive in the DOM. We have a simple representation of our game area, but it looks pretty basic at the moment. So next, we'll look at using images instead of canvas drawRect.

Let's turn our background into something that resembles grass using CSS. This is as straightforward as applying a background property to the first layer:. Improving the rendering of the walls implies we're going to alter the map. Instead of just using 1s to represent the walls, we can use 1s, 2s and 3s to represent different images. In the new map, 0 represents a walkable tile as before transparent , 1 represents a continuous wall image, 2 represents the left edge of a wall and 3 represents the right edge of a wall.

Now we have a more detailed map, we can improve our drawTile method in our Renderer to use what's called a sprite sheet. You may have heard of these before when writing CSS: a sprite sheet is a single image that contains all of the images you need for your user interface.

They are commonly used on the web to save on HTTP requests. Making your own graphics can take time if you aren't familiar with graphics packages. Pre-made sprite sheets for this tutorial were sourced from www.

When used with the canvas tag, sprite sheets can also improve performance. It's quicker to sample from a cached canvas than it is to draw from separate image objects. In order to know which part of the sprite to sample for the different tiles, we need a tile specification, which can be defined as a property of the Renderer. The tile specification is a hash containing the X and Y coordinates of the graphics on the sprite sheet. For example, our background tiles have the following tile specification:.

The image for our '1' tile is at 0,0 in the sprite sheet, '2' is at 48,0 and '3' is at 24,0 as shown in the image below. We'll need a new object to hold the sprite and its tile specification, which we'll name Tileset.

It will be responsible for loading the sprite into an image element and loading the tile specification JSON via Ajax, as well as providing methods to access the data. An instance of the tileset can then be passed to new agents and to the MapRenderer for use with drawing tiles.

The drawTile method, responsible for drawing a single tile in our base Renderer will now look like this:. The other methods can remain the same. We just need to change drawTile so it accepts a sprite as well as details of where to sample.

Now that we are using the sprite from the tileset, the render of our game area looks much nicer. For the player, we need to create an agent object to handle the position of the player as well as hold a reference to their tileset. Unlike the MapRenderer , which only has one tileset, the CharacterRenderer will need to pass different sprites for render on from the agent they are rendering.

All agents will share their own canvas layer, just as we did with the game area and background. In order to render the character, we'll draw them in the same way as we drew the walls in the previous section. A tile specification will define the player sprites' positions on a sprite sheet. The draw method is a little different to the draw method in our MapRenderer :.