游戏帮助
对于每个动物（绿色），为其添加照片、选择腿的数量，并且选择它们各自的身体特征。也就是说将某种动物的特性通过积木拖动的方式卡合在一起。
游戏玩法 -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);
}
}
