2

我在使用 Blockly 时遇到问题。

每当我尝试使用两个块时，才稍后执行但不一起执行以获得所需的输出。

在这里，我使用了两个块名称移动和旋转，我需要，但是块应该一起工作，但它没有发生，而是一次只发生一个块效果。

**custom_morph.js**
Blockly.Blocks['Steps'] = {
    init: function() {
        this.appendDummyInput().appendField("Move").appendField(new Blockly.FieldNumber(0), "steps").appendField("steps");
        this.setInputsInline(false);
        this.setPreviousStatement(!0);
        this.setNextStatement(!0);
        this.setColour(230);
        this.setTooltip('');
        this.setHelpUrl('');
    }
};
var distance=0;
  
Blockly.JavaScript['Steps'] = function(block) {
  // TODO: Assemble JavaScript into code variable.
  var step = block.getFieldValue('steps');
  distance+=Number(step);
   var code = document.getElementById('goofy').style.transform='translateX('+distance+'px)';
   return code;
  };
  Blockly.Blocks['xrotate'] = {
    init: function() {
      this.appendValueInput("Angle")
          .setCheck(null)
          .setAlign(Blockly.ALIGN_RIGHT)
          .appendField(new Blockly.FieldDropdown([["Clockwise","C"], ["AntiClockwise","A"]]), "R_angle")
          .appendField(new Blockly.FieldAngle(90), "angle")
          .appendField("in degree");
      this.setPreviousStatement(!0);
      this.setNextStatement(!0);
      this.setColour(150);
      this.setTooltip('');
      this.setHelpUrl('');
    }
  };
  var degree = 0;
  Blockly.JavaScript['xrotate'] = function(block) {
    var dropdown_r_angle = block.getFieldValue('R_angle');
    var angle_angle = block.getFieldValue('angle');
    degree+=Number(angle_angle);
    var value_angle = Blockly.JavaScript.valueToCode(block, 'Angle', Blockly.JavaScript.ORDER_ATOMIC);
    // TODO: Assemble JavaScript into code variable.
    if(dropdown_r_angle==='C'){
       code = document.getElementById('goofy').style.transform='rotate('+degree+'deg)';
    }
    else{
      code = document.getElementById('goofy').style.transform='rotate('+'-'+degree+'deg)';
    }
    return code;
  };
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Using Jquery in Blockly</title>
<style media="screen">
/*{
  display: inline-block;
}*/
  .transmove{
        border:1px solid grey;
        height:480px;
        width:500px;
        overflow: auto;
    }
    #goofy{
      padding:100px;
      width:150px;
      height:150px;
    }
    #code_block{
      border: 1px solid grey;
    }

</style>
</head>

<script src="../blockly_compressed.js" charset="utf-8"></script>
<script src="../blocks_compressed.js" charset="utf-8"></script>
<script src="../javascript_compressed.js" charset="utf-8"></script>
<script src="../msg/js/en.js" charset="utf-8"></script>
<script src="custom_morph.js" charset="utf-8"></script>
<body>


  <p><button onclick="runcode()">Run Javascript</button></p>
    <div class="blockdiv">
      <div id="blocklyDiv" style="height: 480px; width: 500px;"></div>
      <xml id="toolbox" style="display: none">
        <category name="custom">
          <block type="Steps" ></block>
          <block type="xrotate"></block>
        </category>
      </xml>
    </div>
    <div class="transmove">
      <img src="goofy the walker.jpg" id="goofy" alt="goofy.jpeg">
    </div>

    <!-- <img src="C:\Users\Next6\Desktop\Amit\goofy the walker.jpg" id="goofy" alt="goofy.jpg"> -->

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

    function runcode() {
        var code = Blockly.JavaScript.workspaceToCode(workspace);
        document.getElementById('goofy').value = code;
    }
</script>
</body>

</html>

4

0 回答 0