飞机座位数游戏（/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);
};
网友评论