What is this?
BlockLike.js is an educational JavaScript library. It bridges the gap between block-based and text-based programming.
BlockLike.js is designed following Scratch concepts, methods and patterns. The screen is a centered Stage. Interaction is with Sprites. Code is executed in a "paced" manner. Scratch block code and BlockLike.js text code are meant to be as literally similar as possible.
BlockLike.js is written in ES6/ES7 flavored JavaScript. It is environment independent. It can be used anywhere modern JavaScript runs.
Sounds interesting?
Get Started or learn more at the FAQ and Docs.
Side-by-Side Examples
Hello World
BlockLike JavaScript code
let stage = new blockLike.Stage();
let sprite = new blockLike.Sprite();
sprite.addTo(stage);
sprite.whenFlag(function() {
this.say('Hello!');
});
Open in CodePen.io
Pattern Drawing
BlockLike JavaScript code
let stage = new blockLike.Stage();
let sprite = new blockLike.Sprite();
sprite.addTo(stage);
function pattern(sides, size, times) {
this.penClear();
for (let i = 0; i < times; i += 1) {
this.penDown();
for (let j = 0; j < sides; j += 1) {
this.move(size);
this.turnRight(360 / sides);
}
this.penUp();
this.turnRight(360 / times);
}
}
sprite.whenFlag(function() {
this.setPenSize(5);
this.invoke(pattern, [5, 100, 24]);
});
Open in CodePen.io
Homepage Interactive
Scratch block code
Stage Backdrop:
Sprite Costume 1:
Sprite Costume 2:
Confetti Costume:
See at scratch.mit.edu
BlockLike JavaScript code
const stage = new blockLike.Stage();
const sprite = new blockLike.Sprite();
const backdrop = new blockLike.Backdrop({
color: '#434343',
});
const costume = new blockLike.Costume({
image: 'https://www.blocklike.org/images/sheep_step.png',
});
const confetti = new blockLike.Sprite('https://www.blocklike.org/images/confetti.svg');
stage.addBackdrop(backdrop);
stage.nextBackdrop();
sprite.addTo(stage);
sprite.addCostume(costume);
confetti.addTo(stage);
confetti.hide();
sprite.setRotationStyle('left-right');
sprite.setPenColor('#eee');
sprite.setPenSize(5);
const bahhh = 'https://www.blocklike.org/sounds/bleat.wav';
let answer;
sprite.whenFlag(function () {
sprite.goTo(0, -100);
for (let i = 1; i <= 10; i += 1) {
const os = Array(i).join('o');
this.sayWait(`Hello${os} World!`, 0.2);
}
this.sayWait('Arrow keys move me!', 2);
});
function pattern(sides, size, times) {
for (let i = 0; i < times; i += 1) {
this.penDown();
for (let j = 0; j < sides; j += 1) {
this.move(size);
this.turnRight(360 / sides);
}
this.penUp();
this.turnRight(360 / times);
}
}
sprite.whenClicked(function () {
answer = this.ask('I will draw! How many sides?');
if (answer < 10 && answer > 2) {
this.changeY(100);
this.invoke(pattern, [answer, 50, 12]);
this.changeY(-100);
} else {
this.say('3 to 9 sides only...');
}
});
sprite.whenKeyPressed(32, function () {
for (let i = 0; i < 4; i += 1) {
this.changeSize(-10);
this.wait(0.2);
}
this.penClear();
this.setSize(100);
});
function edgeBump(s) {
if (s.isTouchingEdge()) {
s.playSound(bahhh);
s.turnRight(180);
s.move(20);
}
}
sprite.whenKeyPressed(39, function () {
this.changeX(20);
this.pointInDirection(90);
this.nextCostume();
edgeBump(sprite);
});
sprite.whenKeyPressed(37, function () {
this.changeX(-20);
this.pointInDirection(270);
this.nextCostume();
edgeBump(sprite);
});
confetti.whenFlag(function () {
while (true) {
this.clone();
this.wait(0.5);
}
});
function randomX(){
return (Math.random() * stage.width) - (stage.width / 2);
}
function randomHue(){
return Math.floor(Math.random() * 360);
}
confetti.whenCloned(function() {
stage.sendSpriteToBack(this);
this.goTo(randomX(), stage.height / 2);
this.turnRight(Math.random() * 75);
this.css('filter',`hue-rotate(${randomHue()}deg)`);
this.addTo(stage);
this.show();
this.glide(5, randomX(), -stage.height / 2 );
this.wait(5);
this.removeFrom(stage);
});
Open in codepen.io
Getting Started
The easiest way to start with BlockLike.js is using CodePen.IO
Disabling Auto-Updating Preview makes it easier to code.
In CodePen, Click: Settings > Behavior and uncheck box at bottom.
Alternatively, you can create an index.html file and include BlockLike.js with the script tag: