DDTe1 Hour 2 to 4 - Tiles

Creating the tiles necessary for sudoku seems like a simple enough process. After all, only 10 tiles are needed. However, the check mark note system needs to be incorporated into this as well as the hint system. This makes the task a bit harder to accomplish. My decision was to got with 40 tiles. 10 for normal (blue), ten for incorrect (red) ten for correct (green) and 10 for locked (black). I am also considering an additional ten for locked but incorrect but for now am not going to bother with this but may do so later if time permits.

The easiest way of implementing the tiles would be to use text. This would not have the visual impact that I want so instead the ImageLayer class will be taken advantage of to create to display bitmap tiles that can be made as fancy as desired. The tiles were quickly created in fireworks using a nice marble image for the backdrop. This image was created quickly but may be touched up a bit later. Likewise, it will be easy to replace numbers with other symbols if so desired.

Next, the Sudoku.Tile class was created. This holds the state of the tile, the current value of the tile, if the tile is locked, and two arrays of 10 representing the state of the checkboxes. While I could use 9, because all the labelling starts at 1 I figured it would be less confusing to me to have element 0 being unused and elements 1 through 9 representing the actual number. A ImageLayer is used to draw the tile and 9 additional (small) image layers are used to represent the notes.

The combination of the two sets of numbers determine which color to set the note tiles to, if they are displayed. The decision to show them or not is dependent on the value that the tile is set to. If this is a non-zero value, the hint tiles are all made invisible. Otherwise, visibility and color get determined by the two check arrays.

The  next step is to actually make it possible to set the notes and value for tiles. There are no built in user interface components in the HTML 5 canvas so I am going to have to either roll my own or use HTML markup outside of the canvas to handle things. This decision will be the topic for the next post.