Google blockly简介（一）Simple Blockly操作

最新推荐文章于 2024-04-14 09:34:40 发布

xiatiancc

最新推荐文章于 2024-04-14 09:34:40 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： Google blockly

本文链接：https://blog.youkuaiyun.com/xiatiancc/article/details/82585233

本文介绍如何使用Blockly创建一个简单的在线编程环境。步骤包括引入Blockly脚本、设置用户语言、定义工具箱结构等。通过实例展示了完整的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

谷歌官网的有一些比较简单的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>