Google blockly简介（一）Simple Blockly操作
程序员文章站
2022-03-21 17:06:08
...
谷歌官网的有一些比较简单的demo，大家可以试一下。
https://developers.google.cn/blockly/guides/configure/web/fixed-size
一、包括核心Blockly脚本和核心块集。（请注意，路径可能会有所不同，这取决于您的页面与Blockly相关的位置：）
<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>二、然后设置用户语言的消息(在本例中为英语)：
<script src="msg/js/en.js"></script>将以上的代码放入html文件中的<head> ***** <\head>中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Blockly</title>
<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="en.js"></script>
</head>三、在页面正文中的某个位置添加一个空div并设置其大小（放在 <body>***** <\body>中）：
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>四、添加工具箱的结构(请参阅 Defining the Toolbox(欲了解更多信息)页面上的任何地方：
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="controls_repeat_ext"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>五、调用JavaScript 脚本，将注入Blockly注入空div。此脚本应位于页面底部，或由onload事件调用。
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>或者
<script>
var demoWorkspace = Blockly.inject('blocklyDiv',
{media: '../../media/',
maxBlocks: 5,
toolbox: document.getElementById('toolbox')});
function onchange(event) {
document.getElementById('capacity').textContent =
demoWorkspace.remainingCapacity();
}
demoWorkspace.addChangeListener(onchange);
onchange();
</script>以上就是整个例子完成，显示结果如下图：
所有代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Blockly</title>
<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="en.js"></script>
</head>
<body>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="controls_repeat_ext"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
</body>
</html>