Skip to content

Commit 345c002

Browse files
keithclarkkeithclark
committed
Add joystick part
1 parent 6a54497 commit 345c002

File tree

10 files changed

+617
-0
lines changed

10 files changed

+617
-0
lines changed

‎examples/joystick/dual-stick.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Joystick Input</title>
8+
<style>
9+
html, body, kano-app-editor {
10+
width: 100%;
11+
height: 100%;
12+
margin: 0;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<script type="module">
18+
import * as code from '../../index.js';
19+
import * as i18n from '../../i18n.js';
20+
21+
const lang = i18n.getLang();
22+
23+
const app = {
24+
"source": "<xml xmlns=\"http://www.w3.org/1999/xhtml\"><variables><variable type=\"\" id=\"W+}wRK_[8yQ-=peAs38!\">speed</variable></variables><block type=\"app_onStart\" id=\"j-T@yof?NXR;{6mF/IJ/\" x=\"-135\" y=\"22\"><field name=\"FLASH\"></field><statement name=\"CALLBACK\"><block type=\"draw_set_background_color\" id=\"%we|]iJO+T9fRSY3v]An\"><value name=\"COLOR\"><shadow type=\"colour_picker\" id=\"8zxO`OhOfWO;R$1dhk!D\"><field name=\"COLOUR\">#000000</field></shadow></value><next><block type=\"directionStick_moveTo\" id=\"wHxJ3feIK/G=Yr1|uDTB\"><value name=\"X\"><shadow type=\"math_number\" id=\"0T]W-g-QOq~n8,R7oaaZ\"><field name=\"NUM\">100</field></shadow></value><value name=\"Y\"><shadow type=\"math_number\" id=\"2w*~PSG$cFqWs{o|MP?P\"><field name=\"NUM\">500</field></shadow></value><next><block type=\"speedStick_moveTo\" id=\"6u[1be!WX}wNxZ,PPFHV\"><value name=\"X\"><shadow type=\"math_number\" id=\"e,6T_PY~hV,i9UI`{GgH\"><field name=\"NUM\">700</field></shadow></value><value name=\"Y\"><shadow type=\"math_number\" id=\"3cRd!U2-RUfEU|F|n(o(\"><field name=\"NUM\">500</field></shadow></value><next><block type=\"player_image_set\" id=\"X5TrsertKpn_q?cQSO=`\"><value name=\"IMAGE\"><shadow type=\"stamp_getImage\" id=\"^Uj$+}i~%(EQkjk=?ZW5\"><field name=\"STICKER\">rocket</field></shadow></value><next><block type=\"player_setScale\" id=\"^+oxKIil4^]I@BaJExIB\"><value name=\"SCALE\"><shadow type=\"math_number\" id=\"FJ*dEms6GXF^~gg?pP33\"><field name=\"NUM\">50</field></shadow></value><next><block type=\"variables_set\" id=\"vowV8vayz$L-BpB1;qBW\"><field name=\"VAR\" id=\"W+}wRK_[8yQ-=peAs38!\" variabletype=\"\">speed</field><value name=\"VALUE\"><block type=\"math_number\" id=\"-fKh`ljf1jVZ$TL9@McD\"><field name=\"NUM\">0</field></block></value><next><block type=\"player_turn\" id=\"p7)^$[EeJjtCNuocY%Xy\"><field name=\"TYPE\">counterclockwise</field><value name=\"ROTATION\"><shadow type=\"angle\" id=\"fG`kzIl**?B|wJfG^s/e\"><field name=\"VALUE\">45</field></shadow></value></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block><block type=\"every_x_seconds\" id=\"Uaoea|{s@,-9w;i^^=WD\" x=\"270\" y=\"17\"><field name=\"UNIT\">frames</field><value name=\"INTERVAL\"><shadow type=\"math_number\" id=\"oPuc0nBf}3Y+lE`b[isr\"><field name=\"NUM\">1</field></shadow></value><statement name=\"DO\"><block type=\"controls_if\" id=\";cc6B0Ff0e{=1dGj}wU_\"><field name=\"CONFIG\">{\"elseIfs\":1,\"else\":false}</field><value name=\"IF0\"><block type=\"directionStick_left_get\" id=\"uT^oHG27YJB@c_/ERRyk\"></block></value><statement name=\"DO0\"><block type=\"player_turn\" id=\"LEQm~(!HyYp2Lm,V][!O\"><field name=\"TYPE\">counterclockwise</field><value name=\"ROTATION\"><shadow type=\"angle\" id=\"Dnr6gt9dh+]0}HFhgHD!\"><field name=\"VALUE\">0</field></shadow><block type=\"directionStick_force_get\" id=\"kdCk$HFSwucH2qz$(xTh\"></block></value></block></statement><value name=\"IF1\"><block type=\"directionStick_right_get\" id=\"ncs7M4TX?Es/]tzfqTF!\"></block></value><statement name=\"DO1\"><block type=\"player_turn\" id=\"B*`-j2]%_$cw;^Vfny^6\"><field name=\"TYPE\">clockwise</field><value name=\"ROTATION\"><shadow type=\"angle\" id=\"+l88Zc3F,[aVsz2Q+b*r\"><field name=\"VALUE\">0</field></shadow><block type=\"directionStick_force_get\" id=\"jED,P$s1?tKA`2WCO8{2\"></block></value></block></statement><next><block type=\"controls_if\" id=\"Kd@DG;x_[/FG/|[XX4Ff\"><field name=\"CONFIG\">{\"elseIfs\":1,\"else\":true}</field><value name=\"IF0\"><block type=\"speedStick_up_get\" id=\"?U~U(6aRw_gOv{RC$s=R\"></block></value><statement name=\"DO0\"><block type=\"unary\" id=\"qF;-)|xyWe)?ChL_JSlx\"><field name=\"LEFT_HAND\" id=\"W+}wRK_[8yQ-=peAs38!\" variabletype=\"\">speed</field><field name=\"OPERATOR\">+=</field><value name=\"RIGHT_HAND\"><shadow type=\"math_number\" id=\"o}ltwY6]=WG,rZu^vPX3\"><field name=\"NUM\">0.1</field></shadow><block type=\"speedStick_force_get\" id=\"8Xkz,t9^/CK+IAw?u1u@\"></block></value></block></statement><value name=\"IF1\"><block type=\"speedStick_down_get\" id=\"O)8Kf1QYhSRBwxd6v%Kd\"></block></value><statement name=\"DO1\"><block type=\"unary\" id=\"iS+=Of=w,5PFIH=6+s@`\"><field name=\"LEFT_HAND\" id=\"W+}wRK_[8yQ-=peAs38!\" variabletype=\"\">speed</field><field name=\"OPERATOR\">-=</field><value name=\"RIGHT_HAND\"><shadow type=\"math_number\" id=\"o}ltwY6]=WG,rZu^vPX3\"><field name=\"NUM\">0.1</field></shadow><block type=\"speedStick_force_get\" id=\"XGGKR`{D7Px@+Sof)KI*\"></block></value></block></statement><statement name=\"ELSE\"><block type=\"unary\" id=\"v7Gd=GA=@ZP;;u3-6rmb\"><field name=\"LEFT_HAND\" id=\"W+}wRK_[8yQ-=peAs38!\" variabletype=\"\">speed</field><field name=\"OPERATOR\">-=</field><value name=\"RIGHT_HAND\"><shadow type=\"math_number\" id=\"[^046yQ~i5TAUmyA4SJ/\"><field name=\"NUM\">0.5</field></shadow></value></block></statement><next><block type=\"variables_set\" id=\"qikXitRjTQ6//cf$]jlZ\"><field name=\"VAR\" id=\"W+}wRK_[8yQ-=peAs38!\" variabletype=\"\">speed</field><value name=\"VALUE\"><block type=\"math_constrain\" id=\"rctlJ(!`0%fiPr?Pj0br\"><value name=\"VALUE\"><shadow type=\"math_number\" id=\"=(_l}7J8XvTWHdS0yH3h\"><field name=\"NUM\">0</field></shadow><block type=\"variables_get\" id=\"CKv{]W0P/wNo=7/2U|Mp\"><field name=\"VAR\" id=\"W+}wRK_[8yQ-=peAs38!\" variabletype=\"\">speed</field></block></value><value name=\"LOW\"><shadow type=\"math_number\" id=\"R6In[nT/x(tV_I`k{fP$\"><field name=\"NUM\">0</field></shadow></value><value name=\"HIGH\"><shadow type=\"math_number\" id=\"4]Rs3odJ|kTF^jI_/~kk\"><field name=\"NUM\">100</field></shadow></value></block></value><next><block type=\"player_turn\" id=\"5M+WrD^a0LR-mo8Cwgaq\"><field name=\"TYPE\">counterclockwise</field><value name=\"ROTATION\"><shadow type=\"angle\" id=\"xQtzz^BqqU/~aGP5cZxS\"><field name=\"VALUE\">45</field></shadow></value><next><block type=\"player_moveAlong\" id=\"IUCYv$c{L@YG?L%F=9i6\"><value name=\"DISTANCE\"><shadow type=\"math_number\" id=\"doId+,RD]ogoZ`Oax4F+\"><field name=\"NUM\">0</field></shadow><block type=\"math_arithmetic\" id=\"lsb+2+[Iw3TPCfb@|bCm\"><field name=\"OP\">DIVIDE</field><value name=\"A\"><shadow type=\"math_number\" id=\"tE|ZLU*,T-RW!8U3l+=Z\"><field name=\"NUM\">0</field></shadow><block type=\"variables_get\" id=\"/TZ!yN3vQI,`Yis!5-Kz\"><field name=\"VAR\" id=\"W+}wRK_[8yQ-=peAs38!\" variabletype=\"\">speed</field></block></value><value name=\"B\"><shadow type=\"math_number\" id=\"LZ2Cxd0cAP^Bc+bLUqKO\"><field name=\"NUM\">10</field></shadow></value></block></value><next><block type=\"player_turn\" id=\"X!pkfnTNps8d-rLJ{uls\"><field name=\"TYPE\">clockwise</field><value name=\"ROTATION\"><shadow type=\"angle\" id=\"%@sFvHLOd^,fh~C]!I$P\"><field name=\"VALUE\">45</field></shadow></value><next><block type=\"controls_if\" id=\"=k$Po_%4rX6UL*N}8;@y\"><field name=\"CONFIG\">{\"elseIfs\":0,\"else\":false}</field><value name=\"IF0\"><block type=\"logic_compare\" id=\"@n22db@|`m;Hr+crP6so\"><field name=\"OP\">GT</field><value name=\"A\"><block type=\"player_y_get\" id=\"4!z+`^2{dpIEeR^D!]t=\"></block></value><value name=\"B\"><block type=\"math_number\" id=\"ZSOIy2{SB^y/Y9e!ucL(\"><field name=\"NUM\">675</field></block></value></block></value><statement name=\"DO0\"><block type=\"player_moveTo\" id=\"}Lrhgw[c=QY,=zdZbgLy\"><value name=\"X\"><shadow type=\"math_number\" id=\"+)1@oYPqm+E%~Bg=$WD`\"><field name=\"NUM\">0</field></shadow><block type=\"player_x_get\" id=\"{y{w{yf8K;7WWKo2m?0$\"></block></value><value name=\"Y\"><shadow type=\"math_number\" id=\"44bZ9vZJ)PAYiCk_T25J\"><field name=\"NUM\">0</field></shadow><block type=\"math_arithmetic\" id=\"nvCD|Zfi$nkj{nNSVZ*E\"><field name=\"OP\">MINUS</field><value name=\"A\"><shadow type=\"math_number\" id=\"yJomQq(f}6;85OAeK}tS\"><field name=\"NUM\">0</field></shadow><block type=\"player_y_get\" id=\"NCSAX~d|b,9JxgB^zmRq\"></block></value><value name=\"B\"><shadow type=\"math_number\" id=\"/7k8rHTZd;nM0OPpn$|0\"><field name=\"NUM\">745</field></shadow></value></block></value></block></statement><next><block type=\"controls_if\" id=\"f)v5^OWH5ST^oE2K@mBY\"><field name=\"CONFIG\">{\"elseIfs\":0,\"else\":false}</field><value name=\"IF0\"><block type=\"logic_compare\" id=\"tF+k1v2lVv4(,}cH)9]u\"><field name=\"OP\">LT</field><value name=\"A\"><block type=\"player_y_get\" id=\"boGKDRv]Vnk5=9,r8QZg\"></block></value><value name=\"B\"><block type=\"math_number\" id=\"PMRvyzmaNi2PR8U0-Z47\"><field name=\"NUM\">-75</field></block></value></block></value><statement name=\"DO0\"><block type=\"player_moveTo\" id=\"]61}3lwgQ_NA];h{6HC|\"><value name=\"X\"><shadow type=\"math_number\" id=\"+)1@oYPqm+E%~Bg=$WD`\"><field name=\"NUM\">0</field></shadow><block type=\"player_x_get\" id=\"TT(oQ[z58Mh,lB@DRWtb\"></block></value><value name=\"Y\"><shadow type=\"math_number\" id=\"44bZ9vZJ)PAYiCk_T25J\"><field name=\"NUM\">0</field></shadow><block type=\"math_arithmetic\" id=\"/aW7XnORTWJn2m_WK]iD\"><field name=\"OP\">ADD</field><value name=\"A\"><shadow type=\"math_number\" id=\"yJomQq(f}6;85OAeK}tS\"><field name=\"NUM\">0</field></shadow><block type=\"player_y_get\" id=\"Kv5-+G5B;t$fqr|r3?1B\"></block></value><value name=\"B\"><shadow type=\"math_number\" id=\"HH^/D)0MlN+*1(mH8QM{\"><field name=\"NUM\">745</field></shadow></value></block></value></block></statement><next><block type=\"controls_if\" id=\"@OYK7()lgPm!o;0105bZ\"><field name=\"CONFIG\">{\"elseIfs\":0,\"else\":false}</field><value name=\"IF0\"><block type=\"logic_compare\" id=\"]VDWkJ0V9N/QNI$P[)`p\"><field name=\"OP\">GT</field><value name=\"A\"><block type=\"player_x_get\" id=\"!xvoL^f(7~~%=O0A+!NG\"></block></value><value name=\"B\"><block type=\"math_number\" id=\"7|r-t*cZyfK8iuO}iMQr\"><field name=\"NUM\">850</field></block></value></block></value><statement name=\"DO0\"><block type=\"player_moveTo\" id=\"he1,)e6*0wj%Cbi,A6}`\"><value name=\"X\"><shadow type=\"math_number\" id=\"+)1@oYPqm+E%~Bg=$WD`\"><field name=\"NUM\">0</field></shadow><block type=\"math_arithmetic\" id=\"j%]66e0KtQBIk@Xi_BT0\"><field name=\"OP\">MINUS</field><value name=\"A\"><shadow type=\"math_number\" id=\"yJomQq(f}6;85OAeK}tS\"><field name=\"NUM\">0</field></shadow><block type=\"player_x_get\" id=\"Ub+ZEMUDYmRPfxqGBDeg\"></block></value><value name=\"B\"><shadow type=\"math_number\" id=\"pa6F7gP7/BS1UNEji7-/\"><field name=\"NUM\">900</field></shadow></value></block></value><value name=\"Y\"><shadow type=\"math_number\" id=\"44bZ9vZJ)PAYiCk_T25J\"><field name=\"NUM\">0</field></shadow><block type=\"player_y_get\" id=\"MM6!fKl+OSip@1~Y-Wg]\"></block></value></block></statement><next><block type=\"controls_if\" id=\"gVI`U_AFtH{GAmzsqd?f\"><field name=\"CONFIG\">{\"elseIfs\":0,\"else\":false}</field><value name=\"IF0\"><block type=\"logic_compare\" id=\"yEk9{kwb(/-$n$n27T|F\"><field name=\"OP\">LT</field><value name=\"A\"><block type=\"player_x_get\" id=\"CvP78;f`%J58Ed6fPhB1\"></block></value><value name=\"B\"><block type=\"math_number\" id=\"v,GeW_C2i[EieEJJi4xH\"><field name=\"NUM\">-50</field></block></value></block></value><statement name=\"DO0\"><block type=\"player_moveTo\" id=\"T`knS?9lrBTuNmDXg*$$\"><value name=\"X\"><shadow type=\"math_number\" id=\"+)1@oYPqm+E%~Bg=$WD`\"><field name=\"NUM\">0</field></shadow><block type=\"math_arithmetic\" id=\"=Uq[`%w@oT1lA_Cob91=\"><field name=\"OP\">ADD</field><value name=\"A\"><shadow type=\"math_number\" id=\"yJomQq(f}6;85OAeK}tS\"><field name=\"NUM\">0</field></shadow><block type=\"player_x_get\" id=\"u1Pgt[Bj*(h(KyHUU9x?\"></block></value><value name=\"B\"><shadow type=\"math_number\" id=\",s;MXgVU-jJ_bnFvG1ab\"><field name=\"NUM\">900</field></shadow></value></block></value><value name=\"Y\"><shadow type=\"math_number\" id=\"44bZ9vZJ)PAYiCk_T25J\"><field name=\"NUM\">0</field></shadow><block type=\"player_y_get\" id=\"$+)WCZia6WE{v9@1bdk0\"></block></value></block></statement></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></next></block></statement></block></xml>",
25+
"code": "var speed;\n\n\napp.onStart(function() {\n ctx.background = '#000000';\n directionStick.moveTo(100, 500);\n speedStick.moveTo(700, 500);\n player.image = 'rocket';\n player.setScale(50);\n speed = 0;\n player.turnCCW(45);\n\n});\n\ntime.every(1, 'frames', function () {\n if (directionStick.left) {\n player.turnCCW(directionStick.force);\n } else if (directionStick.right) {\n player.turnCW(directionStick.force);\n }\n if (speedStick.up) {\n speed += speedStick.force;\n } else if (speedStick.down) {\n speed -= speedStick.force;\n } else {\n speed -= 0.5;\n }\n speed = Math.min(Math.max(speed, 0), 100);\n player.turnCCW(45);\n player.moveAlong(speed / 10);\n player.turnCW(45);\n if (player.y > 675) {\n player.moveTo(player.x, player.y - 745);\n }\n if (player.y < -75) {\n player.moveTo(player.x, player.y + 745);\n }\n if (player.x > 850) {\n player.moveTo(player.x - 900, player.y);\n }\n if (player.x < -50) {\n player.moveTo(player.x + 900, player.y);\n }\n});\n",
26+
"parts": [
27+
{
28+
"type": "sticker",
29+
"id": "player",
30+
"name": "Player"
31+
},
32+
{
33+
"type": "joystick",
34+
"id": "directionStick",
35+
"name": "DirectionStick",
36+
"axis": 1
37+
},
38+
{
39+
"type": "joystick",
40+
"id": "speedStick",
41+
"name": "SpeedStick",
42+
"axis": 2
43+
}
44+
],
45+
"profile": "default"
46+
};
47+
48+
i18n
49+
.load(lang, { blockly: true, kanoCodePath: '/' })
50+
.then(() => {
51+
const editor = new code.Editor();
52+
editor.load(app)
53+
editor.inject(document.body);
54+
});
55+
56+
</script>
57+
</body>
58+
</html>

0 commit comments

Comments
 (0)