项目介绍

可以实现的功能

使用案例

二次开发

参与本项目

快速使用

直接使用本DEMO

引入到自己的页面

项目文档

初始化配置

window.scratchConfig={session:{token:"",// 用户Tokenusername:"Username"//用户名},backpack:{enable:true,// 是否启用背包api:"/api/teaching/scratch/backpack",//背包API接口},cloudData:{enable:true,//是否开启云变量功能id:"create",//默认云变量ID，可使用window.scratch.setCloudId更换IDapi:"127.0.0.1:1234/api/websocket/scratch/cloudData"//云变量API地址},projectInfo:{//作品信息projectName:"",authorUsername:"admin",authorAvatar:'./static/avatar.png',},logo:{show:true,//是否显示url:"./static/logo.png",//logo地址，支持base64图片handleClickLogo:()=>{//处理LOGO点击事件}},menuBar:{//菜单栏样式style:{background:'hsla(215, 100%, 65%, 1)',},//切换语言按钮languageButton:{show:true,//是否显示defaultLanguage:'zh-cn'//默认语言 en zh-cn zh-tw},//新建按钮newButton:{show:true,//是否显示handleBefore(){//拦截点击事件，返回true继续执行returntrue}},//从计算机加载按钮loadFileButton:{show:true,//是否显示handleBefore(){//拦截点击事件，返回true继续执行returntrue}},//保存到计算机按钮saveFileButton:{show:true,//是否显示handleBefore(){//拦截点击事件，返回true继续执行returntrue}},//加速模式按钮turboModeButton:{show:true//是否显示},//教程按钮helpButton:{show:true,//是否显示handleBefore:()=>{//拦截点击事件，返回true继续执行returntrue}},//我的物品按钮myStuff:{show:true,//是否显示url:'/myProject'//跳转的连接},//用户头像按钮userAvatar:{show:true,//是否显示username:'未登录',//用户名avatar:'./static/avatar.png',//用户头像handleClick(){//点击头像，可以弹出登录框等操作}},//自定义按钮customButtons:[{show:true,//是否显示buttonName:'分享',//按钮名style:{//按钮样式color:'white',background:'hsla(30, 100%, 55%, 1)',},handleClick:()=>{//按钮事件console.log("自定义按钮1");console.log('分享按钮')window.scratch.getProjectCover(cover=>{//TODO 获取到作品截图})window.scratch.getProjectFile(file=>{//TODO 获取到项目文件})// 获取到项目名varprojectName=window.scratch.getProjectName()console.log(projectName);}},//可继续新增按钮]},blocks:{// 积木缩放比例scale:0.8,// 隐藏分类 费雷见README附录：// 如需动态隐藏显示分类或积木，修改此配置后需手动执行 window.vm.emitWorkspaceUpdate()hideCatagorys:[],//隐藏积木 积木代码见README附录：hideBlocks:[],},stageArea:{//舞台设置fullscreenButton:{//全屏按钮show:true,handleBeforeSetStageUnFull(){//拦截退出全屏，返回true继续执行returntrue},handleBeforeSetStageFull(){//拦截全屏，返回true继续执行returntrue}},startButton:{//开始按钮show:true,handleBeforeStart(){//拦截开始按钮，返回true继续执行returntrue}},stopButton:{// 停止按钮show:true,handleBeforeStop(){//拦截停止按钮，，返回true继续执行returntrue}}},//scratch vm初始化完毕handleVmInitialized:(vm)=>{window.vm=vm},//作品加载完毕handleProjectLoaded:()=>{},//默认作品加载完毕handleDefaultProjectLoaded:()=>{},//默认项目地址,不需要修请删除本配置项defaultProjectURL:"./static/project.sb3",//素材库配置assets:{//附：Scratch素材库采集和处理工具 https://github.com/open-scratch/scratch-asset-utils//素材库地址，默认为/static下的素材库assetHost:'./static',//素材库索引地址defaultIndex:{sprites:"./static/json_index/sprites.json",costumes:"./static/json_index/costumes.json",backdrops:"./static/json_index/backdrops.json",sounds:"./static/json_index/sounds.json"},//拦截角色库打开handleBeforeSpriteLibraryOpen(){console.log("角色库打开")//追加素材库// window.scratch.pushSpriteLibrary(Arrays)returntrue;},//拦截造型库打开handleBeforeCostumesLibraryOpen(){returntrue;},//拦截背景库打开handleBeforeBackdropsLibraryOpen(){returntrue;},//拦截声音库打开handleBeforeSoundLibraryOpen(){returntrue;}},}

API

ScratchVm对象

加载项目

window.scratch.loadProject(url, ()=>{    //加载文件完成后的操作})

获取项目文件

window.scratch.getProjectFile((file)=>{    console.log(file)    //上传file文件})

获取项目截图

window.scratch.getProjectCover((file)=>{    console.log(file)    //上传截图文件})

获取项目名称

设置项目名称

设置为仅播放模式

window.scratch.setPlayerOnly(true)

设置为全屏

window.scratch.setFullScreen(true)

追加素材库

追加角色库

追加造型库

追加背景库

追加声音库

window.scratch.pushSoundsLibrary([{"name":"自定义声音","tags":["music",],"assetId":"5cb46ddd903fc2c9976ff881df9273c9","dataFormat":"","md5ext":"5cb46ddd903fc2c9976ff881df9273c9.wav","sampleCount":11840,"rate":44100}])

设置云变量ID

附录

Scratch项目结构

各个模块

scratch-vm 虚拟机

scratch-audio 声音引擎

scratch-blocks 代码积木块

scratch-l10n 国际化

scratch-paint 画图引擎

scratch-render：

scratch-storage 存储引擎

scratch-svg-renderer

项目结构

├── 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

积木分类代码

积木代码

运动分类

外观分类

声音分类

事件分类

控制分类

侦测分类

运算分类

手机端虚拟按键实现案例

functionregKeyEvent(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)