google blockly Jsinterpreter和解释器步骤代码

Question

我是网页开发人员，试图开发迷宫游戏使用谷歌Blockly。

我在这里构建，当我试图运行这个块时，我有一些块，它工作得很好，但问题是它没有突出显示当前正在执行的函数。

这是用于理解的代码，我有这个块代码：

Blockly.Blocks['move_forward'] = {
    init: function() {
    this.appendDummyInput()
    .appendField("move forward");
    this.setPreviousStatement(true);
    this.setNextStatement(true);
    this.setColour(290);
    this.setTooltip('');
    this.setHelpUrl('http://www.example.com/');
  }
};

Blockly.Blocks['turn_left'] = {
   init: function() {
   this.appendDummyInput()
   .appendField("turn")
   .appendField(new Blockly.FieldDropdown([["left", "l"], ["right", "r"]]), "NAME");
    this.setPreviousStatement(true);
    this.setNextStatement(true);
    this.setColour(290);
    this.setTooltip('');
    this.setHelpUrl('http://www.example.com/');
  }
};

Blockly.Blocks['turn_right'] = {
    init: function() {
    this.appendDummyInput()
    .appendField("turn")
    .appendField(new Blockly.FieldDropdown([["right", "r"], ["left", "l"]]), "NAME");
    this.setPreviousStatement(true);
    this.setNextStatement(true);
    this.setColour(290);
    this.setTooltip('');
    this.setHelpUrl('http://www.example.com/');
  }
};
and this is related to Blockly javascript

Blockly.JavaScript['move_forward'] = function(block) {
  // TODO: Assemble JavaScript into code variable.
  // var code = 'moveForward(); \n';
  return 'moveForward(\'block_id_' + block.id + '\');\n';
};

Blockly.JavaScript['turn_left'] = function(block) {
  var dropdown_name = block.getFieldValue('NAME');
  // TODO: Assemble JavaScript into code variable.
  // var code = 'turnLeft();\n';
  return 'turnLeft(\'block_id_' + block.id + '\');\n';
};

Blockly.JavaScript['turn_right'] = function(block) {
  var dropdown_name = block.getFieldValue('NAME');
  // TODO: Assemble JavaScript into code variable.
  // var code = 'turnRight();\n';
  return 'turnRight(\'block_id_' + block.id + '\');\n';
};

I have moveForward(), turnLeft(), turnRight() functions.

var myInterpreter = null;
    function interpret(){
     var code = Blockly.JavaScript.workspaceToCode(workspace);
     myInterpreter = new Interpreter(code, initApi);
     Blockly.JavaScript.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
     Blockly.JavaScript.addReservedWords('highlightBlock');
     console.log(myInterpreter);
     myInterpreter.run();
    }

function initApi(interpreter, scope){
    var wrapper;
    wrapper = function(id) {
    moveForward(0);
    };
    interpreter.setProperty(scope, 'moveForward',
    interpreter.createNativeFunction(wrapper));
    wrapper = function(id) {
    turnLeft(1);
    };
    interpreter.setProperty(scope, 'turnLeft',
    interpreter.createNativeFunction(wrapper));
    wrapper = function(id) {
    turnRight(2);
    };
    interpreter.setProperty(scope, 'turnRight',
    interpreter.createNativeFunction(wrapper));
    }

如何编写解释器步骤代码，我需要突出显示的功能，也是目前在Blockly中执行的任何功能。

请帮助解决这个问题。

Answer 1

尝试将此代码添加到init函数中

  Add an API function for highlighting blocks.
  var wrapper = function(id) {
    id = id ? id.toString() : '';
    return interpreter.createPrimitive(highlightBlock(id));
  };
  interpreter.setProperty(scope, 'highlightBlock',
      interpreter.createNativeFunction(wrapper));

和init函数外部的这个函数

var highlightPause = false;
function highlightBlock(id) {
  workspace.highlightBlock(id);
  highlightPause = true;
}

这对我很有效，希望你也能

Answer 2

如果您使用的是JS Intrepeter，则需要创建一个包装器函数。

function initApi(interpreter, scope) {
var wrapper = function(id) {
    id = id ? id.toString() : '';
    return interpreter.createPrimitive(workspace.highlightBlock(id));
};
interpreter.setProperty(scope, 'highlightBlock',
    interpreter.createNativeFunction(wrapper));
}

然后，在运行代码之前，添加以下行。

Blockly.JavaScript.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
var code = Blockly.JavaScript.workspaceToCode(workspace);
var JsInterpreter = new Interpreter(code, initApi);