blocklyでobjectを動かす。 その11

4574 ワード
錬成陣 Blockly Plunker Blockly テキストリンク

概要

blocklyでobjectを動かして見る。
錬成陣、やってみた。

写真

ステージを作る。

<canvas id='canvas' width='460' height='460'></canvas>

ブロックを書く。


Blockly.Blocks.rect = {
    init: function() {
        this.jsonInit({
        message0: "rect %1",
        args0: [{
            type: "input_value",
            name: "TEXT"
        }],
        previousStatement: null,
        nextStatement: null,
        style: "text_blocks",
        tooltip: Blockly.Msg.TEXT_PRINT_TOOLTIP,
        helpUrl: Blockly.Msg.TEXT_PRINT_HELPURL
    })
}};
Blockly.Blocks.line = {
    init: function() {
        this.jsonInit({
        message0: "line %1",
        args0: [{
            type: "input_value",
            name: "TEXT"
        }],
        previousStatement: null,
        nextStatement: null,
        style: "text_blocks",
        tooltip: Blockly.Msg.TEXT_PRINT_TOOLTIP,
        helpUrl: Blockly.Msg.TEXT_PRINT_HELPURL
    })
}};
Blockly.Blocks.circle = {
    init: function() {
        this.jsonInit({
        message0: "circle %1",
        args0: [{
            type: "input_value",
            name: "TEXT"
        }],
        previousStatement: null,
        nextStatement: null,
        style: "text_blocks",
        tooltip: Blockly.Msg.TEXT_PRINT_TOOLTIP,
        helpUrl: Blockly.Msg.TEXT_PRINT_HELPURL
    })
}};

フローを書く。

objectを書く。

Blockly.JavaScript.rect = function(a) {
    return "strokeRect(" + (Blockly.JavaScript.valueToCode(a, "TEXT", Blockly.JavaScript.ORDER_NONE) || "''") + ");\n"
};
Blockly.JavaScript.line = function(a) {
    return "strokeLines(" + (Blockly.JavaScript.valueToCode(a, "TEXT", Blockly.JavaScript.ORDER_NONE) || "''") + ");\n"
};
Blockly.JavaScript.circle = function(a) {
    return "strokeCircle(" + (Blockly.JavaScript.valueToCode(a, "TEXT", Blockly.JavaScript.ORDER_NONE) || "''") + ");\n"
};

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.translate(200, 200);
ctx.scale(0.9, 0.9);

function strokeStyle(s) {
    ctx.strokeStyle = s;
}
function setShadow(s0, s1, s2, s3) {
    ctx.shadowColor = s0;
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 0;
    ctx.shadowBlur = 5;
}
function beginPath() {
    ctx.beginPath();
}
function lineWidth(s) {
    ctx.lineWidth = s; 
}
function moveTo(s, e) {
    ctx.moveTo(s, e);
}
function lineTo(s, e) {
    ctx.lineTo(s, e);
}
function stroke() {
    ctx.stroke();
}
function strokePolygon(x, y, size, vertex, angle) {
    var cx;
    var cy;
    var nx;
    var ny;
    beginPath();  
    for (var i = 0; i < vertex; i++)
    {
        cx = size * Math.cos(((2 * Math.PI) / vertex) * i - angle / 180);
        cy = size * Math.sin(((2 * Math.PI) / vertex) * i - angle / 180);
        nx = size * Math.cos(((2 * Math.PI) / vertex) * (i + 1) - angle / 180);
        ny = size * Math.sin(((2 * Math.PI) / vertex) * (i + 1) - angle / 180);
        ctx.moveTo(cx + x, cy + y);
        ctx.lineTo(nx + x, ny + y);
    }
    stroke();
}
function strokeLines(s0, s1, s2, s3, s4, s5) {
    beginPath();
    ctx.moveTo(s0, s1);
    ctx.lineTo(s2, s3);
    ctx.lineTo(s4, s5);
    ctx.lineTo(s0, s1);
    stroke();
}
function strokeRect(s0, s1, s2, s3) {
    beginPath();
    ctx.rect(s0, s1, s2, s3);
    stroke();
}
function strokeCircle(s0, s1, s2) {
    beginPath();
    ctx.arc(s0, s1, s2, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
    stroke();
}
function arc(s0, s1, s2, s3, s4, s5) {
    ctx.arc(s0 , s1, s2, s3, s4, s5);
}

lineWidth(5);
strokeStyle("white");
setShadow("white", 0, 0, 10);

成果物

以上。