基于块的 Web 应用程序类似于 mBlock。
代码示例:
// 创建块对象
const block = {
// 块名称
name: "move_forward",
// 块字段
fields: [
{
name: "distance",
type: "number",
value: 10
}
],
// 块代码生成函数
codeGenerator: function () {
const distance = this.getFieldValue("distance");
// 生成前进指令代码
return move forward ${distance} units
;
}
};
// 创建块工作区
const workspace = Blockly.inject("blocklyDiv", {
toolbox: '
// 将块添加到工作区 Blockly.Blocks[block.name] = { init: function() { this.jsonInit(block); } }; Blockly.JavaScript[block.name] = block.codeGenerator;
// 渲染块 const firstBlock = workspace.newBlock(block.name); // 展示块 Blockly.Xml.domToWorkspace(document.getElementById("startBlocks"), workspace);