HTML5 Puzzle Game : Color Drop : Game Demo + AS3 vs. JavaScript Code Comparison

Color Drop HTML5

Color Drop was game that was featured in our book The Essential guide To Flash Games.  Earlier this month I decided to to see how hard it would be to tackle a similar game for HTML5 Canvas for the next version of HTML5 Canvas for O'Reilly.  Color Drop HTML5 Canvas is the result.

Same as the other demos from earlier this week, this has only really been tested in Google chrome, so your mileage may vary with other browsers.

What interested me the most about the process of converting this game from AS3 to JavaScript was the ease of reusing the existing AS3 algorithms in JavaScript.  In the code snippets below you can see the process.

The function findLikeColoredBlocks() is designed to find a list of blocks that are the same color and adjacent to the block that was clicked by the player.  There is a full discussion of the code in The Essential guide To Flash Games.

When I sat down to rewrite the code in JavaScript, I found the process very very easy. In fact, the only thing I needed to do was to remove the type definitions on variables.

JavaScript Code

function findLikeColoredBlocks(blockToMatch) {
          var blocksToCheck= new Array();
          var blocksMatched = new Array();
          var blocksTested = new Array();
          var rowList = [-1, 0, 1,-1,1,-1,0,1];
          var colList = [-1,-1,-1, 0,0, 1,1,1];

          var colorToMatch = blockToMatch.blockColor;
          blocksToCheck.push(blockToMatch);
          while(blocksToCheck.length > 0) {
              tempBlock = blocksToCheck.pop();
              if (tempBlock.blockColor == colorToMatch) {
                  tempBlock.selected = true;
                  blocksMatched.push(tempBlock);
              }

              var tempBlock2;
              for (var i = 0;i < rowList.length;i++) {
                  if ((tempBlock.row + rowList[i]) >= 0 && (tempBlock.row + rowList[i]) < BLOCK_ROWS && (tempBlock.col + colList[i]) >= 0 && (tempBlock.col + colList[i]) < BLOCK_COLS ) {
                      var tr = tempBlock.row + rowList[i];
                      var tc = tempBlock.col + colList[i];
                      tempBlock2 = board[tr][tc];
                      if (tempBlock2.blockColor == colorToMatch && blocksToCheck.indexOf(tempBlock2) == -1 && blocksTested.indexOf(tempBlock2) == -1) {
                          blocksToCheck.push(tempBlock2);
                      }
                  }

              }
              blocksTested.push(tempBlock);
          }
          return blocksMatched;
      }

AS3 Code

public function findLikeColoredBlocks(blockToMatch):Array {
          var blocksToCheck:Array = new Array();
          var blocksMatched:Array = new Array();
          var blocksTested:Array = new Array();
          var rowList:Array = [-1, 0, 1,-1,1,-1,0,1];
          var colList:Array = [-1,-1,-1, 0,0, 1,1,1];

          var colorToMatch = blockToMatch.blockColor;
          blocksToCheck.push(blockToMatch);
          while(blocksToCheck.length > 0) {
              tempBlock = blocksToCheck.pop();
              if (tempBlock.blockColor == colorToMatch) {
                  blocksMatched.push(tempBlock);
                  tempBlock.makeBlockClicked();
              }

              var tempBlock2:Block;
              for (var i:int = 0;i < rowList.length;i++) {
                  if ((tempBlock.row + rowList[i]) >= 0 && (tempBlock.row + rowList[i]) < BLOCK_ROWS && (tempBlock.col + colList[i]) >= 0 && (tempBlock.col + colList[i]) < BLOCK_COLS ) {
                      var tr:int = tempBlock.row + rowList[i];
                      var tc:int = tempBlock.col + colList[i];
                      tempBlock2 = board[tr][tc];
                      if (tempBlock2.blockColor == colorToMatch && blocksToCheck.indexOf(tempBlock2) == -1 && blocksTested.indexOf(tempBlock2) == -1) {
                          blocksToCheck.push(tempBlock2);
                      }
                  }
              }
              blocksTested.push(tempBlock);
          }
          return blocksMatched;
      }

While the display code for making HTML Canvas games is quite different between AS3 and JavaScript, the logical algorithms for iterations, loops, multi-dimensional arrays, etc. are pretty much the same.   This is good news for people who have libraries of AS2 and AS3 algorithms that need to be converted to HTML5/JavaScript will have a fairly easy time accomplishing the task.