blocklyでobjectを動かす。 その3

3301 ワード
ctx Blockly Plunker Blockly テキストリンク

概要

blocklyでobjectを動かして見る。
canvasに、線引いてみた。

ステージを作る

<canvas id='world' width="450" height="450"></canvas>

ブロックを書く。

Blockly.Blocks.kame_turn = {
    init: function() {
        this.jsonInit({
        message0: "tern %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.kame_walk = {
    init: function() {
        this.jsonInit({
        message0: "walk %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.kame_turn = function(a) {
    return "kame0.turn(" + (Blockly.JavaScript.valueToCode(a, "TEXT", Blockly.JavaScript.ORDER_NONE) || "''") + ");\n"
};
Blockly.JavaScript.kame_walk = function(a) {
    return "kame0.walk(" + (Blockly.JavaScript.valueToCode(a, "TEXT", Blockly.JavaScript.ORDER_NONE) || "''") + ");\n"
};

var canvas = document.getElementById("world");
var ctx = canvas.getContext("2d");
var kame = function(ctx) {
    this.ctx = ctx;
    this.rad = 0;
    this.x = 0;
    this.y = 300;
};
kame.prototype.walk = function(n) {
    var x0 = Math.round(this.x + n * Math.cos(this.rad * Math.PI / 180));
    var y0 = Math.round(this.y + n * Math.sin(this.rad * Math.PI / 180));
    this.ctx.beginPath();
    this.ctx.moveTo(this.x, this.y);
    this.ctx.lineTo(x0, y0);
    this.x = x0;
    this.y = y0;
    this.ctx.stroke();
};
kame.prototype.turn = function(rad) {
    this.rad += rad;
};
var kame0 = new kame(ctx);

結果

成果物

tips

ng

<mutation else="1"/>

ok

<mutation else="1"></mutation>

以上。