Scratch ブロック on HTML

ベーシックな描画方法

scratchblocks.renderMatching() を使用して、CSSセレクタで指定した要素をまとめて描画します。

  @greenFlag がクリックされたとき
  x座標を (0) 、y座標を (0) にする
  ずっと
    (10)回繰り返す
      @turnright (10) 度回す
      (5) 歩動かす
    end
    次のコスチュームにする
  end

  このスプライトがクリックされたとき
  もし <(向き) = [90]> なら
    ペンを下ろす
  でなければ
    ペンを上げる
  end

インラインで描画

scratchblocks.renderMatching() の第2引数 option に inline: true を指定すると、スタンプのようにインラインでブロックを描画できます。

サイズを拡大して描画

描画されたSVGを拡大して表示します。