游戏帮助

对于每个动物（绿色），为其添加照片、选择腿的数量，并且选择它们各自的身体特征。也就是说将某种动物的特性通过积木拖动的方式卡合在一起。

游戏玩法 -c

游戏介绍

游戏界面 -c

正确答案

正确答案

分析实现

积木的定义

需要定义三种积木，主积木、图片积木、特征积木。
定义主积木，这个积木有个图片输入，有个下拉输入，还有个文本输入，第二个参数后都是文本输入。

使用工具生成 -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套拼图组合，生成对应的特征积木、图片积木和主积木。

while (BlocklyGames.getMsgOrNull('Puzzle_animal' + i)) {
//创建主积木
      block = BlocklyInterface.workspace.newBlock('animal');
      block.populate(i);
      blocksAnimals.push(block);
//创建图片积木
      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++;
    }

改变积木位置，设置积木不可删除，并显示积木。

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

积木正确性判断

积木卡合正确性由各自积木来确定，譬如鸭子动物确定腿的数量正确性，图片的正确由自身积木的动物与父积木的名称相当确定，特征积木使用同样方式确定。

  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);
    }
  }