游戲幫助

對于每個動物（綠色）藐守，為其添加照片白指、選擇腿的數(shù)量，并且選擇它們各自的身體特征疚宇。也就是說將某種動物的特性通過積木拖動的方式卡合在一起。

游戲玩法 -c

游戲介紹

游戲界面 -c

正確答案

正確答案

分析實現(xiàn)

積木的定義

需要定義三種積木赏殃，主積木鱼鸠、圖片積木矛紫、特征積木赋焕。
定義主積木渠缕，這個積木有個圖片輸入，有個下拉輸入抗蠢，還有個文本輸入举哟，第二個參數(shù)后都是文本輸入。

使用工具生成 -c

生成積木 -c

Blockly.Blocks['animal'] = {
//定義積木
  init: function() {
    this.setColour(Puzzle.Blocks.ANIMAL_HUE);
    //圖片輸入
    this.appendDummyInput()
        .appendField('', 'NAME');
    this.appendValueInput('PIC')
        .setAlign(Blockly.ALIGN_RIGHT)
        .appendField(BlocklyGames.getMsg('Puzzle_picture'));
        //腿下拉輸入
    this.appendDummyInput()
        .setAlign(Blockly.ALIGN_RIGHT)
        .appendField(BlocklyGames.getMsg('Puzzle_legs'))
        .appendField(new Blockly.FieldDropdown(Puzzle.legs), 'LEGS');
        //特征輸入
    this.appendStatementInput('TRAITS')
        .appendField(BlocklyGames.getMsg('Puzzle_traits'));
    this.setInputsInline(false);
  },
  //積木賦值
populate: function(n) {
    this.animal = n;
this.setFieldValue(BlocklyGames.getMsg('Puzzle_animal' + n), 'NAME');
    this.helpUrl = BlocklyGames.getMsg('Puzzle_animal' + n + 'HelpUrl');
  },

圖片積木

Blockly.Blocks['picture'] = {
  init: function() {
    this.setColour(Puzzle.Blocks.PICTURE_HUE);
    this.appendDummyInput('PIC');
    this.setOutput(true);
    this.setTooltip('');
  },
  populate: function(n) {
    this.animal = n;
    var pic = 'puzzle/' + BlocklyGames.getMsg('Puzzle_animal' + n + 'Pic');
    var picHeight = BlocklyGames.getMsg('Puzzle_animal' + n + 'PicHeight');
    var picWidth = BlocklyGames.getMsg('Puzzle_animal' + n + 'PicWidth');
    this.getInput('PIC')
        .appendField(new Blockly.FieldImage(pic, picWidth, picHeight));
  }
  }

特征積木

Blockly.Blocks['trait'] = {
  init: function() {
    this.setColour(Puzzle.Blocks.TRAIT_HUE);
    this.appendDummyInput().appendField('', 'NAME');
    this.setPreviousStatement(true);
    this.setNextStatement(true);
  },
  populate: function(n, m) {
    this.animal = n;
    this.trait = m;
    // Set the trait name.
    this.setFieldValue(BlocklyGames.getMsg(
        'Puzzle_animal' + n + 'Trait' + m), 'NAME');
  }
};

積木的生成

有多套拼圖組合物蝙，初始化時選擇4套拼圖組合炎滞，生成對應(yīng)的特征積木、圖片積木和主積木诬乞。

while (BlocklyGames.getMsgOrNull('Puzzle_animal' + i)) {
//創(chuàng)建主積木
      block = BlocklyInterface.workspace.newBlock('animal');
      block.populate(i);
      blocksAnimals.push(block);
//創(chuàng)建圖片積木
      block = BlocklyInterface.workspace.newBlock('picture');
      block.populate(i);
      blocksPictures.push(block);
      var j = 1;
//特征積木
      while (BlocklyGames.getMsgOrNull('Puzzle_animal' + i + 'Trait' + j)) {
        block = BlocklyInterface.workspace.newBlock('trait');
        block.populate(i, j);
        blocksTraits.push(block);
        j++;
      }
      i++;
    }

改變積木位置，設(shè)置積木不可刪除钠导，并顯示積木震嫉。

    block.setDeletable(false);
    block.initSvg();
    block.render();

積木正確性判斷

積木卡合正確性由各自積木來確定，譬如鴨子動物確定腿的數(shù)量正確性牡属，圖片的正確由自身積木的動物與父積木的名稱相當(dāng)確定票堵，特征積木使用同樣方式確定。

  var blocks = BlocklyInterface.workspace.getAllBlocks();
  var errors = 0;
  var badBlocks = [];
  for (var b = 0, block; (block = blocks[b]); b++) {
    if (!block.isCorrect()) {
      errors++;
      // Bring the offending blocks to the front.
      block.select();
      badBlocks.push(block);
    }
  }