生成函数中的 JS wait/pause
JS wait/pause in generated functions
我在做什么
我正在使用 Blockly 构建海龟图形应用程序。用户可以从块构建代码，然后 Blockly 引擎生成 JS 代码，绘制到 canvas.
我的问题是什么
Blockly 引擎生成 JS 代码，但 returns 它是一个字符串，我必须 eval() 才能绘制到 canvas。
我可以更改块的代码以生成不同的输出，但保持它尽可能简单很重要，因为用户可以阅读块输入背后的实际代码。所以我不想把它搞砸。
我想做什么
我完全控制了原子操作（go、turn等），所以我想在函数的开头插入一小段代码，这会延迟其余职能机构的执行。类似于：
function go(dir, dist) {
// wait here a little
// do the drawing
}
我认为它应该是同步的，它可以在执行流程中保持延迟。我尝试使用 setTimeout（异步，失败），promise（失败），循环中的时间戳检查（失败）。
在 JS 中甚至可能吗？
如果我理解你！
您可以构建一个新的 class 来处理 go(dir, dist) 函数的执行，并覆盖go函数在执行器中创建新的go。
function GoExecutor(){
var executeArray = []; // Store go methods that waiting for execute
var isRunning = false; // Handle looper function
// start runner function
var run = function(){
if(isRunning)
return;
isRunning = true;
runner();
}
// looper for executeArray
var runner = function(){
if(executeArray.length == 0){
isRunning = false;
return;
}
// pop the first inserted params
var currentExec = executeArray.shift(0);
// wait delay miliseconds
setTimeout(function(){
// execute the original go function
originalGoFunction(currentExec.dir, currentExec.dist);
// after finish drawing loop on the next execute method
runner();
}, currentExec.delay);
}
this.push = function(dir, dist){
executeArray.push([dir,dist]);
run();
}
}
// GoExecutor instance
var goExec = new GoExecutor();
// Override go function
var originalGoFunction = go;
var go = function (dir, dist, delay){
goExec.push({"dir":dir, "dist":dist, "delay":delay});
}
编辑 1：
现在你必须用你的函数和参数调用 callWithDelay，
执行器将通过将参数应用于指定函数来处理此调用。
function GoExecutor(){
var executeArray = []; // Store go methods that waiting for execute
var isRunning = false; // Handle looper function
// start runner function
var run = function(){
if(isRunning)
return;
isRunning = true;
runner();
}
// looper for executeArray
var runner = function(){
if(executeArray.length == 0){
isRunning = false;
return;
}
// pop the first inserted params
var currentExec = executeArray.shift(0);
// wait delay miliseconds
setTimeout(function(){
// execute the original go function
currentExec.funcNam.apply(currentExec.funcNam, currentExec.arrayParams);
// after finish drawing loop on the next execute method
runner();
}, currentExec.delay);
}
this.push = function(dir, dist){
executeArray.push([dir,dist]);
run();
}
}
// GoExecutor instance
var goExec = new GoExecutor();
var callWithDelay = function (func, arrayParams, delay){
goExec.push({"func": func, "arrayParams":arrayParams, "delay":delay});
}
你不能让代码同步等待。您唯一会得到的是一个冻结的浏览器 window.
你需要的是使用 js interpreter instead of eval. This way you can pause the execution, play animations, highlight currently executing blocks, etc... The tutorial has many examples that will help you get started. Here is a working code, based on the JS interpreter example:
var workspace = Blockly.inject("editor-div", {
toolbox: document.getElementById('toolbox')
});
Blockly.JavaScript.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
Blockly.JavaScript.addReservedWords('highlightBlock');
Blockly.JavaScript['text_print'] = function(block) {
var argument0 = Blockly.JavaScript.valueToCode(
block, 'TEXT',
Blockly.JavaScript.ORDER_FUNCTION_CALL
) || '\'\'';
return "print(" + argument0 + ');\n';
};
function run() {
var code = Blockly.JavaScript.workspaceToCode(workspace);
var running = false;
workspace.traceOn(true);
workspace.highlightBlock(null);
var lastBlockToHighlight = null;
var myInterpreter = new Interpreter(code, (interpreter, scope) => {
interpreter.setProperty(
scope, 'highlightBlock',
interpreter.createNativeFunction(id => {
id = id ? id.toString() : '';
running = false;
workspace.highlightBlock(lastBlockToHighlight);
lastBlockToHighlight = id;
})
);
interpreter.setProperty(
scope, 'print',
interpreter.createNativeFunction(val => {
val = val ? val.toString() : '';
console.log(val);
})
);
});
var intervalId = setInterval(() => {
running = true;
while (running) {
if (!myInterpreter.step()) {
workspace.highlightBlock(lastBlockToHighlight);
clearInterval(intervalId);
return;
}
}
}, 500);
}
#editor-div {
width: 500px;
height: 150px;
}
<script src="https://rawgit.com/google/blockly/master/blockly_compressed.js"></script>
<script src="https://rawgit.com/google/blockly/master/blocks_compressed.js"></script>
<script src="https://rawgit.com/google/blockly/master/javascript_compressed.js"></script>
<script src="https://rawgit.com/google/blockly/master/msg/js/en.js"></script>
<script src="https://rawgit.com/NeilFraser/JS-Interpreter/master/acorn_interpreter.js"></script>
<xml id="toolbox" style="display: none">
<block type="text"></block>
<block type="text_print"></block>
<block type="controls_repeat_ext"></block>
<block type="math_number"></block>
</xml>
<div>
<button id="run-code" onclick="run()">run</button>
</div>
<div id="editor-div"></div>
编辑
添加了变量 running 来控制解释器。现在它会逐步执行，直到 running 变量设置为 false，因此 highlightBlock 函数中的 running = false 语句实际上用作断点。
编辑
引入了 lastBlockToHighlight 变量来延迟突出显示，因此最新的 运行 语句被突出显示，而不是下一个。不幸的是，JavaScript 代码生成器没有类似于 STATEMENT_PREFIX.
的 STATEMENT_SUFFIX 配置
最近我发布了一个库，可以让你 异步 与 blockly 交互，我为这样的游戏设计了这个库。
事实上，在文档中，您可以找到重制 maze 游戏的游戏演示。
该库名为 blockly-gamepad ，希望这就是您要找的内容。
这是演示的 gif。
工作原理
与 blockly 的正常使用相比，这是一种不同且简化的方法。
首先你必须定义块 （请参阅documentation中如何定义它们）。
您不必定义any code generator，所有与代码生成有关的事情都由库执行。
每个块生成一个请求。
// the request
{ method: 'TURN', args: ['RIGHT'] }
当执行一个块时，相应的请求将传递给您的 game.
class Game{
manageRequests(request){
// requests are passed here
if(request.method == 'TURN')
// animate your sprite
turn(request.args)
}
}
您可以使用 promises 来管理 异步动画 ，就像您的情况一样。
class Game{
async manageRequests(request){
if(request.method == 'TURN')
await turn(request.args)
}
}
方块和您的游戏之间的 link 由 游戏手柄 管理。
let gamepad = new Blockly.Gamepad(),
game = new Game()
// requests will be passed here
gamepad.setGame(game, game.manageRequest)
游戏手柄提供了一些方法来管理块的执行，从而管理 请求生成 。
// load the code from the blocks in the workspace
gamepad.load()
// reset the code loaded previously
gamepad.reset()
// the blocks are executed one after the other
gamepad.play()
// play in reverse
gamepad.play(true)
// the blocks execution is paused
gamepad.pause()
// toggle play
gamepad.togglePlay()
// load the next request
gamepad.forward()
// load the prior request
gamepad.backward()
// use a block as a breakpoint and play until it is reached
gamepad.debug(id)
您可以阅读完整文档 here。
编辑：我更新了库的名称，现在叫做blockly-gamepad。
我在做什么
我正在使用 Blockly 构建海龟图形应用程序。用户可以从块构建代码，然后 Blockly 引擎生成 JS 代码，绘制到 canvas.
我的问题是什么
Blockly 引擎生成 JS 代码，但 returns 它是一个字符串，我必须 eval() 才能绘制到 canvas。
我可以更改块的代码以生成不同的输出，但保持它尽可能简单很重要，因为用户可以阅读块输入背后的实际代码。所以我不想把它搞砸。
我想做什么
我完全控制了原子操作（go、turn等），所以我想在函数的开头插入一小段代码，这会延迟其余职能机构的执行。类似于：
function go(dir, dist) {
// wait here a little
// do the drawing
}
我认为它应该是同步的，它可以在执行流程中保持延迟。我尝试使用 setTimeout（异步，失败），promise（失败），循环中的时间戳检查（失败）。
在 JS 中甚至可能吗？
如果我理解你！
您可以构建一个新的 class 来处理 go(dir, dist) 函数的执行，并覆盖go函数在执行器中创建新的go。
function GoExecutor(){
var executeArray = []; // Store go methods that waiting for execute
var isRunning = false; // Handle looper function
// start runner function
var run = function(){
if(isRunning)
return;
isRunning = true;
runner();
}
// looper for executeArray
var runner = function(){
if(executeArray.length == 0){
isRunning = false;
return;
}
// pop the first inserted params
var currentExec = executeArray.shift(0);
// wait delay miliseconds
setTimeout(function(){
// execute the original go function
originalGoFunction(currentExec.dir, currentExec.dist);
// after finish drawing loop on the next execute method
runner();
}, currentExec.delay);
}
this.push = function(dir, dist){
executeArray.push([dir,dist]);
run();
}
}
// GoExecutor instance
var goExec = new GoExecutor();
// Override go function
var originalGoFunction = go;
var go = function (dir, dist, delay){
goExec.push({"dir":dir, "dist":dist, "delay":delay});
}
编辑 1：
现在你必须用你的函数和参数调用 callWithDelay， 执行器将通过将参数应用于指定函数来处理此调用。
function GoExecutor(){
var executeArray = []; // Store go methods that waiting for execute
var isRunning = false; // Handle looper function
// start runner function
var run = function(){
if(isRunning)
return;
isRunning = true;
runner();
}
// looper for executeArray
var runner = function(){
if(executeArray.length == 0){
isRunning = false;
return;
}
// pop the first inserted params
var currentExec = executeArray.shift(0);
// wait delay miliseconds
setTimeout(function(){
// execute the original go function
currentExec.funcNam.apply(currentExec.funcNam, currentExec.arrayParams);
// after finish drawing loop on the next execute method
runner();
}, currentExec.delay);
}
this.push = function(dir, dist){
executeArray.push([dir,dist]);
run();
}
}
// GoExecutor instance
var goExec = new GoExecutor();
var callWithDelay = function (func, arrayParams, delay){
goExec.push({"func": func, "arrayParams":arrayParams, "delay":delay});
}
你不能让代码同步等待。您唯一会得到的是一个冻结的浏览器 window.
你需要的是使用 js interpreter instead of eval. This way you can pause the execution, play animations, highlight currently executing blocks, etc... The tutorial has many examples that will help you get started. Here is a working code, based on the JS interpreter example:
var workspace = Blockly.inject("editor-div", {
toolbox: document.getElementById('toolbox')
});
Blockly.JavaScript.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
Blockly.JavaScript.addReservedWords('highlightBlock');
Blockly.JavaScript['text_print'] = function(block) {
var argument0 = Blockly.JavaScript.valueToCode(
block, 'TEXT',
Blockly.JavaScript.ORDER_FUNCTION_CALL
) || '\'\'';
return "print(" + argument0 + ');\n';
};
function run() {
var code = Blockly.JavaScript.workspaceToCode(workspace);
var running = false;
workspace.traceOn(true);
workspace.highlightBlock(null);
var lastBlockToHighlight = null;
var myInterpreter = new Interpreter(code, (interpreter, scope) => {
interpreter.setProperty(
scope, 'highlightBlock',
interpreter.createNativeFunction(id => {
id = id ? id.toString() : '';
running = false;
workspace.highlightBlock(lastBlockToHighlight);
lastBlockToHighlight = id;
})
);
interpreter.setProperty(
scope, 'print',
interpreter.createNativeFunction(val => {
val = val ? val.toString() : '';
console.log(val);
})
);
});
var intervalId = setInterval(() => {
running = true;
while (running) {
if (!myInterpreter.step()) {
workspace.highlightBlock(lastBlockToHighlight);
clearInterval(intervalId);
return;
}
}
}, 500);
}
#editor-div {
width: 500px;
height: 150px;
}
<script src="https://rawgit.com/google/blockly/master/blockly_compressed.js"></script>
<script src="https://rawgit.com/google/blockly/master/blocks_compressed.js"></script>
<script src="https://rawgit.com/google/blockly/master/javascript_compressed.js"></script>
<script src="https://rawgit.com/google/blockly/master/msg/js/en.js"></script>
<script src="https://rawgit.com/NeilFraser/JS-Interpreter/master/acorn_interpreter.js"></script>
<xml id="toolbox" style="display: none">
<block type="text"></block>
<block type="text_print"></block>
<block type="controls_repeat_ext"></block>
<block type="math_number"></block>
</xml>
<div>
<button id="run-code" onclick="run()">run</button>
</div>
<div id="editor-div"></div>
编辑
添加了变量 running 来控制解释器。现在它会逐步执行，直到 running 变量设置为 false，因此 highlightBlock 函数中的 running = false 语句实际上用作断点。
编辑
引入了 lastBlockToHighlight 变量来延迟突出显示，因此最新的 运行 语句被突出显示，而不是下一个。不幸的是，JavaScript 代码生成器没有类似于 STATEMENT_PREFIX.
STATEMENT_SUFFIX 配置
最近我发布了一个库，可以让你 异步 与 blockly 交互，我为这样的游戏设计了这个库。 事实上，在文档中，您可以找到重制 maze 游戏的游戏演示。 该库名为 blockly-gamepad ，希望这就是您要找的内容。
这是演示的 gif。
工作原理
与 blockly 的正常使用相比，这是一种不同且简化的方法。
首先你必须定义块 （请参阅documentation中如何定义它们）。
您不必定义any code generator，所有与代码生成有关的事情都由库执行。
每个块生成一个请求。
// the request
{ method: 'TURN', args: ['RIGHT'] }
当执行一个块时，相应的请求将传递给您的 game.
class Game{
manageRequests(request){
// requests are passed here
if(request.method == 'TURN')
// animate your sprite
turn(request.args)
}
}
您可以使用 promises 来管理 异步动画 ，就像您的情况一样。
class Game{
async manageRequests(request){
if(request.method == 'TURN')
await turn(request.args)
}
}
方块和您的游戏之间的 link 由 游戏手柄 管理。
let gamepad = new Blockly.Gamepad(),
game = new Game()
// requests will be passed here
gamepad.setGame(game, game.manageRequest)
游戏手柄提供了一些方法来管理块的执行，从而管理 请求生成 。
// load the code from the blocks in the workspace
gamepad.load()
// reset the code loaded previously
gamepad.reset()
// the blocks are executed one after the other
gamepad.play()
// play in reverse
gamepad.play(true)
// the blocks execution is paused
gamepad.pause()
// toggle play
gamepad.togglePlay()
// load the next request
gamepad.forward()
// load the prior request
gamepad.backward()
// use a block as a breakpoint and play until it is reached
gamepad.debug(id)
您可以阅读完整文档 here。
编辑：我更新了库的名称，现在叫做blockly-gamepad。