Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

scratchblocks-html-sample-ja/index.html

Go to file
 
 
Cannot retrieve contributors at this time
executable file 119 lines (105 sloc) 3.5 KB
Raw Blame
Open in GitHub Desktop
<!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>