Blockly

บทความนี้สรุปขั้นตอนคร่าว ๆ ในการพัฒนาเกมการเขียนโปรแกรมด้วย Blockly

เกมอย่างง่าย: ใส่ blockly ในหน้าเว็บ

ใส่ blockly ในหน้าเว็บ

ขั้นตอนคร่าว ๆ ตาม [1]

• Download blockly
• โหลด script ดังนี้

  <script src="blockly_compressed.js"></script>
  <script src="blocks_compressed.js"></script>
  <script src="msg/js/th.js"></script>

• สร้าง toolbox เช่น

  <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>
  </xml>

• สร้าง div ไว้ใส่ blockly

  <div id="blocklyDiv" style="height: 500px; width: 800px;">
  </div>

• เรียกให้ inject

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

สร้างโค้ดและเรียกให้ทำงาน

ตาม [2]

• include generator

  <script src="javascript_compressed.js"></script>

• generate ด้วย

  var code = Blockly.JavaScript.workspaceToCode(workspace);

Custom toolbox

• ใช้ Blockly Developer Tools
• Export toolbox xml

สร้าง block เอง

• สร้าง block ใน dev tool
  • export จาก dev tool ได้สองส่วน: block description (สำหรับสร้าง block ใน ui) และ stub ของ generator
• สร้าง toolbox & workspace
  • export toolbox เมื่อส่วนที่แล้ว
• import block:
  • โหลด block definition (ใช้ json)
  • ใส่ code generator

block ที่มีโค้ดเป็น input

• การสร้าง code ของ blocks ภายใน
• การสร้างตัวแปรภายในใหม่
• การป้องกันการวนซ้ำไม่รู้จบ

การใช้ interpreter

เพื่อแยกการทำงานของโค้ดออกจาก javascript ของ browser

• ใส่ interpreter
• เขียน api hook เพื่อทำงานร่วมกับ api ของ browser