Skip to content

Commit 4c49d1b

Browse files
committed
add button tutorial 4
1 parent 66e2087 commit 4c49d1b

13 files changed

Lines changed: 269 additions & 84 deletions

File tree

blocks/msg/en.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,3 +122,24 @@ Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_UP = "up";
122122
Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_DOWN = "down";
123123
Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_LEFT = "left";
124124
Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_RIGHT = "right";
125+
126+
Blockly.Msg.WEBDUINO_BUTTON_GAME_ADD_SINGLEGAME = "Add <Single> Game";
127+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC = "NPC:";
128+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL = " Level:";
129+
Blockly.Msg.WEBDUINO_BUTTON_GAME_DISTANCE = " Distance:";
130+
Blockly.Msg.WEBDUINO_BUTTON_GAME_USER = "User:";
131+
Blockly.Msg.WEBDUINO_BUTTON_GAME_USER_BUTTON = " Button:";
132+
Blockly.Msg.WEBDUINO_BUTTON_GAME_USER_EVENT = "Button event:";
133+
Blockly.Msg.WEBDUINO_BUTTON_GAME_USER_RUN_FORWARD = "Character run forward";
134+
Blockly.Msg.WEBDUINO_BUTTON_GAME_USER_RUN_PIXEL = "pixel";
135+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_CAT = "Cat";
136+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LION = "Lion";
137+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_SQU = "Squirrel";
138+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_PICA = "Mario";
139+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_MAN1 = "Peter";
140+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_MAN2 = "RYU";
141+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_5 = "Very hard";
142+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_4 = "Hard";
143+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_3 = "Normal";
144+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_2 = "Easy";
145+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_1 = "Very easy";

blocks/msg/zh-hant.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,3 +122,24 @@ Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_UP = "上";
122122
Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_DOWN = "下";
123123
Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_LEFT = "左";
124124
Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_RIGHT = "右";
125+
126+
Blockly.Msg.WEBDUINO_BUTTON_GAME_ADD_SINGLEGAME = "載入 <單人> 遊戲模組";
127+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC = "電腦角色:";
128+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL = " 電腦強度:";
129+
Blockly.Msg.WEBDUINO_BUTTON_GAME_DISTANCE = " 比賽距離:";
130+
Blockly.Msg.WEBDUINO_BUTTON_GAME_USER = "玩家角色:";
131+
Blockly.Msg.WEBDUINO_BUTTON_GAME_USER_BUTTON = " 按鈕:";
132+
Blockly.Msg.WEBDUINO_BUTTON_GAME_USER_EVENT = "玩家按鈕行為設定:";
133+
Blockly.Msg.WEBDUINO_BUTTON_GAME_USER_RUN_FORWARD = "角色往前跑";
134+
Blockly.Msg.WEBDUINO_BUTTON_GAME_USER_RUN_PIXEL = "像素";
135+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_CAT = "阿貓";
136+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LION = "老獅";
137+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_SQU = "松鼠";
138+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_PICA = "馬力歐";
139+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_MAN1 = "小明";
140+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_MAN2 = "隆";
141+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_5 = "超威";
142+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_4 = "小威";
143+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_3 = "普通";
144+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_2 = "小弱";
145+
Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_1 = "超弱";

blocks/tutorials.js

