完成puzzle游戲的制作（一）相關(guān)的案例之后昌粤，來正式開始著手做puzzle游戲土思。

Puzzle游戲界面

1. 新建代碼塊

使用Blockly Developer Tools新建拼圖所涉及的代碼塊。

拼圖模塊1

拼圖模塊2

拼圖模塊3

拼圖模塊4

拼圖模塊5

2. 導出代碼塊

導出代碼塊

點擊Block Exporter選項卡繁成，全選所有代碼塊吓笙，選擇Block Definition(s)和Generator Stub(s)的文件類型，并分別定義文件名朴艰，點擊Export观蓄，即可將所有的塊的定義代碼導入到puzzle_b.js文件夾中，將所有的塊的生成代碼導入到puzzle_g.js文件夾中祠墅。

3. 導出工作區(qū)

拼圖案例不涉及Toolbox工具箱侮穿，所以這里直接定義工作區(qū)即可，將需要用到的塊添加到工作區(qū)毁嗦，然后導出Starter Code和Workspace Blocks文件亲茅。

設(shè)置并導出工作區(qū)

4. 文件的整理

新建文件夾，并將2和3步中導出的文件狗准，都復制粘貼到新建的文件夾中克锣；將blockly_compressed.js和javascript.js文件復制粘貼到新建的文件夾中；

js文件整理

js文件導入：

<script src="blockly_compressed.js"></script>
<script src="puzzle_b.js"></script>
<script src="javascript_compressed.js"></script>
<script src="puzzle_g.js"></script>

并將workspace的xml文件腔长，插入到body標簽中袭祟，修改導出的workspace.js中的代碼：

/* Inject your workspace */ 
var workspace = Blockly.inject('blockDiv', options);

完成以上步驟之后，保存所有的文件捞附，并用瀏覽器打開html文件巾乳，在瀏覽器中查看是否創(chuàng)建成功。

puzzle界面成功加載

5. 對“檢查答案”功能進行設(shè)計

（1）添加按鈕

在body中添加“檢查答案”的按鈕

<button id="check_button">檢查答案</button>

（2）設(shè)計生成代碼

給每個塊設(shè)置返回代碼鸟召，這里為了方便匹配和判斷胆绊，選取簡單的數(shù)字作為返回值：

Blockly.JavaScript['question'] = function(block) {
  var value_question_img = Blockly.JavaScript.valueToCode(block, 'question_img', Blockly.JavaScript.ORDER_ATOMIC);
  var dropdown_leg_number = block.getFieldValue('leg_number');
  var statements_question_statement = Blockly.JavaScript.statementToCode(block, 'question_statement');
  // TODO: Assemble JavaScript into code variable.
  var code = (value_question_img=="(#cat)" && dropdown_leg_number=="4" && statements_question_statement==21 );
  if(code){
      return "yes";
  }else{
      return "no";
  }
};

Blockly.JavaScript['answer_img_cat'] = function(block) {
  // TODO: Assemble JavaScript into code variable.
  var code = '#cat';
  // TODO: Change ORDER_NONE to the correct strength.
  return [code, Blockly.JavaScript.ORDER_NONE];
};

Blockly.JavaScript['answer_img_dog'] = function(block) {
  // TODO: Assemble JavaScript into code variable.
  var code = '#dog';
  // TODO: Change ORDER_NONE to the correct strength.
  return [code, Blockly.JavaScript.ORDER_NONE];
};

Blockly.JavaScript['answer_statement1'] = function(block) {
  // TODO: Assemble JavaScript into code variable.
  var code = '';
  code = '21';
  return code;
};

Blockly.JavaScript['answer_statement2'] = function(block) {
  // TODO: Assemble JavaScript into code variable.
  var code = '22';
  return code;
};

并且在workspace.js文件中添加對應(yīng)的button控制代碼：

 /* 創(chuàng)建點擊函數(shù) */
function button_click(){
    var code = Blockly.JavaScript.workspaceToCode(workspace);
    console.log(code);
    console.log("----" + code.match("no"))
    if(code.match("no")== null){
        alert("恭喜你，全對欧募！");
    }else{
        alert("別灰心压状，繼續(xù)加油！");
    }
}

/* 添加點擊事件監(jiān)聽 */
document.getElementById("check_button").addEventListener("click", button_click);

修改完成之后跟继，保存所有代碼种冬，用瀏覽器打開html文件進行測試：

恭喜你镣丑，全對！

別灰心娱两，繼續(xù)加油传轰！

說明：
在最初設(shè)計返回代碼時，“尾巴”和“羽毛”模塊的返回代碼定義的是“#weiba”和“#yumao”谷婆，但是和主塊（question塊）進行拼接后值傳遞過程中，發(fā)現(xiàn)總是會返回undefined的數(shù)據(jù)類型辽聊，無法進行相等判斷纪挎，故采用21和22這樣的數(shù)字，進行判斷跟匆。（后續(xù)會針對這一問題盡行更新發(fā)布）