How do i run blocks in javascript?
example:
sprite.move(10) would move the sprite 10 steps,
sprite.changeX(5) would change the x by 5,
sprite.x would return the x position of the sprite
var name = sprite.ask('Whats your name?') would set the variable name to the ask block output,
addVar('var') would add an variable in snap called "var", (i mean you could do like var [var] = [this] but yeah i want to add the variable in the snap)
customBlock.rectangle() would execute the custom pen block "rectangle",
penDown() would set the pen down,
isPenDown would report true if the pen is true,
And so on, How i do that in the run(js function () (code)) ?
I think that if you want to explore the interface between Snap! and JS, you have to read the source code. So for example, I read your question and thought "what's a block that runs some other block a bunch?" and the first one I thought of was FOR EACH. So, read objects.js and search for "for each" and you find this:
doForEach: {
type: 'command',
category: 'lists',
spec: 'for each %upvar in %l %cla',
defaults: [localize('item')]
},
so now you know that the code that implements the FOR EACH block has the JS name "doForEach" and so you can search all the source files for that name, and you find it in threads.js:
Process.prototype.doForEach = function (upvar, list, script) {
// perform a script for each element of a list, assigning the
// current iteration's element to a variable with the name
// specified in the "upvar" parameter, so it can be referenced
// within the script.
// Distinguish between linked and arrayed lists.
var next;
if (this.context.accumulator === null) {
this.assertType(list, 'list');
this.context.accumulator = {
source : list,
remaining : list.length(),
idx : 0
};
}
if (this.context.accumulator.remaining === 0) {
return;
}
this.context.accumulator.remaining -= 1;
if (this.context.accumulator.source.isLinked) {
next = this.context.accumulator.source.at(1);
this.context.accumulator.source =
this.context.accumulator.source.cdr();
} else { // arrayed
this.context.accumulator.idx += 1;
next = this.context.accumulator.source.at(this.context.accumulator.idx!
}
this.pushContext('doYield');
this.pushContext();
this.context.outerContext.variables.addVar(upvar);
this.context.outerContext.variables.setVar(upvar, next);
this.evaluate(script, new List(/*[next]*/), true);
};
The narrow answer to your question is the last line of that, where THIS.EVALUATE is called. But that may seem kind of weird, because you'd expect running the block to be inside a JS loop, rather than at the very end of the JS code. But a drawback of running in a browser is that every so often you have to let the browser deal with other windows by yielding, and when you get to run again you can't just continue where you left off; the browser doesn't save any state about your computation. So all that stuff about contexts is where we remember what to do next, after evaluating the block.
Another thing you have to learn is that commands and reporters work very differently. So besides reading FOR EACH, you might also want to read MAP to find out that part.
yes, there should be a block that converts [blocks] to snap!'s javascript
like:
[scratchblocks]
js code of ({move (10) steps}:: grey ring) :: reporter operators
[/scratchblocks]
The closest I know of: shift-click settings, JIT compiler support (It is red and hidden with shift-click; anything red and hidden with shift-click is experimental and could be buggy or unfinished)
Snap! is not a compiler. There is no JS code corresponding to a Snap! block. There is JS code that implements a block, but it's not a translation of the block. So, for example, if you say MOVE 87 STEPS, there's no piece of JS anywhere that has the number 87 compiled into it. @dardoro suggests Snap2JS, which is a compiler, but that's not how Snap! itself works.
Just do
[scratchblocks]run(JavaScript function \( []@delInput@addInput \) \{ [this.forward(10);] }::operators)@addInput::control[/scratchblocks]
("This" is referring to the sprite that runs the function.)
