Blockly 例子分析

飞机座位数游戏（/demos/plane/index.html）

计算飞机座位数游戏总共有3关

飞机只有头等舱座位
飞机座位有驾驶员座位和头等舱座位
飞机座位除驾驶员座位和头等舱座位外，还有经济舱座位

头等舱座位 -c

飞机由svg生成，头等行和经济等行可根据滑动变换数字，座位积木填入公式，公式计算出的结果显示在飞机上“座位：？”处。

积木工作空间 -c

飞机的实现

飞机的实现比较简单，飞机由svg自动生成，飞机座位数由游戏等级和滑动条实现，滑动条通过slider来实现，当飞机等级变化时，控制飞机座位类型的实现或隐藏，当滑动条变化时，slider会调用sliderChange事件，从而进一步控制svg座位行数的变化。

积木块变化

积木块的变化分为两部分，是否显示积木以及积木行数的变化。
是否显示积木通过等级的变化来控制Toolbox是否包含积木对应的xml，从而控制Toolbox中积木是否显示。
积木行数会随着滑动条的变化而变化，是因为在每次svg重绘时会调用积木的customUpdate函数，从而达到积木行数的变化。

//更新积木行数
function updateBlocks(blocks) {
    for (var i = 0, block; block = blocks[i]; i++) {
      block.customUpdate && block.customUpdate();
    }
}
//积木定义，其中customUpdate函数会改变行数
Blockly.Blocks['plane_get_rows'] = {
  // Block for row variable getter.
  init: function() {
this.setHelpUrl(Blockly.Msg['VARIABLES_GET_HELPURL']);
    this.setColour(330);
    this.appendDummyInput()
        .appendField(Plane.getMsg('Plane_getRows'), 'title');
    this.setOutput(true, 'Number');
  },
  customUpdate: function() {
    this.setFieldValue(
        Plane.getMsg('Plane_getRows').replace('%1', Plane.rows1st), 'title');
  }
};

公式计算

公式计算就是获得工作空间中plane_set_seats积木，通过Blockly.JavaScript.blockToCode函数获得公式代码，执行JS的eval函数获得公式结果。

Plane.recalculate = function() {
  var rootBlock = null;
  //查找积木堆，并判断哪些是plane_set_seats积木
  var blocks = Plane.workspace.getTopBlocks(false);
  for (var i = 0, block; block = blocks[i]; i++) {
    if (block.type == 'plane_set_seats') {
      rootBlock = block;
    }
  }
  //根据积木堆的公式，获得代码，并执行得到座位数seats
  var seats = NaN;
  Blockly.JavaScript.init(Plane.workspace);
  var code = Blockly.JavaScript.blockToCode(rootBlock);
  try {
    seats = eval(code);
  } catch (e) {
    // Allow seats to remain NaN.
  }
  //设置座位数到svg上，并判断计算是否正确
  Plane.setText('seatText',
      Plane.getMsg('Plane_seats').replace(
          '%1', isNaN(seats) ? '?' : seats));
  Plane.setCorrect(isNaN(seats) ? null : (Plane.answer() == seats));
......
};

公式绘图游戏（/demos/graph/index.html）

简单绘图游戏由积木生成公式，绘图区域根据公式生成图形。公式积木由标准Toolbox即可生成，游戏主要在于由积木如何绘制图形。

公式绘图 -c

X积木

X积木是一个值积木

Blockly.defineBlocksWithJsonArray([{
  "type": "graph_get_x",
  "message0": "x",
  "output": "Number",
  "colour": Blockly.Msg['VARIABLES_HUE'],
  "tooltip": Blockly.Msg['VARIABLES_GET_TOOLTIP'],
  "helpUrl": Blockly.Msg['VARIABLES_GET_HELPURL']
}]);

X积木JS代码

Blockly.JavaScript['graph_get_x'] = function(block) {
  // x variable getter.
  return ['x', Blockly.JavaScript.ORDER_ATOMIC];
};

Y积木定义

Y积木只是定义了一个输入类型为Number值为VALUE的积木

Blockly.defineBlocksWithJsonArray([{
  "type": "graph_set_y",
  "message0": "y = %1",
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "Number"
    }
  ],
  "colour": Blockly.Msg['VARIABLES_HUE'],
  "tooltip": Blockly.Msg['VARIABLES_SET_TOOLTIP'],
  "helpUrl": Blockly.Msg['VARIABLES_SET_HELPURL']
}]);

Y积木js代码

Blockly.JavaScript['graph_set_y'] = function(block) {
  // y variable setter.
  var argument0 = Blockly.JavaScript.valueToCode(block, 'VALUE',
      Blockly.JavaScript.ORDER_ASSIGNMENT) || '';
  return 'y = ' + argument0 + ';';
};

采集图形点

根据积木堆生成的代码，采取图形点X轴每次以0.1增加，生成XY轴图形点。

Graph.plot = function(code) {
  var table = [];
  var y;
  //X轴从-10到10开始每次增加0.1，执行eval获得Y轴值
  for (var x = -10; x <= 10; x = Math.round((x + 0.1) * 10) / 10) {
    try {
      eval(code);
    } catch (e) {
      y = NaN;
    }
    if (!isNaN(y)) {
      y = Math.round(y * Math.pow(10, 14)) / Math.pow(10, 14);
      table.push([x, y]);
    }
  }
  ......
  return table;
};

图形绘制

根据第三方绘图函数，绘制图形。

Graph.drawVisualization = function() {
//获取积木代码
  var formula = Blockly.JavaScript.workspaceToCode(Graph.workspace);
  if (formula === Graph.oldFormula_) {
    return;
  }
  Graph.oldFormula_ = formula;
//采集公式的图形点
  var data = google.visualization.arrayToDataTable(Graph.plot(formula));
  //调用google的图形化库画线
google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, Graph.options_);
  // 显示公式
  formula = formula.substring(formula.indexOf('y = '));
  formula = formula.substring(0, formula.indexOf(';'));
  var funcText = document.getElementById('funcText');
funcText.replaceChild(document.createTextNode(formula), funcText.lastChild);
};