Playing with JavaScript

Grecian Urn - Screen Shot

      This is a screenshot of a tile based maze running game that I wrote in JavaScript back in 1998 as a prototype to explore what I could do with a 7×7 mosaic of tiles, and image swapping code. Recently I revisited it and decided to rewrite this project to take advantage of HTML 5, and the Canvas element.

If you have a browser that supports the canvas element, you can see what I have done so far. The original is available for comparison, and works in browsers all the way back to Netscape 3.

      I have not done any web development for about a decade so I am learning a great deal. Back in 2000 when I stopped working in web development, jQuery, and Google Docs did not exist. Now I see them as examples of what is possible, and I am impressed with JavaScript’s potential. I have a lot to learn, and I am eager to learn it.

So far I have implemented the features of the original:

  • 7×7 tile view port of a larger map
  • player can move though the map, by clicking on it
  • particular terrain tiles block movement

          I have also improved upon the implementation. A player can click on any accessible tile to move towards it. In the original, the player could only click on the tiles immediately adjacent to their avatar. The event hooks are also no longer embedded in the HTML. All of the Javascript functionality is in the JavaScript file. This will make further improvements much easier to implement.

          One major feature that I want to implement is a map editor. I plan the following changes to the code to get this the way I want it:

  • Move the map data to a database or file. Presently this data is in a hard coded array of strings. I am looking at changing this to a two dimensional array of objects with each object containing all the information about the tile.

  • Create a tileset to contain all of the terrain tiles. Presently these are just images with the same prefix and ending in a number which identifies the tile and what it can do. I would like the tileset to be a collection of objects each which can have different data associated with it – such as the image file and other game data like whether the tile blocks movement.

Other things to do include improving the interface. I’d like to highlight the tile with an outline when the player mouses over it. I’d like to provide feedback when a player clicks a tile. Etc…