blocklyでobjectを動かす。 その14

概要

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";
}

成果物

以上。