BlockLike.js aims to ease the transition from MIT Scratch programming to JavaScript programming

BlockLike.js is an educational JavaScript library that attempts to extend the block-based Scratch learning experience to JavaScript text programming.

Scratch is a visual programming environment that aims to help kids learn coding basics by creating interactive stories, games, and animations. According to BlockLike.js creator Ron Ilan, while Scratch does a great job of enabling the learning experience, the gap with text-based programming remains large. Web programming in particular, despite its appeal as an accessible environment, is hard to crack for newbies, Ilan says.

I realized that if we are to progress, we need something that will help us bridge the gap between Scratch and the web. Something that will be to JavaScript what training wheels are for bicycles.

The relationship between Scratch and BlockLike.js is close enough that it can be said that there is a direct mapping of abstractions. Scratch provides basic objects, including sprites, costumes, backdrops, and more, that can be manipulated to change their position, movement, and appearance. It also provides control blocks corresponding to loops, if-then-else conditions, waits, etc.

BlockLike.js defines Scratch-like objects, methods, and models in an attempt to make the transition from one environment to another smooth.

What you have learned, practiced and mastered at Scratch is transferable. Scratch and BlockLike.js are intended to be used simultaneously. You can try something in Scratch and then translate it right away on the web. You can go the other way if you want. At the basic level, they are interchangeable.

So, BlockLike.js provides sprites, costumes and backdrops, stage, events, etc. The following code snippet shows how to create a scene and fill it with a few sprites, customize them, and change their state in response to an event:

let stage = new blockLike.Stage();

let sprite = new blockLike.Sprite();
sprite.addTo(stage);

let backdrop = new blockLike.Backdrop();
backdrop.addTo(stage);

let costume = new blockLike.Costume();
costume.addTo(sprite);

sprite.whenClicked(function() {
 while(true){
   this.nextCostume();
   this.move(10);
   this.wait(0.2);
 }
});

A major difference between Scratch and JavaScript is how they handle loops, Ilan says. Scratch carries what is inherently a on the beat execution. This means that a Scratch block will function as a stand-alone step producing a side effect in the user interface. This even applies to loop blocks and is essential for creating animation effects. A simple JavaScript loop, on the other hand, simply gobbles up the main thread and runs to completion without ever stopping.

To manage such on the beat behavior, BlockLike.js does not define an event loop, as it is common in GUI frameworks or game engines. Instead, it uses JavaScript async/await abstractions to activate on the beat execution. This requires the programmer to explicitly use the wait operation to relinquish control and give the UI a chance to refresh:

sprite.whenClicked(function() {
 while(true) {
   this.changeY(10);
   this.wait(0.2);
   this.changeY(-10);
   this.wait(0.2);
 }
});

For the same reason, you can define JavaScript functions, corresponding to the Scratch custom blocks, as you normally would, but you are supposed to call them using the invoke method.

To get started with BlockLike.js, you can use it from CodePen.io and access its full documentation. The project is also available on GitHub.


Source link

About Mariel Baker

Check Also

Greek National Opera announces alternative stage lineup

The Greek National Opera has announced its 2021 lineup for the alternative scene. For the …