How can i run my own block function?

EMILIO CALDERON

unread,

Mar 11, 2016, 11:47:33 PM3/11/16

to Blockly

I was building a blockly app, and i customized my own blocks and stuff but when you create your own block in block factory, you can get the function of that block isn't? so...

My question is...

how can i put methods on the blocks? for example....

Blockly.Blocks['my_block'] = {

init: function () {

this.appendDummyInput()

.appendField("Avanza una posición");

this.setPreviousStatement(true);

this.setNextStatement(true);

this.setColour(290);

this.setTooltip('');

this.setHelpUrl('http://www.example.com/');

}

};

Blockly.JavaScript['my_block'] = function (block) {

// TODO: Assemble JavaScript into code variable.

return DO SOMETHING

};

someone who can help?

Avi

unread,

Mar 12, 2016, 2:30:03 AM3/12/16

to Blockly

Hi Emilio,

Not sure what you are trying to achieve. Typically, after making a custom block, you want to show it in the workspace just like the standard blocks .
See here .. https://groups.google.com/d/msg/blockly/QcHgVzL8YIE/6UI_aOpIBAAJ

If you want to add more methods to the block you can always do ..

Blockly.Blocks['my_block'] = {

init: function () {

this.appendDummyInput()

.appendField("Avanza una posición");

this.setPreviousStatement(true);

this.setNextStatement(true);

this.setColour(290);

this.setTooltip('');

this.setHelpUrl('http://www.example.com/');

},
   myfunction: function() {
       //your code here
   },
   onemorefunction: function() {
}

}

Regards
Avi

EMILIO CALDERON

unread,

Mar 12, 2016, 2:59:32 AM3/12/16

to Blockly

Hi Avi! thanks for your answer!

Im trying to do a game... and I was trying to understand how this works and have this block:

//Block

Blockly.Blocks['Move'] = {

init: function () {

this.appendDummyInput()

.appendField("Move left");

this.setPreviousStatement(true);

this.setNextStatement(true);

this.setColour(290);

this.setTooltip('');

this.setHelpUrl('http://www.example.com/');

}

};

// and this is when the block executes the function? or how?

Blockly.JavaScript['Move'] = function (block) {

// TODO: Assemble JavaScript into code variable.

var code = '';

return code;

};

i know how to show it in a workspace its ok... but i want to move my character with the blocks when i execute my app with a button... here is my function move:

function teclado(datos) {

var codigo = datos.keyCode;

zombi.x1 = zombi.x;

zombi.y1 = zombi.y;

if (codigo == teclas.UP)

{

zombi.y -= zombi.velocidad;

}

if (codigo == teclas.DOWN) {

zombi.y += zombi.velocidad;

}

dibujar();

}

any suggest? or idea? i'd appreciate it

Avi

unread,

Mar 12, 2016, 5:20:29 AM3/12/16

to Blockly

Emilio,

I would use a dropdown or a checkbox in the block so that the user can indicate the direction.

here's how you could write the block and the code generation function .

Blockly.Blocks['My_Move'] = {
  init: function() {
    this.appendDummyInput()
        .appendField(new Blockly.FieldDropdown([["UP", "UP"], ["DOWN", "DOWN"]]), "DIRECTION");  //could use Spanish for UP and DOWN


    this.setTooltip('');
    this.setHelpUrl('http://www.example.com/');
  }
};

Blockly.JavaScript['My_Move'] = function(block) {
  var direction = block.getFieldValue('DIRECTION');
  if (direction == 'UP') {
    var code = 'teclado({keyCode: teclas.UP});\n';
  } else {
    var code = 'teclado({keyCode: teclas.DOWN});\n';
  }
  return code;
};

Regards
Avi

EMILIO CALDERON

unread,

Mar 12, 2016, 11:52:42 AM3/12/16

to Blockly

Thank you Avi.. so, i have a question about

at the moment when compiling the code... what can i use in the run button?

Avi

unread,

Mar 12, 2016, 1:46:08 PM3/12/16

to Blockly

Emilio,

The following pages will guide you , on how to generate the code and run it.

https://developers.google.com/blockly/installation/code-generators#generating_code
https://developers.google.com/blockly/installation/js-interpreter#dont_be_eval

It's quite simple. Let us know , if you encounter difficulties.

Regards
Avi

EMILIO CALDERON

unread,

Mar 12, 2016, 3:49:39 PM3/12/16

to Blockly

I've finally ran the game! thank's for your help Avi! it works!

EMILIO CALDERON

unread,

Mar 13, 2016, 12:08:48 AM3/13/16

to Blockly

Hey Avi sorry for disturb you... i was testing my game app... and i told you that it works fine! but i have a little detail when i run my code... my character moves... just where it must be i mean, i can't watch it like the "Maze" game when you run the app and you can see how the character moves... the thing is... i want to see how my character moves when i ran the code...

this is my code...

//turn block function

Blockly.JavaScript['turn'] = function (block) {

direction = block.getFieldValue('DIRECTION');

if (direction == 'Derecha ↻') {

var code = 'girarDerecha();\n'

}

if (direction == 'Izquierda ↺') {

var code = 'girarIzquierda();\n'

}

return code;

};

and it works fine... executes the functions very well and this is the run button code:

function run() {

try {

var code = Blockly.JavaScript.workspaceToCode(espacio);

eval(code);

} catch (e) {

alert(e.message);

}

do you know what im doing wrong?

Avi

unread,

Mar 13, 2016, 1:41:17 AM3/13/16

to Blockly

Hi Emilio,

No problem. Just glad to help if I can.

Any animation you want to show, you will have to do it yourself in girarDerecha() and/or girarIzquierda(). You could use normal javascript timeouts to move the character step by step. Or you could use any animation library to do it. As far as I can tell, the maze app does not do an eval(), it uses the JSInterpreter to run things at a granular level (step by step). Now, depending on your setup (not sure how girarDerencha() does things) it might work to use the JSInterpreter and run step by step.

In short, Blockly just helps you write the code, say MOVE 10 STEPS, TURN RIGHT 50. How you show the stepping with animation is up to you. You could see this as the left part (where the character moves) as totally disconnected from the right part (Blockly Editor).

Hope this helps..
Avi

Reply all

Reply to author

Forward