ผลต่างระหว่างรุ่นของ "Blockly"

จาก Theory Wiki
ไปยังการนำทาง ไปยังการค้นหา
แถว 40: แถว 40:
 
<pre>
 
<pre>
 
   <script>
 
   <script>
     var workspacePlayground = Blockly.inject('blocklyDiv',
+
     var workspace = Blockly.inject('blocklyDiv',
                                            {toolbox: document.getElementById('toolbox')});
+
                                  {toolbox: document.getElementById('toolbox')});
 
   </script>
 
   </script>
 
</pre>
 
</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>
  
 
== สร้าง block เอง ==
 
== สร้าง block เอง ==
  
 
== การใช้ interpreter ==
 
== การใช้ interpreter ==

รุ่นแก้ไขเมื่อ 18:57, 3 สิงหาคม 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);

สร้าง block เอง

การใช้ interpreter