scratch二次开发：如何制作拓展模块实现动态增加积木块？

于 2024-06-05 11:25:58 发布
阅读量1.3k 收藏 5
点赞数 13
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beishang_1/article/details/139467521
版权

大家好，我是小黄。

相信大家在使用scratch的时候很多时候都会遇到很多的拓展，包括一些传感器的拓展，主控器的拓展等。

那么我们在开发的时候该如何实现这个功能呢？

阅读代码的时候我们发现，实际上Blockly加载的是Blockly.Blocks[toolboxName + “Toolbox”]，那么他的到底是什么呢？

![图片](https://img-blog.csdnimg.cn/direct/c6863ad36c2e43bea213b58b92659645.p

为此小黄在控制台输出了一下，大家看着代码觉得有点熟悉吗？没错就是toolbox里面的代码。

图片

<xml id="toolbox-ze2" style="display: none"><category name="主控器" id="master" colour="#FFAB19" secondaryColour="#CF8B17" iconURI="static/blocks/master.svg"><block type="ZE2_master_buzzer" id="ZE2_master_buzzer"></block></category><category name="%{BKY_CATEGORY_MOTION}" id="motion" colour="#4C97FF" secondaryColour="#3373CC" iconURI="static/blocks/motion.svg"><block type="ZE2_motor_speed" id="ZE2_motor_speed"><value name="SPEED"><shadow type="math_number"><field name="NUM">50</field></shadow></value></block><block type="ZE2_motor_speed_times" id="ZE2_motor_speed_times"><value name="SPEED"><shadow type="math_number"><field name="NUM">50</field></shadow></value><value name="TIMES"><shadow type="math_number"><field name="NUM">5</field></shadow></value></block><block type="ZE2_motor_speed_set" id="ZE2_motor_speed_set"><value name="SPEED"><shadow type="math_number"><field name="NUM">30</field></shadow></value></block><block type="ZE2_motor_speed_forward" id="ZE2_motor_speed_forward"><value name="SPEED"><shadow type="math_number"><field name="NUM">50</field></shadow></value></block><block type="ZE2_motor_speed_wheel" id="ZE2_motor_speed_wheel"><value name="SPEED"><shadow type="math_number"><field name="NUM">50</field></shadow></value></block><block type="ZE2_motor_speed_motorscontroller" id="ZE2_motor_speed_motorscontroller"><value name="SPEED1"><shadow type="math_number"><field name="NUM">50</field></shadow></value><value name="SPEED2"><shadow type="math_number"><field name="NUM">50</field></shadow></value></block><block type="ZE2_motor_speed_power" id="ZE2_motor_speed_power"><value name="SPEED1"><shadow type="math_number"><field name="NUM">50</field></shadow></value><value name="SPEED2"><shadow type="math_number"><field name="NUM">50</field></shadow></value><value name="SPEED3"><shadow type="math_number"><field name="NUM">50</field></shadow></value></block><block type="motor_stop" id="motor_stop"></block><block type="servo_steeringengine" id="servo_steeringengine"><value name="SPEED"><shadow type="math_number"><field name="NUM">50</field></shadow></value></block></category><category name="传感器" id="sensor" colour="#59C059" secondaryColour="#59C059" iconURI="static/blocks/sensor.svg"><block type="semsor_wavesensornuumber" id="semsor_wavesensornuumber"></block><block type="semsor_touchsensorpressed" id="semsor_touchsensorpressed"></block><block type="semsor_setcolorlampmodule" id="semsor_setcolorlampmodule"></block><block type="semsor_graylevel" id="semsor_graylevel"></block><block type="sensor_setgreyblock" id="sensor_setgreyblock"><value name="SPEED"><shadow type="math_number"><field name="NUM">1000</field></shadow></value></block><block type="semsor_greyvalue" id="semsor_greyvalue"></block><block type="semsor_infrareddistancemeasurement" id="semsor_infrareddistancemeasurement"></block></category><category name="%{BKY_CATEGORY_CONTROL}" id="control" colour="#FFAB19" secondaryColour="#CF8B17" iconURI="static/blocks/control.svg"><block type="control_wait" id="control_wait"><value name="DURATION"><shadow type="math_positive_number"><field name="NUM">1</field></shadow></value></block><block type="control_repeat" id="control_repeat"><value name="TIMES"><shadow type="math_whole_number"><field name="NUM">10</field></shadow></value></block><block type="control_forever" id="control_forever"></block><block type="control_if" id="control_if"></block><block type="control_if_else" id="control_if_else"></block><block type="control_wait_until" id="control_wait_until"></block><block type="control_repeat_until" id="control_repeat_until"></block></category><category name="%{BKY_CATEGORY_OPERATORS}" id="operators" colour="#40BF4A" secondaryColour="#389438" iconURI="static/blocks/operators.svg"><block type="operator_choose" id="operator_choose"><value name="OPERAND1"><shadow type="text"><field name="TEXT"></field></shadow></value><value name="choose_menu"><shadow type="operators_choose_menu"><field name="choose_menu">=</field></shadow></value><value name="OPERAND2"><shadow type="math_number"><field name="NUM">0</field></shadow></value></block><block type="operator_commonoperator" id="operator_commonoperator"><value name="OPERAND1"><shadow type="text"><field name="TEXT"></field></shadow></value><value name="operator_menu"><shadow type="operators_operator_menu"><field name="operator_menu">+</field></shadow></value><value name="OPERAND2"><shadow type="math_number"><field name="NUM">0</field></shadow></value></block><block type="operator_Rounding" id="operator_Rounding"><value name="OPERAND1"><shadow type="math_number"><field name="NUM">0</field></shadow></value><value name="OPERAND2"><shadow type="math_number"><field name="NUM">10</field></shadow></value></block><block type="operator_and" id="operator_and"></block><block type="operator_or" id="operator_or"></block><block type="operator_not" id="operator_not"></block></category><category name="变量" id="data" colour="#FF8C1A" secondaryColour="#DB6E00" custom="VARIABLE"  iconURI="static/blocks/data.svg"></category><category name="自制积木" id="more" colour="#FF6680" secondaryColour="#FF4D6A" custom="PROCEDURE" iconURI="static/blocks/more.svg"></category></xml>

为了使效果更好看，小黄放了一个图片暂代一下。点击拓展的时候就显示图片，点击图片的时候就出现拓展的积木块。

图片

下面是图片点击事件的代码；

 function closeexpand() {
      let expandID = document.getElementById('expandImg');
      expandID.style.display = 'none';
      var workspace = Blockly.getMainWorkspace();
      let originalString = Blockly.Blocks["ZE2" + "Toolbox"];
      console.log(originalString);
      let slicedString = originalString.slice(0, originalString.indexOf('blocks/more.svg') + 28);
      let slicedStringRight = originalString.slice(originalString.indexOf('blocks/more.svg') + 28, originalString.length);


      console.log(slicedString);
      console.log(slicedStringRight);


      let codeExpand = '<category name="%{BKY_CATEGORY_CONTROL}" id="control" colour="#FFAB19" secondaryColour="#CF8B17" iconURI="static/blocks/control.svg">' +
        '<block type="control_wait" id="control_wait">' +
        '<value name="DURATION"><shadow type="math_positive_number"><field name="NUM">1</field></shadow></value>' +
        '</block>' +
        '<block type="control_repeat" id="control_repeat">' +
        '<value name="TIMES"><shadow type="math_whole_number"><field name="NUM">10</field></shadow></value>' +
        '</block>' +
        '<block type="control_forever" id="control_forever"></block>' +
        '<block type="control_if" id="control_if"></block>' +
        '<block type="control_if_else" id="control_if_else"></block>' +
        '<block type="control_wait_until" id="control_wait_until"></block>' +
        '<block type="control_repeat_until" id="control_repeat_until"></block>' +
        '</category>';
      var xmlcodeFinally = slicedString + codeExpand + slicedStringRight;
      console.log(xmlcodeFinally);
      workspace.updateToolbox(xmlcodeFinally)

    }

我们先通过slice（）截取字符串，我们截取之前的那一段，之后拼接上codeExpand，在把末尾的加上，这样我们就组成了一个新的toolbox目录代码了。最后我们通过updateToolbox（）函数更新toolbox。这样就实现了拓展的过程。
好了今天的分享就是这么多了！
作者介绍：

热爱编程、写作的小菜鸡，喜交天下各路英雄好友，欢迎关注本人公众号一起学习、交流。如果您遇到什么问题请给我留言。需要源码的小伙伴请关注公众号回复：scratch获取。
在这里插入图片描述

关注我，一起学习探讨更多scratch-block知识！

有任何不懂的小伙伴可以加入群聊大家一起讨论。微信群过期的话可以加入QQ群：947525840。

图片

dp斜率优化 Hdu 3480 Division 题解
Monica
05-17 1110
累加器传送门：：http://blog.csdn.net/NOIAu/article/details/71775000题目传送门：https://vjudge.net/problem/HDU-3480题目：Little D is really interested in the theorem of sets recently. There’s a problem that confused him
dp斜率优化 Hdu 3507（Print Article）详细题解
Monica
05-13 1120
题目传送门：http://acm.hdu.edu.cn/showproblem.php?pid=3507累加器传送门：http://blog.csdn.net/noiau/article/details/71775000题目：Zero has an old printer that doesn’t work well sometimes. As it is antique, he still lik
HDU-3045 Picnic Cows 斜率优化DP
Lazer2001
05-13 4226
大家都很强， 可与之共勉。Problem Description It’s summer vocation now. After tedious milking, cows are tired and wish to take a holiday. So Farmer Carolina considers having a picnic beside the river. But there is
hdu3045 斜率优化
Le Petit Prince
05-18 458
It’s summer vocation now. After tedious milking, cows are tired and wish to take a holiday. So Farmer Carolina considers having a picnic beside the river. But there is a problem, not all the cows consi
HDU-3045 Picnic Cows 【DP+斜率优化】
babao9492的博客
03-11 148
题目链接 题意 有N只奶牛，每只奶牛有一个满意度，如果把一些奶牛分到一个组内，那么这些奶牛的满意度都会下降到组中满意度的最小值。现在规定每个组至少T只奶牛，求总的满意度变化的最小值 分析 从这个题中我学到了斜率DP中规定了转移距离的最小值时的处理方法（也就是i必须从小于等于i-T的状态转移而来） 状态不难想出，先对奶牛的满意度排个序，设dp[i]为前...
HDU 3045 (斜率优化)
morejarphone~
06-25 729
题目链接：点击这里题意：n个数，分成若干块，每一块的数量不能小于k，每一块的花费是所有的数减去块中最小值的和。每一块和的最小值。显然要排序以后分块，设fif_i表示(1,i)分块后的最小和，那么有fi=min{fj+sumi−sumj−aj+1∗(i−j)∥∥i−j≥k}f_i=min\left\{ f_j+sum_i-sum_j-a_{j+1}*(i-j)\big\|i-j\geq k \righ
HDU - 3045 Picnic Cows(斜率优化)
静静地码
10-07 428
题目大意：给你N个整数，现在要求你将这些整数分块，使得每块的数的数量大于等于k，每块的价值为，这个块里面的所有数 - 这个块里面的最小的数 每块的价值总和的最小值解题思路：先排个序，从小到大排，这样能使价值达到最小 设dp[i]为前i个数的划分完后的总价值 得到转移方程dp[i] = dp[j] + sum[i] - sum[j] - (i - j) * val[j ＋ 1] sum[i]
hdu 2829 lawrence 斜率优化dp
最新发布
06-28
hdu 2829 Lawrence 斜率优化dp 这道题是一道经典的斜率优化dp题目，需要用到单调队列的思想。 题目大意是给定一个序列a，求出一个序列b，使得b[i]表示a[1]~a[i]中的最小值，且满足b[i] = min{b[j] + (i-j)*k}，...
深入解析HDU DP动态规划题解技巧
HDU DP动态规划是计算机科学中的一个重要概念，指的是在计算理论和算法分析中，动态规划技术是用于解决具有重叠子问题和最优子结构特性的问题。动态规划将问题拆分为一系列子问题，并以递归的方式求解这些子问题，...
Hdu3401 Trade（dp 单调队列优化）最详细题解
Monica
05-06 1112
注：本题代码已经贴在ubuntu pastebin上代码地址是 http://paste.ubuntu.com/24522455/题目地址是http://acm.hdu.edu.cn/showproblem.php?pid=3401Problem DescriptionRecently, lxhgww is addicted to stock, he finds some regular patte
HDU - 3045 - Picnic Cows [ 斜率优化dp ]
Acer12138的博客
10-01 310
Problem Destribe It’s summer vocation now. After tedious milking, cows are tired and wish to take a holiday. So Farmer Carolina considers having a picnic beside the river. But there is a problem, not ...
hdu3045 Picnic Cows（斜率优化DP）
yxg_123的博客
02-23 660
点击打开链接 题意： 有n个奶牛分别有对应的兴趣值，现在对奶牛分组，每组成员不少于t，    在每组中所有的成员兴趣值要减少到该组的最小值，问总共最少需要减少的兴趣值是多少。 思路：   斜率优化+DP 转移方程为：f[i]=min{ f[j]+sum[i]-sum[j]+(i-j)*a[j+1] } T 其中sum表示a的前缀和。 如果j>k且决策j优于决策k则有 f[j]
hdu3045 Picnic Cows 斜率优化dp
w4149
05-13 394
题目大意： 给出一个有N (1<=N<=400000)个正数的序列，要求把序列分成若干组（可以打乱顺序），每组的元素个数不能小于T (1 < T <= N)。每一组的代价是每个元素与最小元素的差之和，总代价是每个组的代价之和，求总代价的最小值。承接上一篇再刷一道题，唯一不同就是有一个区间限定。 不过多阐述了，直接贴代码。要看斜率优化分析，请转至 斜率优化/* 首先 sort 从小到大排序。 然
HDU 3045 Picnic Cows (斜率优化DP)
Neutralzz的博客
07-30 298
思路：设dp[i]为考虑前i个cows的最小值。s[i] 为从第1个到第i个的moos和。 那么方程为dp[i] = min(dp[i],dp[j] + s[i] - s[j] - (i - j)*a[j+1])。 然后斜率优化将复杂度降为O(n)。 这个题！！！一定要注意初值！！！一定要注意状态从什么地方开始转移！！！以后的所有DP题也是！！！ 我的代码： #inclu
hdu 3045 Picnic Cows(斜率优化dp)
fouzhe的博客
08-12 403
题目链接 Picnic Cows Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 2560    Accepted Submission(s): 801 Problem Description It’s
HDU 3045 Picnic Cows [DP斜率优化]
ACTerminate的博客
02-23 294
HDU 3045 Picnic Cows [DP斜率优化]
HDU3045 Picnic Cows（斜率DP）
EGG_BUG的博客
01-26 312
Problem Description It’s summer vocation now. After tedious milking, cows are tired and wish to take a holiday. So Farmer Carolina considers having a picnic beside the river. But there is a problem,
hdu3045之斜率DP
Stephen
06-09 2002
Picnic Cows Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 1563    Accepted Submission(s): 478 Problem Description It’s summer voc
hdu3045 Picnic Cows
weixin_30596023的博客
09-24 133
Time Limit: 8000/4000 MS (Java/Others)Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 2099Accepted Submission(s): 648 Problem Description It’s summer vocation...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值