code blocks代码性能分析_Blockly 例子分析

飞机座位数游戏(/demos/plane/index.html)

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

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

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

飞机的实现

飞机的实现比较简单，飞机由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即可生成，游戏主要在于由积木如何绘制图形。

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);};