ผลต่างระหว่างรุ่นของ "Blockly"
ไปยังการนำทาง
ไปยังการค้นหา
Jittat (คุย | มีส่วนร่วม) |
Jittat (คุย | มีส่วนร่วม) |
||
| (ไม่แสดง 9 รุ่นระหว่างกลางโดยผู้ใช้คนเดียวกัน) | |||
| แถว 1: | แถว 1: | ||
| − | บทความนี้สรุปขั้นตอนคร่าว ๆ ในการพัฒนาเกมการเขียนโปรแกรมด้วย Blockly | + | บทความนี้สรุปขั้นตอนคร่าว ๆ ในการพัฒนาเกมการเขียนโปรแกรมด้วย [https://developers.google.com/blockly/ Blockly] |
| − | == เกมอย่างง่าย == | + | == เกมอย่างง่าย: ใส่ blockly ในหน้าเว็บ == |
| + | |||
| + | === ใส่ blockly ในหน้าเว็บ === | ||
| + | ขั้นตอนคร่าว ๆ ตาม [https://developers.google.com/blockly/guides/get-started/web] | ||
| + | |||
| + | * Download blockly | ||
| + | * โหลด script ดังนี้ | ||
| + | |||
| + | <pre> | ||
| + | <script src="blockly_compressed.js"></script> | ||
| + | <script src="blocks_compressed.js"></script> | ||
| + | <script src="msg/js/th.js"></script> | ||
| + | </pre> | ||
| + | |||
| + | * สร้าง toolbox เช่น | ||
| + | |||
| + | <pre> | ||
| + | <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> | ||
| + | </pre> | ||
| + | |||
| + | * สร้าง div ไว้ใส่ blockly | ||
| + | |||
| + | <pre> | ||
| + | <div id="blocklyDiv" style="height: 500px; width: 800px;"> | ||
| + | </div> | ||
| + | </pre> | ||
| + | |||
| + | * เรียกให้ inject | ||
| + | |||
| + | <pre> | ||
| + | <script> | ||
| + | var workspace = Blockly.inject('blocklyDiv', | ||
| + | {toolbox: document.getElementById('toolbox')}); | ||
| + | </script> | ||
| + | </pre> | ||
| + | |||
| + | === สร้างโค้ดและเรียกให้ทำงาน === | ||
| + | |||
| + | ตาม [https://developers.google.com/blockly/guides/configure/web/code-generators] | ||
| + | |||
| + | * include generator | ||
| + | |||
| + | <pre> | ||
| + | <script src="javascript_compressed.js"></script> | ||
| + | </pre> | ||
| + | |||
| + | * generate ด้วย | ||
| + | |||
| + | <pre> | ||
| + | var code = Blockly.JavaScript.workspaceToCode(workspace); | ||
| + | </pre> | ||
| + | |||
| + | === Custom toolbox === | ||
| + | |||
| + | * ใช้ [https://blockly-demo.appspot.com/static/demos/blockfactory/index.html Blockly Developer Tools] | ||
| + | * Export toolbox xml | ||
== สร้าง block เอง == | == สร้าง 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 == | == การใช้ interpreter == | ||
| + | เพื่อแยกการทำงานของโค้ดออกจาก javascript ของ browser | ||
| + | |||
| + | * ใส่ interpreter | ||
| + | * เขียน api hook เพื่อทำงานร่วมกับ api ของ browser | ||
รุ่นแก้ไขปัจจุบันเมื่อ 02:49, 4 สิงหาคม 2561
บทความนี้สรุปขั้นตอนคร่าว ๆ ในการพัฒนาเกมการเขียนโปรแกรมด้วย 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
