TechplexEngineer
6/1/2012 - 3:26 AM

Blockly Maze

Blockly Maze

/**
 * Go to http://blockly-demo.appspot.com/blockly/demos/maze/index.html
 * and paste this function into your browser's javascript inspector
 *
 * Setup new Maze MAP: 1 for empty, 0 for path, 2/3 for start/finish
 * Maze.MAP = [
 *  [1, 1, 1, 1, 1, 1, 1, 1],
 *  [1, 0, 1, 1, 3, 1, 0, 1],
 *  [1, 0, 1, 1, 0, 0, 0, 1],
 *  [1, 0, 1, 1, 0, 1, 1, 1],
 *  [0, 0, 0, 0, 0, 0, 0, 1],
 *  [1, 1, 0, 1, 0, 1, 0, 1],
 *  [1, 2, 0, 0, 0, 1, 0, 1],
 *  [1, 1, 1, 1, 1, 1, 1, 1]];
 *
 * Run loadMazeMap() function to create your new challenge.
 */
function loadMazeMap() {
   var map = document.getElementById("map");
   if(map.tagName != "CANVAS") {
      var canvas = document.createElement("canvas");

      var max_map_width = 0;
      Maze.MAP.map(function(row, i) { max_map_width = Math.max(max_map_width, row.length); });
      canvas.setAttribute("width", Maze.SIZE * max_map_width);
      canvas.setAttribute("height", Maze.SIZE * Maze.MAP.length);

      map.parentNode.replaceChild(canvas, map);
      canvas.setAttribute("id", "map"); 
      map = canvas;
   }
   var context = map.getContext("2d");
   Maze.MAP.forEach(function(row, i) {
      row.forEach(function(cell, j) {
         var color = "#ffffff";
         if(Maze.MAP[i][j] != 1) color = "#cccccc";
         context.fillStyle = color;
         context.fillRect(j*Maze.SIZE, i*Maze.SIZE, Maze.SIZE, Maze.SIZE);   
      })
   });

   Maze.init(Blockly);
}