1

Blockly でコーディングを開始していますが、新しいブロックを作成しようとすると問題が発生します。私が行った手順：

  • Blocklyアプリケーションコードをダウンロードします。
  • すべてのファイルを という名前のフォルダーに入れますBlockly。
  • ツールボックスが正常に機能するかどうかを確認するために、そのフォルダーに新しい html ファイルを作成しました。
  • Block Factoryで 2 つの新しいブロックを作成しました。
  • これらの新しいブロックを新しいcustomBlocks.jsファイルでツールボックスに追加しようとしました。

2つの新しいブロックを追加したため、4番目のステップを作成しようとすると問題が発生しますが、jsにある最初のブロックのみがツールボックスに表示されますが、2番目のブロックは表示されません。ブロックの順序は関係ありません、2番目のものだけが正しく表示されません。

これが私のhtmlファイルです：

<!DOCTYPE html>
<html>
    <head>
        <script src="blockly_compressed.js"></script>
        <script src="blocks_compressed.js"></script>
        <script src="customBlocks.js"></script>
        <script src="msg/js/en.js"></script>
    </head>
    <body>
        <h1>This is a prove </h1>
        <div id = "blocklyMove" style = "height: 100px; width: 100px; background-color: red;"></div>
        <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

        <xml id="toolbox" style="display: none">
          <block type="controls_if"></block>
          <block type="controls_repeat_ext"></block>
          <block type="logic_compare"></block>
          <block type="math_number"></block>
          <block type="math_arithmetic"></block>
          <block type="text"></block>
          <block type="text_print"></block>
          <block type="move_right"></block>
          <block type="blockObject"></block>
        </xml>

        <script>
          var workspace = Blockly.inject('blocklyDiv',
              {toolbox: document.getElementById('toolbox')});
        </script>
    </body>
</html>

これが私のcustomBlocks.jsファイルです：

'use strict';

/* *********************** MOVES TO RIGHT *********************** */

Blockly.Blocks['move_right'] = {
  init: function() {
    this.appendValueInput("PIXELS")
        .setCheck("Number")
        .appendField("move to right");
    this.setInputsInline(true);
    this.setOutput(true, null);
    this.setColour(120);
    this.setTooltip('');
    this.setHelpUrl('http://www.example.com/');
  }
};

Blockly.JavaScript['move_right'] = function(block) {
  var value_pixels = Blockly.JavaScript.valueToCode(block, 'PIXELS', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var code = "$(document).ready(function(){ " +
                "$(\"blocklyMove\").animate({ " + 
                    "right: " + value_pixels + "px" +
                "});" +
            "});";
  // TODO: Change ORDER_NONE to the correct strength.
  return [code, Blockly.JavaScript.ORDER_NONE];
};

/* *********************** BLOCK *********************** */

Blockly.Blocks['blockObject'] = {
  init: function() {
    this.appendValueInput("MOVEMENT")
        .setCheck(null)
        .appendField("Block");
    this.setColour(20);
    this.setTooltip('');
    this.setHelpUrl('http://www.example.com/');
  }
};

Blockly.JavaScript['blockObject'] = function(block) {
  var value_movement = Blockly.JavaScript.valueToCode(block, 'MOVEMENT', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var code = '...;\n';
  return code;
};

Google Chromeのコンソールに次のエラーが表示されることがわかりました。

キャッチされていない TypeError: undefined のプロパティ 'move_right' を設定できません

ここで立ち往生していて、何が問題なのかわかりません。どんな助けでも大歓迎です。

PS: まだブロックを完成させていないので、ブロックのロジックに集中しないでください。ただし、ロジックを完成させる前に、両方のブロックが正しく表示されることを確認したかったのです。

前もって感謝します！

4

1 に答える 1

2

最後に、解決策を見つけました。ファイルに次のタグをhtml追加して、それが定義されている別のファイル (javascript_compressed.js)を参照する必要がありました。<script>jsBlockly.JavaScript

<script src="javascript_compressed.js"></script>
于 2016-04-06T10:47:18.443 に答える