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

Scratch block code


Sprite Costume 1:
See at scratch.mit.edu

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

Scratch block code


Sprite Costume 1:
See at scratch.mit.edu

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

Additional Scratch and BlockLike.js info is at the FAQ page. A whole bunch of examples are in the examples section.

Getting Started

Choose one of three easy ways:

Playing around with CodePen

Tip:
Disabling Auto-Updating Preview makes it easier to code.
In CodePen, Click: Settings > Behavior and uncheck box at bottom.

Working on projects with replit

Steps:
  1. Signup & Login
  2. Create a new rpel with language HTML, CSS, JS
  3. In index.html find <script src="script.js"></script> inside the body tag and include BlockLike.js above it: 
    <script src="https://cdn.jsdelivr.net/npm/blocklike@1.0.6/dist/blocklike-1.0.6.min.js"></script>
  4. Write your code in script.js

Setting things locally

Steps:
  1. Create an index.html file.
  2. Include BlockLike.js in body with the script tag: 
    <script src="https://cdn.jsdelivr.net/npm/blocklike@1.0.6/dist/blocklike-1.0.6.min.js"></script>
  3. Write your code in script.js file.
  4. Include the script file in you html document 
    <script src="script.js"></script>
  5. Open index.html file in the browser. No webserver needed for vast majority of functionality.