Tile game sample source code

For this example, the scene containing the tile game model is loaded and then some custom logic is programmed into the page for the scene to interact with the user.

Sample page


This example consists of a single canvas element inside of the body of the page.

The body element has its onload event set to call the Initialize() method, where the whole initialization and rendering is set up.
The canvas element has its id set to viewport. This id will be used by the JavaScript code to identify the element and use it for rendering.


The whole setup of the 3d scene and rendering is performed in the Initialize() method.

A viewport object is created to utilize the Html Canvas element for rendering and an instance of the Axis engine is created as usual.

The emptySpotPos variable holds the location of the empty tile spot.
The transitionStartPos holds the initial position of the tile which is being moved.
The transitionState holds the progress of the transition from tile's initial location to the empty spot location, and ranges from 0.0 to 1.0, where at 0.0 the tile is at its initial position and at 1.0 the tile is at the position of the empty spot.
The transitionTile holds a reference to the AxTransform object for the tile in transition. A null value denotes that no tile is in transition.

The ImportScene method loads the scene file asynchronously and in its callback, the location of the empty tile spot is determined by taking the X and Z coordinates of the tile above it and the Y coordinate of the tile to its left. X is the horizontal axis, Y is the vertical and Z is depth.
Then, an AxRotationInputModel is set to rotate the whole tile game according to mouse input and continuous rendering is started.

The viewport's OnMouseDown event fires when the vieport's Html Canvas element is clicked. It is set to pick the tile under the mouse cursor and if it's next to the empty spot, start a transition to move it towards the empty spot.
First, it checks whether a tile is not already in motion, then picks the object under the mouse cursor. If that object's name starts with "Tile", then it is indeed a tile and a candidate for being moved.
Then the distance between the selected tile and the empty spot is measured. If it's about 66 units (the size of one tile), then the tile is right next to the empty spot and a transition can start.
A transition is initiated simply by setting the transiionTile reference and the transitionState variable.
The transition itself is continuously handled in the viewport's OnRender() event.

The viewport's OnRender() event is set to render the scene and process the transition of tiles.
If the transitionTile variable is not null, this means that a tile is in transition.
The transitionState value is changed at a rate of 2.0 units per second, meaning a full transition from 0.0 to 1.0 will be performed in half a second.
The tile in transition is moved by setting its position according to the transitionState variable by linearly interpolating between the tile's initial position and the empty spot's position. This is done by transitionStartPos.Lerp, which is a method of the AxVector3 prototype class.

Finally, when transitionState reaches 1.0, the emptySpotPos is set to the initial location of the moved tile, which location is now empty and the transitionTile is set to null to denote that no transition is in action.