Lines changed: 80 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -439,9 +439,9 @@ Blockly.Blocks['button_change_image_position'] = {
439439
[Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_LEFT, "l"],
440440
[Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_RIGHT, "r"]
441441
]), "pos_")
442-
.appendField(Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_MOVE,"移動");
442+
.appendField(Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_MOVE, "移動");
443443
this.appendDummyInput()
444-
.appendField(Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_PX,"個像素");
444+
.appendField(Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_PX, "個像素");
445445
this.setPreviousStatement(true);
446446
this.setNextStatement(true);
447447
this.setTooltip('');
@@ -452,9 +452,85 @@ Blockly.Blocks['button_change_image_position'] = {
452452

453453
// https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#ynuit9
454454
Blockly.Blocks['button_reset_image_position'] = {
455-
init: function() {
455+
init: function () {
456+
this.appendDummyInput()
457+
.appendField(Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_RESET, "重設圖片位置");
458+
this.setPreviousStatement(true);
459+
this.setNextStatement(true);
460+
this.setTooltip('');
461+
this.setColour(Blockly.Blocks.colour.HUE);
462+
this.setHelpUrl('http://www.example.com/');
463+
}
464+
};
465+
466+
// https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#dch7xc
467+
Blockly.Blocks['button_game'] = {
468+
init: function () {
469+
this.appendDummyInput()
470+
.appendField(Blockly.Msg.WEBDUINO_BUTTON_GAME_ADD_SINGLEGAME,"載入 <單人> 遊戲模組");
471+
this.appendDummyInput();
472+
this.appendDummyInput()
473+
.appendField(Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC,"電腦角色:")
474+
.appendField(new Blockly.FieldDropdown([
475+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_CAT, "run-cat.gif"],
476+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_PICA, "run-pica.gif"],
477+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LION, "run-lion.gif"],
478+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_SQU, "run-squirrel.gif"],
479+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_MAN2, "run-man2.gif"],
480+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_MAN1, "run-man1.gif"]
481+
]), "npc_")
482+
.appendField(Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL," 電腦強度:")
483+
.appendField(new Blockly.FieldDropdown([
484+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_5, "5"],
485+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_4, "4"],
486+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_3, "3"],
487+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_2, "2"],
488+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LEVEL_1, "1"]
489+
]), "level_")
490+
.appendField(Blockly.Msg.WEBDUINO_BUTTON_GAME_DISTANCE," 比賽距離:")
491+
.appendField(new Blockly.FieldDropdown([
492+
["100", "100"],
493+
["200", "200"],
494+
["300", "300"],
495+
["400", "400"],
496+
["500", "500"]
497+
]), "distance_");
498+
this.appendDummyInput();
456499
this.appendDummyInput()
457-
.appendField(Blockly.Msg.WEBDUINO_BUTTON_CHANGE_IMAGE_RESET,"重設圖片位置");
500+
.appendField(Blockly.Msg.WEBDUINO_BUTTON_GAME_USER,"玩家角色:")
501+
.appendField(new Blockly.FieldDropdown([
502+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_CAT, "run-cat.gif"],
503+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_PICA, "run-pica.gif"],
504+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_LION, "run-lion.gif"],
505+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_SQU, "run-squirrel.gif"],
506+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_MAN2, "run-man2.gif"],
507+
[Blockly.Msg.WEBDUINO_BUTTON_GAME_NPC_MAN1, "run-man1.gif"]
508+
]), "user_")
509+
.appendField(Blockly.Msg.WEBDUINO_BUTTON_GAME_USER_BUTTON," 按鈕:")
510+
.appendField(new Blockly.FieldVariable("button"), "button_");
511+
this.appendStatementInput("event_")
512+
.appendField(Blockly.Msg.WEBDUINO_BUTTON_GAME_USER_EVENT,"玩家按鈕行為設定:");
513+
this.setPreviousStatement(true);
514+
this.setNextStatement(true);
515+
this.setTooltip('');
516+
this.setColour(Blockly.Blocks.colour.HUE);
517+
this.setHelpUrl('http://www.example.com/');
518+
}
519+
};
520+
521+
// https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#ggtrzs
522+
Blockly.Blocks['button_game_user'] = {
523+
init: function () {
524+
this.appendDummyInput()
525+
.appendField(Blockly.Msg.WEBDUINO_BUTTON_GAME_USER_RUN_FORWARD,"角色往前跑")
526+
.appendField(new Blockly.FieldDropdown([
527+
["1", "1"],
528+
["2", "2"],
529+
["3", "3"],
530+
["4", "4"],
531+
["5", "5"]
532+
]), "user_")
533+
.appendField(Blockly.Msg.WEBDUINO_BUTTON_GAME_USER_RUN_PIXEL,"像素");
458534
this.setPreviousStatement(true);
459535
this.setNextStatement(true);
460536
this.setTooltip('');

generators/tutorials.js

Lines changed: 106 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -320,47 +320,121 @@ Blockly.JavaScript['button_change_image_position'] = function (block) {
320320
var value_image_pos_ = Blockly.JavaScript.valueToCode(block, 'image_pos_', Blockly.JavaScript.ORDER_ATOMIC);
321321
var code;
322322
if (dropdown_pos_ == 'u') {
323-
code = 'if(!window.varImageUD){window.varImageUD = 0;}\n'+
324-
'if(!window.varImageUp){window.varImageUp = 0;}\n'+
325-
'if(!window.varImageDown){window.varImageDown = 0;}\n'+
326-
'window.varImageUp = '+value_image_pos_+';\n'+
327-
'window.varImageUD = window.varImageUD + (window.varImageDown - window.varImageUp);\n'+
328-
'document.getElementById("image").style.marginTop = varImageUD+"px";\n'+
329-
'console.log(window.varImageUD);\n';
323+
code = 'if(!window.varImageUD){window.varImageUD = 0;}\n' +
324+
'if(!window.varImageUp){window.varImageUp = 0;}\n' +
325+
'if(!window.varImageDown){window.varImageDown = 0;}\n' +
326+
'window.varImageUp = ' + value_image_pos_ + ';\n' +
327+
'window.varImageUD = window.varImageUD + (window.varImageDown - window.varImageUp);\n' +
328+
'document.getElementById("image").style.marginTop = varImageUD+"px";\n' +
329+
'console.log(window.varImageUD);\n';
330330
}
331331
if (dropdown_pos_ == 'd') {
332-
code = 'if(!window.varImageUD){window.varImageUD = 0;}\n'+
333-
'if(!window.varImageUp){window.varImageUp = 0;}\n'+
334-
'if(!window.varImageDown){window.varImageDown = 0;}\n'+
335-
'window.varImageDown = '+value_image_pos_+';\n'+
336-
'window.varImageUD = window.varImageUD + (window.varImageDown - window.varImageUp);\n'+
337-
'document.getElementById("image").style.marginTop = varImageUD+"px";\n'+
338-
'console.log(window.varImageUD);\n';
332+
code = 'if(!window.varImageUD){window.varImageUD = 0;}\n' +
333+
'if(!window.varImageUp){window.varImageUp = 0;}\n' +
334+
'if(!window.varImageDown){window.varImageDown = 0;}\n' +
335+
'window.varImageDown = ' + value_image_pos_ + ';\n' +
336+
'window.varImageUD = window.varImageUD + (window.varImageDown - window.varImageUp);\n' +
337+
'document.getElementById("image").style.marginTop = varImageUD+"px";\n' +
338+
'console.log(window.varImageUD);\n';
339339
}
340340
if (dropdown_pos_ == 'l') {
341-
code = 'if(!window.varImageLR){window.varImageLR = 0;}\n'+
342-
'if(!window.varImageLeft){window.varImageLeft = 0;}\n'+
343-
'if(!window.varImageRight){window.varImageRight = 0;}\n'+
344-
'window.varImageLeft = '+value_image_pos_+';\n'+
345-
'window.varImageLR = window.varImageLR + (window.varImageRight - window.varImageLeft);\n'+
346-
'document.getElementById("image").style.marginLeft = varImageLR+"px";\n'+
347-
'console.log(window.varImageLR);\n';
341+
code = 'if(!window.varImageLR){window.varImageLR = 0;}\n' +
342+
'if(!window.varImageLeft){window.varImageLeft = 0;}\n' +
343+
'if(!window.varImageRight){window.varImageRight = 0;}\n' +
344+
'window.varImageLeft = ' + value_image_pos_ + ';\n' +
345+
'window.varImageLR = window.varImageLR + (window.varImageRight - window.varImageLeft);\n' +
346+
'document.getElementById("image").style.marginLeft = varImageLR+"px";\n' +
347+
'console.log(window.varImageLR);\n';
348348
}
349349
if (dropdown_pos_ == 'r') {
350-
code = 'if(!window.varImageLR){window.varImageLR = 0;}\n'+
351-
'if(!window.varImageLeft){window.varImageLeft = 0;}\n'+
352-
'if(!window.varImageRight){window.varImageRight = 0;}\n'+
353-
'window.varImageRight = '+value_image_pos_+';\n'+
354-
'window.varImageLR = window.varImageLR + (window.varImageRight - window.varImageLeft);\n'+
355-
'document.getElementById("image").style.marginLeft = varImageLR+"px";\n'+
356-
'console.log(window.varImageLR);\n';
350+
code = 'if(!window.varImageLR){window.varImageLR = 0;}\n' +
351+
'if(!window.varImageLeft){window.varImageLeft = 0;}\n' +
352+
'if(!window.varImageRight){window.varImageRight = 0;}\n' +
353+
'window.varImageRight = ' + value_image_pos_ + ';\n' +
354+
'window.varImageLR = window.varImageLR + (window.varImageRight - window.varImageLeft);\n' +
355+
'document.getElementById("image").style.marginLeft = varImageLR+"px";\n' +
356+
'console.log(window.varImageLR);\n';
357357
}
358358
return code;
359359
};
360360

361-
Blockly.JavaScript['button_reset_image_position'] = function(block) {
362-
var code = 'document.getElementById("image").style.margin = "0 0 0 0";\n'+
363-
'window.varImageUD=0;\n'+
364-
'window.varImageLR=0;\n';
361+
Blockly.JavaScript['button_reset_image_position'] = function (block) {
362+
var code = 'document.getElementById("image").style.margin = "0 0 0 0";\n' +
363+
'window.varImageUD=0;\n' +
364+
'window.varImageLR=0;\n';
365365
return code;
366366
};
367+
368+
Blockly.JavaScript['button_game'] = function (block) {
369+
var dropdown_npc_ = block.getFieldValue('npc_');
370+
var dropdown_level_ = block.getFieldValue('level_');
371+
var dropdown_distance_ = block.getFieldValue('distance_');
372+
var dropdown_user_ = block.getFieldValue('user_');
373+
var variable_button_ = Blockly.JavaScript.variableDB_.getName(block.getFieldValue('button_'), Blockly.Variables.NAME_TYPE);
374+
var statements_event_ = Blockly.JavaScript.statementToCode(block, 'event_');
375+
var code = 'var btnGameNpcShow_ = document.getElementById("npcshow"),\n' +
376+
' btnGameUserShow_ = document.getElementById("usershow"),\n' +
377+
' btnGameNpc_ = document.getElementById("npc"),\n' +
378+
' btnGameUser_ = document.getElementById("user"),\n' +
379+
' btnGameNpcImg_ = document.getElementById("npcimg"),\n' +
380+
' btnGameUserImg_ = document.getElementById("userimg"),\n' +
381+
' btnGameGoal_ = document.getElementById("goal"),\n' +
382+
' btnGameStart_ = document.getElementById("start"),\n' +
383+
' btnGameTimer_,\n' +
384+
' btnGameA_ = 0,\n' +
385+
' btnGameB_ = 0,\n' +
386+
' btnGameDistance_ = ' + dropdown_distance_ + ',\n' +
387+
' btnGameNpcSpeed_ = ' + dropdown_level_ + ',\n' +
388+
' btnGameUserSpeed_;\n' +
389+
' \n' +
390+
'btnGameStart_.className = "";\n' +
391+
'btnGameNpcImg_.setAttribute("src","' + dropdown_npc_ + '");\n' +
392+
'btnGameUserImg_.setAttribute("src","' + dropdown_user_ + '");\n' +
393+
'btnGameGoal_.innerHTML = btnGameDistance_;\n' +
394+
'btnGameStart_.addEventListener("click",go);\n' +
395+
' \n' +
396+
'function go(){\n' +
397+
' btnGameStart_.className = "go";\n' +
398+
' btnGameA_ = 0;\n' +
399+
' btnGameB_ = 0;\n' +
400+
' ' + statements_event_ +
401+
' btnGameTimer_ = setInterval(function(){\n' +
402+
' btnGameB_ = btnGameB_ + btnGameNpcSpeed_;\n' +
403+
' btnGameNpcShow_.innerHTML = btnGameB_;\n' +
404+
' btnGameNpc_.style.marginLeft = btnGameB_+"px";\n' +
405+
' if(btnGameB_>=btnGameDistance_){\n' +
406+
' alert("GAME OVER!!!! YOU LOSE!!!!!");\n' +
407+
' stop();\n' +
408+
' }\n' +
409+
' },120);\n' +
410+
' \n' +
411+
' function stop(){\n' +
412+
' clearInterval(btnGameTimer_);\n' +
413+
' btnGameA_ = 0;\n' +
414+
' btnGameB_ = 0;\n' +
415+
' btnGameNpcShow_.innerHTML = 0;\n' +
416+
' btnGameUserShow_.innerHTML = 0;\n' +
417+
' btnGameNpc_.style.marginLeft = 0;\n' +
418+
' btnGameUser_.style.marginLeft = 0;\n' +
419+
' btnGameStart_.className = "";\n' +
420+
' ' + variable_button_ + '.removeAllListeners("pressed");\n' +
421+
' ' + variable_button_ + '.removeAllListeners("repressed");\n' +
422+
' ' + variable_button_ + '.removeAllListeners("longPress");\n' +
423+
' }\n' +
424+
'}\n';
425+
return code;
426+
};
427+
428+
429+
Blockly.JavaScript['button_game_user'] = function (block) {
430+
var dropdown_user_ = block.getFieldValue('user_');
431+
var code = ' btnGameA_ = btnGameA_ + ' + dropdown_user_ + ';\n' +
432+
' btnGameUserShow_.innerHTML = btnGameA_;\n' +
433+
' btnGameUser_.style.marginLeft = btnGameA_+"px";\n' +
434+
' if(btnGameA_>=btnGameDistance_){\n' +
435+
' alert("YOU WIN!!!!!");\n' +
436+
' stop();\n' +
437+
' }\n';
438+
return code;
439+
};
440+

0 commit comments

Comments
 (0)