使用本项目,不需要关注Scratch3.0功能的具体实现,只需要简单的js基础即可调用Scratch的相关功能,助力项目快速开发。
以最小的改动量实现功能,方便合并官方最新scratch
功能封装并对外提供调用接口, 不需要改动scratch本身代码
demo见编译后的build/index.html文件
调试 npm start 编译 npm run build 编译正式版 npm run build:prod
建议在Linux环境下编译开发,windows下编译可参见: https://www.213.name/archives/1739
本项目接受PR,如果大佬有更好的实现方法和更好的创意,欢迎提交PR!
同时也欢迎提出Issue,BUG建议均可
解析加载序列化项目文件、扩展功能实现、根据相应事件渲染舞台
解析、播放声音
创建积木操作块区域和每个积木对应的代码
多语言支持
图片编辑器
舞台渲染
项目和对应素材的存储加载
svg文件处理
├── build # 编译后的文件夹
│ ├── static # 静态资源
│ ├── chunks # scratch核心加载器
│ ├── index.html # scratch编辑器
│ ├── player.html # scratch播放器
│ ├── lib.min.js # scratch核心
├── src
│ ├── components # UI组件
│ ├── containers # 容器组件,承载容器组件业务逻辑
│ ├── css # 全局通用css
│ ├── examples # 集成测试用例
│ ├── extensions # 拓展案例
│ ├── lib # 插件及高阶组件
│ ├── audio # 声音插件
│ ├── backpack # 背包插件
│ ├── default-project # 默认项目
│ ├── libraries # 素材库相关
│ ├── video # 视频模块
│ ├── playground # 编译后页面的模版
│ ├── reducers # 全局状态控制
├── test # 测试用例
├── translations # 翻译库
├── README.md
├── README-RAW.md #
└── package.json
└── webpack.config.js
└── webpack.prod.js
scratch-vm实例化的对象,可以从外部操作部分vm功能
初始化配置均通过window.scratchConfig
对象完成
需要注意的是,需要在引入lib.min.js之前就加入该代码
属性:
window.scratchConfig.logo
参数名 | 描述 |
---|---|
show | 是否显示 |
url | logo地址 |
handleClickShare | 处理LOGO点击事件 |
支持图片URL和base64,建议使用PNG半透明图片
window.scratchConfig.menuBar
参数名 | 描述 |
---|---|
color | 菜单栏颜色 |
window.scratchConfig.shareButton
参数名 | 描述 |
---|---|
show | 是否显示 |
handleClick | 处理按钮点击事件 |
window.scratchConfig.profileButton
参数名 | 描述 |
---|---|
show | 是否显示 |
handleClick | 处理按钮点击事件 |
window.scratchConfig.stageArea
参数名 | 描述 |
---|---|
showControl | 是否显示舞台区控制按钮 |
showLoading | 是否显示Loading |
defaultProjectURL: "./static/project.sb3"
如果要加载默认小米则删除此配置
window.scratchConfig.assetCDN
将官方素材库换成自己的地址,加快国内用户访问速度。建议将素材文件上传至七牛、阿里云OSS等云存储上。
若使用官方素材库请删除本配置项。默认为/static下的素材库,如不需要可删除/static/internalapi文件夹
window.scratchConfig.handleVmInitialized
参数名 | 描述 |
---|---|
vm | scratch virtual machine |
示例
window.scratchConfig.handleVmInitialized = (vm)=>{
//scratch vm初始换完毕后的代码
}
window.scratchConfig.handleProjectLoaded
每当新建项目或载入项目完毕后调用此方法。
window.scratchConfig.handleDefaultProjectLoaded
默认小猫项目加载完毕后调用此方法。
见编译后的index.html
window.scratch.loadPorject(url, callback)
也可以使用vm对象的loadProject方法载入scratch项目
window.scratch.loadPorject(url, ()=>{
//加载文件完成后的操作
})
window.scratch.getProjectFile(callback)
也可以使用vm对象的saveProjectSb3方法
window.scratch.getProjectFile((file)=>{
console.log(file)
//上传file文件
})
window.scratch.getProjectCover(callback)
window.scratch.getProjectCover((file)=>{
console.log(file)
//上传截图文件
})
window.scratch.getProjectName()
window.scratch.setProjectName(projectName)
window.scratch.setPlayerOnly(isPlayerOnly)
参数名 | 描述 |
---|---|
isPlayerOnly | 是否播放模式 |
window.scratch.setPlayerOnly(true)
window.scratch.setFullScreen(isFullScreen)
参数名 | 描述 |
---|---|
isFullScreen | 是否全屏 |
window.scratch.setFullScreen(true)
示例:绑定某个dom为移动端的虚拟键盘,要先引入jQuery
function regKeyEvent(selector, key, keyCode) {
console.log("注册按键事件:" + key)
$(selector).on("touchstart", function(event) {
vm.postIOData("keyboard", {
keyCode: keyCode,
key: key,
isDown: true,
});
event.preventDefault();
});
$(selector).on("touchend", function() {
vm.postIOData("keyboard", {
keyCode: keyCode,
key: key,
isDown: false,
});
event.preventDefault();
});
}
// 绑定上下左右空格键
// regKeyEvent(".button_space", " ", 32)
// regKeyEvent(".button_down", "ArrowDown", 40)
// regKeyEvent(".button_up", "ArrowUp", 38)
// regKeyEvent(".button_left", "ArrowLeft", 37)
// regKeyEvent(".button_right", "ArrowRight", 39)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。