友情提示:380元/半年,儿童学编程,就上码丁实验室。
既然每个按钮都可以配置自己的Blockly工作区,那么我们要做的下一件事就是从每个工作区生成JavaScript代码。
生成的代码将由浏览器运行,有效地执行Blockly工作区中设置的块。
为javascript添加一个blockly生成器
Blockly可以从不同语言的块生成代码,例如JavaScript,Python或PHP。我们将JavaScript生成器添加到我们的应用程序中。
打开 index.html
并导入javascript_compressed.js
文件:
<scriptsrc="../../../javascript_compressed.js"></script>
它将由sound_blocks.js使用,因此请务必在sound_blocks.js脚本上方添加javascript_compressed.js的脚本标记。
为声音块添加JavaScript生成器
当Blockly为工作空间中的块生成JavaScript代码时,它会将每个块转换为代码。默认情况下,它知道如何将所有库提供的默认块转换为JavaScript代码。但是,对于任何自定义块,我们需要指定自己的转换函数(也就是代码生成器)。
导航到scripts/sound_blocks.js
。将以下函数定义添加到此文件:
Blockly.JavaScript['play_sound']=function(block){varvalue='\''+ block.getFieldValue('VALUE')+'\'';return'MusicMaker.queueSound('+value+');\n';};
使用此转换功能,以下play_sound
块:
转换为JavaScript代码“ MusicMaker.queueSound('Sounds/c4.m4a');
”。