How to use custom blocks in image movement in blockly

Jakub Mitrega

unread,

Jul 9, 2022, 8:17:07 AM7/9/22

to Blockly

Hello, I need help in blockly with custom blocks. I want to make one module on my page to demonstrate block programming with an image, like scratch, but I don't know how to move the image in blockly using my custom blocks. I only have move forward and turn left and right blocks. I try it in javascript via css, but if I put only one block in the blocklyDiv, it starts, but if I want more blocks at once, it doesn't work, it doesn't work for me even if I combine turn and move. Could someone advise me on how to do it so that it works according to my ideas?

HTML Code:

</div>

Run</i></div>

Show </i></div>

</div>

</xml>

var workspace = Blockly.inject('blocklyDiv',

{

toolbox: document.getElementById('toolbox'),

zoom: {

controls: true,

}

});

Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'), workspace);

function runCode() {

var code = Blockly.workspaceToCode(workspace);

eval(code);

}

function showCode() {

var code = Blockly.workspaceToCode(workspace);

alert(code);

}

</script>

Customblocks.js:

Blockly.Blocks['move_forward'] = {

init: function () {

this.appendDummyInput()

.appendField("move forward");

this.setInputsInline(false);

this.setPreviousStatement(true, null);

this.setNextStatement(true, null);

this.setColour(210);

}

};

Blockly.Blocks['turn_right_left'] = {

init: function () {

this.appendDummyInput()

.appendField("turn")

.appendField(new Blockly.FieldDropdown([["left", "L"], ["right", "R"]]), "position");

this.setInputsInline(false);

this.setPreviousStatement(true, null);

this.setNextStatement(true, null);

this.setColour(330);

}

};

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

var dropdown_position = block.getFieldValue('position');

var cat = document.getElementsByClassName("cat")[0];

var code;

if (dropdown_position == "L") {

var go_left = cat.style.transform = "rotate(90deg)";

code = go_left;

} else {

var go_right = cat.style.transform = "rotate(-90deg)";

code = go_right;

}

return block;

};

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

var cat = document.getElementsByClassName("cat")[0];

var go_forward = cat.style.transform = "translate(20px)";

var code = go_forward;

return code;

};

Beka Westberg

unread,

Jul 11, 2022, 10:33:39 AM7/11/22

to blo...@googlegroups.com

Hello!

So in a way Blockly is just a very fancy string generator. That string just usually happens to be code =) Once Blockly generates the string, *then* it needs to be run/evaluated. It looks like right now, the block-code generators you've posted are trying to run/evaluate code where they should be generating a string.

If you log the output of Blockly.JavaScript.workspaceToCode() I imagine you're going to get something like "rotate(90deg)translate(20px)". Which isn't what you want. You want:

```

var cat = document.getElementsByClassName("cat")[0];

cat.style.transform = "rotate(90deg)";

var cat = document.getElementsByClassName("cat")[0];

cat.style.transform = "translate(20px)";

```

Which you can then evaluate.

So you want your block-code generators to look something like:

```

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

var code = `var cat = document.getElementsByClassName("cat")[0];\n`;
code += `cat.style.transform = "translate(20px)";\n`;
return code;
};

```

I hope that helps! If you have any further questions please reply!
--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/890d9930-d8cd-4e08-8309-9fa1233f66d9n%40googlegroups.com.

Jakub Mitrega

unread,

Jul 11, 2022, 12:29:05 PM7/11/22

to Blockly

Hello, it still doesn't work as it should if they are blocks and can be stacked one after the other, so the code should also work one after the other somehow, but it doesn't work. It reports some errors in the console but I don't know what it means. Also, if I put, for example, two move forward blocks, then turn left and then two move forward blocks, I want the stick figure to stay in that turn and go straight in the direction it is facing forward. Would you please know how to do it?

Error messages:

Dne pondělí 11. července 2022 v 16:33:39 UTC+2 uživatel bwes...@google.com napsal:

Beka Westberg

unread,

Jul 11, 2022, 5:19:36 PM7/11/22

to blo...@googlegroups.com

Hello again :D

As I said before, in a way Blockly is just a very fancy string generator. What string you want to generate and what you want that string to do aren't necessarily things the Blockly team can help with :/

I can tell you that you probably want to add some delay between your different steps. Here's a good article about delay in JavaScript =)

I hope that helps! If you have any further questions please reply!
--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/7c982619-30a0-46b1-89f5-ecc2332ebaedn%40googlegroups.com.

Reply all

Reply to author

Forward