Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 120 lines (105 sloc) 3.5 KB
<!DOCTYPE html>
<meta charset="utf-8">
<title>Scratch ブロック on HTML</title>
<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js"></script>
<script src="https://scratchblocks.github.io/js/translations-v3.1-min.js"></script>
<h1>Scratch ブロック on HTML</h1>
<h2>ベーシックな描画方法</h2>
<p>scratchblocks.renderMatching() を使用して、CSSセレクタで指定した要素をまとめて描画します。</p>
<pre id="blocks1" class="blocks">
@greenFlag がクリックされたとき
x座標を (0) 、y座標を (0) にする
ずっと
(10)回繰り返す
@turnright (10) 度回す
(5) 歩動かす
end
次のコスチュームにする
end
</pre>
<pre id="blocks2" class="blocks">
このスプライトがクリックされたとき
もし <(向き) = [90]> なら
ペンを下ろす
でなければ
ペンを上げる
end
</pre>
<h2>インラインで描画</h2>
<p>scratchblocks.renderMatching() の第2引数 option に inline: true を指定すると、<code class=b>スタンプ</code>のようにインラインでブロックを描画できます。</p>
<h2>サイズを拡大して描画</h2>
<p>描画されたSVGを拡大して表示します。</p>
<code id="big_blocks">
@greenFlag がクリックされたとき
x座標を (0) 、y座標を (0) にする
ずっと
(10)回繰り返す
@turnright (10) 度回す
(5) 歩動かす
end
次のコスチュームにする
end
</code>
<code id="middle_blocks">
@greenFlag がクリックされたとき
x座標を (0) 、y座標を (0) にする
ずっと
(10)回繰り返す
@turnright (10) 度回す
(5) 歩動かす
end
次のコスチュームにする
end
</code>
<code id="small_blocks">
@greenFlag がクリックされたとき
x座標を (0) 、y座標を (0) にする
ずっと
(10)回繰り返す
@turnright (10) 度回す
(5) 歩動かす
end
次のコスチュームにする
end
</code>
<script>
// 'pre.blocks' セレクタで指定された要素をまとめて描画
scratchblocks.renderMatching('pre.blocks', {
languages: ['ja', 'en'],
render: function(doc, cb) {
doc.render(function(svg) {
var el = document.createElement('div');
el.appendChild(svg);
cb(el);
});
},
});
// インラインで描画
scratchblocks.renderMatching("code.b", {
languages: ['ja', 'en'],
inline: true
});
// スケールを変更する場合のブロック描画関数
// renderMatching()で呼び出される doc.render()ではSVGのサイズが取得できないため、
// parse() と doc.render() を使用して描画する。
var renderScaledBlocks = function(target, scale) {
var doc = scratchblocks.parse(target.innerHTML, {
languages: ['ja', 'en'],
});
doc.render(function(svg) {
target.innerHTML = "";
target.appendChild(svg);
//SVGの拡大処理
svg.setAttribute("width", svg.clientWidth * scale);
svg.setAttribute("height", svg.clientHeight * scale);
svg.setAttribute("viewBox", "0 0 " + svg.clientWidth / scale + " " + svg.clientHeight / scale );
});
};
//各HTML要素に記述したスクリプトを元にブロックを描画
var titleBlocks = document.getElementById('big_blocks');
renderScaledBlocks(titleBlocks, 2.0);
var middleBlocks = document.getElementById('middle_blocks');
renderScaledBlocks(middleBlocks, 1.5);
var smallBlocks = document.getElementById('small_blocks');
renderScaledBlocks(smallBlocks, 1.0);
</script>