Blockly 기반 시각 프로그래밍 입문 실례 (1, 맞춤형 블록 사용 방법)

18043 단어 BlocklyJavaScript

블락리 뭐야?


Google의 오픈 소스 중 하나입니다.
일반적인 인코딩이 아니라 여러 블록을 조합하여 프로그래밍을 한다.시각 프로그래밍 언어라는 유형.
일본에서는 지금까지 블락리를 기반으로 시각 프로그래밍을 개발했다는 보도가 드물다.본 장은 맞춤형 블록의 제작부터 실장까지의 조작을 예로 삼아 블록리의 개발 절차를 설명한다.

사용자 정의 블록 만들기


자신의 블록을 사용하는 절차는 크게 4개로 나뉜다.
  • 블락리의 개발 도구로 새로운 블락
    • 만들기
  • 블록을 만드는 동시에 블록의 정의 코드와Generator
    • 를 생성합니다.
  • 새 블록 기능에 맞게 Generator 편집
  • 화면에 새 블록을 추가하는 toolbox
    • 우선 프로그램을 만듭시다.
    블락리의 개발 도구부터 아래의 블록을 만들어 보세요.블록의 이름은 "lightswitch"입니다.

    블록을 작성하는 동안 블록에 대한 정의 문이 생성됩니다.프로그램의 정의는 Json과 JavaScript 두 가지가 있는데, 이 예는 JavaScript를 사용하고자 합니다.그런 다음 생성된 JavaScript 정의 코드를 "custom blocks.js"에 저장합니다.
    내용은 다음과 같다.

    웹 항목 만들기


    사용자 블록을 구현하기 위해 다음 그림과 같이 간단한 웹 프로젝트를 만듭니다.

    프로젝트에 다음과 같은 파일이 있습니다
  • circle.) → Blockly 설치 또는 사용자 정의 블록의 사용 방법을 설명하는 파일
  • customblocks.js→ 사용자 정의 블록의 정의 코드, 함수를 기록한 파일
    • 【circle.html】

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title> blockly game</title>
    <script src="./blockly/blockly_compressed.js"></script>
    <script src="./blockly/blocks_compressed.js"></script>
    <script src="./blockly/javascript_compressed.js"></script>
    <script src="./blockly/msg/js/en.js"></script>
    <script src="./customblocks.js"></script>
    <style type="text/css">
        body {
            background-color: #fff;
            font-family: sans-serif;
        }
        h1 {
            font-weight: normal;
            font-size: 140%;
        }
        #circle{
            height: 300px;
            width: 300px;
            border-radius:50%;
            background-color: white;
            border: solid 1px black;
            position: absolute;
            left: 650px;
            top: 100px;
        }
    </style>
</head>
<body>
    <!-- button on run code -->
    <p>
        <button onclick="runCode()"> Run Code</button>
    </p>
    <!-- blockly workspace -->
    <div id="blocklyDiv" style="height:480px;width:600px;"></div>
    <xml id="toolbox" style="display:none;">
        <category name="logic">
            <block type="lightswitch">
            </block>
        </category>
    </xml>
    <!-- added to the page -->
    <div id="circle"></div>

<script>
    //set options
    var options = {
      toolbox: toolbox,
      collapse: true,
      comments: true,
      disable: true,
      maxBlocks: Infinity,
      trashcan: true,
      horizontalLayout: false,
      toolboxPosition: 'start',
      css: true,
      rtl: false,
      scrollbars: true,
      sounds: true,
      oneBasedIndex: true,
      grid: {
        spacing: 20,
        length: 1,
        colour: '#888',
        snap: true
      }
    }

    //put the toolbox in the workspace
    var workspace = Blockly.inject('blocklyDiv', options);
    // take the text generated by the blocks and run it as code
    function runCode() {
        window.LoopTrap = 1000;
        Blockly.JavaScript.INFINITE_LOOP_TRAP = 'if (--window.LoopTrap == 0) throw "Infinite loop.";¥n';
        var code = Blockly.JavaScript.workspaceToCode(workspace);
        Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
        try {
            eval(code);
        } catch (e) {
            alert(e);
        }
    }
</script>
</body>
</html>
    🌾Blockly 장서 다운로드
    【customblocks.js】

//block definition
//light switch block - turn color on or off
Blockly.Blocks['lightswitch'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("Turn")
        .appendField(new Blockly.FieldDropdown([["red","R"], ["blue","B"]]), "lightcolor")
        .appendField(new Blockly.FieldDropdown([["on","T"], ["off","F"]]), "switch");
    this.setColour(270);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};
//block definition
//light switch block - turn color on or off
Blockly.Blocks['lightswitch'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("Turn")
        .appendField(new Blockly.FieldDropdown([["red","R"], ["blue","B"]]), "lightcolor")
        .appendField(new Blockly.FieldDropdown([["on","T"], ["off","F"]]), "switch");
    this.setColour(270);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

    실행 결과


    [red], [on]을 선택한 후 [Run Code] 버튼을 누르면 다음 그림과 같이 원형이 빨간색으로 바뀝니다.
    여기.
    "blue"및 "on"을 선택한 후 "Run Code"버튼을 누르면 다음 그림과 같이 원형이 파란색으로 바뀝니다.

    "off"를 선택하고 "Run Code"단추를 누르면 아래 그림과 같이 원형이 하얗게 변합니다.
    클론 노드 cloneNode()
    DIV 기본 높이 및 사용자 적응 높이

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage