blocklyでobjectを動かす。 その14

3548 ワード
ミサイル防衛 Blockly Plunker Blockly テキストリンク

概要

blocklyでobjectを動かして見る。
ミサイル防衛、やってみた。

写真

ステージを作る。

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

ブロックを書く。

Blockly.Blocks.run = {
    init: function() {
        this.jsonInit({
        message0: "run",
          output: "Boolean",
          style: "math_blocks",
          tooltip: "%{BKY_MATH_RANDOM_FLOAT_TOOLTIP}",
          helpUrl: "%{BKY_MATH_RANDOM_FLOAT_HELPURL}"
      })
  }
};


Blockly.Blocks.r = {
    init: function() {
        this.jsonInit({
            message0: "r %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.run = function(a) {
    return ["run()", Blockly.JavaScript.ORDER_ATOMIC]
};
Blockly.JavaScript.s = function(a) {
    return ["s", Blockly.JavaScript.ORDER_FUNCTION_CALL]
};

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function getRadian(x, y, x2, y2) {
    radian = Math.atan2(y2 - y, x2 - x);
    return radian;
}
function rad2deg(rad) {
    degree = rad * 180 / Math.PI;
    return degree;
}
var s = 0;
var r = 65;
var t0 = {
    'x': 400,
    'y': 400,
    'dx': 0,
    'dy': 0,
    'speed': 1.4,
    'angle': 30
}
var m0 = {
    'x': 0,
    'y': 0,
    'dx': 0,
    'dy': 0,
    'speed': 1.8,
    'angle': 65
}
function run() {
    var rad = getRadian(t0.x, t0.y, m0.x, m0.y);
    var deg = rad2deg(rad);
    s = deg;
    m0.angle = r;
    t0.dx = t0.speed * Math.cos((Math.PI / 180) * t0.angle);
    t0.dy = t0.speed * Math.sin((Math.PI / 180) * t0.angle);
    t0.x -= t0.dx;
    t0.y -= t0.dy;
    m0.dx = m0.speed * Math.cos((Math.PI / 180) * m0.angle);
    m0.dy = m0.speed * Math.sin((Math.PI / 180) * m0.angle);
    m0.x += m0.dx;
    m0.y += m0.dy;
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#333';
    for (var i = 0; i < 401; i += 40)
    {
        ctx.moveTo(i + 20, 20);
        ctx.lineTo(i + 20, 420);
        ctx.moveTo(20, i + 20);
        ctx.lineTo(420, i + 20);
    }
    ctx.stroke();
    ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
    ctx.fillRect(0, 0, 450, 450);
    ctx.fillStyle = '#f00';
    ctx.fillRect(t0.x + 20, 420 - t0.y, 3, 3);
    ctx.fillStyle = '#0ff';
    ctx.fillRect(m0.x + 20, 420 - m0.y, 3, 3);
    return "true";
}

成果物

以上。