Learn BLOCKLY with Real Code Examples

document.addEventListener('keydown', function(e) {
    if (e.key === 'ArrowRight') sprite.x += 10;
    if (e.key === 'ArrowLeft') sprite.x -= 10;
});

A Blockly example where arrow-key input moves a sprite. Code shown is the JavaScript Blockly would generate.

window.alert('Hello World!');

Displays a browser alert using Blockly's 'text' and 'alert' blocks.

for (var i = 0; i < 10; i++) {
    console.log('Loop iteration: ' + i);
}

Repeats an action 10 times using a Blockly counting loop.

var result = 5 + 7;
console.log(result);

Adds two numbers using Blockly math blocks.

var score = 0;
score += 5;
console.log(score);

Demonstrates creating and updating a variable.

var x = 12;
if (x > 10) {
    console.log('Greater than 10');
} else {
    console.log('10 or less');
}

Uses condition blocks to compare a number.

function greet(name) {
    console.log('Hello ' + name);
}

greet('Alice');

A function created using Blockly's 'procedures' blocks.

function update() {
    sprite.x += 2;
    requestAnimationFrame(update);
}

update();

A loop that updates a position every animation frame.

var n = Math.floor(Math.random() * 100);
console.log('Random:', n);

Uses Blockly math blocks to pick a random number.

var items = ['apple','banana','orange'];
for (var i = 0; i < items.length; i++) {
    console.log(items[i]);
}

Creates a list and iterates through it using Blockly list/loop blocks.