google blockly Jsinterpreter and interpreter step code

Question

I am web developer and trying to developing maze game using Google Blockly.

I am strucking here, i have Blocks when i am trying to run this blocks its working fine, but the problem is its not highlighting which function executing currently.

Here is the code for understanding, and I have this Blocks code:

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));
    }

How to write interpreter step code, and i need to highlighting functions also whatever function executing currently in Blockly.

Please help with this problem.

Answer 1

Try adding this code into your init function

  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));

and this function outside the init function

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

it works for me, hope for you too