guided tracing game in conditions
This commit is contained in:
BIN
public/assets/audio/cross.mp3
Executable file
BIN
public/assets/audio/cross.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/dot.mp3
Executable file
BIN
public/assets/audio/dot.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/down-tail.mp3
Executable file
BIN
public/assets/audio/down-tail.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/down.mp3
Executable file
BIN
public/assets/audio/down.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/hook-arround-close.mp3
Executable file
BIN
public/assets/audio/hook-arround-close.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/hook-arround-snake.mp3
Executable file
BIN
public/assets/audio/hook-arround-snake.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/hook-arround.mp3
Executable file
BIN
public/assets/audio/hook-arround.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/hook-down.mp3
Executable file
BIN
public/assets/audio/hook-down.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/slant-left.mp3
Executable file
BIN
public/assets/audio/slant-left.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/slant-right.mp3
Executable file
BIN
public/assets/audio/slant-right.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/slant.mp3
Executable file
BIN
public/assets/audio/slant.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/slide.mp3
Executable file
BIN
public/assets/audio/slide.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/small-down.mp3
Executable file
BIN
public/assets/audio/small-down.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/tall-down-curve-up.mp3
Executable file
BIN
public/assets/audio/tall-down-curve-up.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/tall-down.mp3
Executable file
BIN
public/assets/audio/tall-down.mp3
Executable file
Binary file not shown.
BIN
public/assets/audio/tall-hook.mp3
Executable file
BIN
public/assets/audio/tall-hook.mp3
Executable file
Binary file not shown.
267
public/assets/letter/a.svg
Normal file
267
public/assets/letter/a.svg
Normal file
@@ -0,0 +1,267 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="100mm"
|
||||
height="100mm"
|
||||
viewBox="0 0 100 100"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:export-filename="a_l3.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
sodipodi:docname="a_l3.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
showguides="true"
|
||||
inkscape:zoom="1.4478969"
|
||||
inkscape:cx="172.3189"
|
||||
inkscape:cy="215.48496"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1011"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1">
|
||||
<sodipodi:guide
|
||||
position="50.044837,106.13694"
|
||||
orientation="1,0"
|
||||
id="guide61"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="-6.8261376,96.826178"
|
||||
orientation="1,0"
|
||||
id="guide65"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="34.933229,103.49635"
|
||||
orientation="1,0"
|
||||
id="guide67"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="74.707741,24.892522"
|
||||
orientation="0,-1"
|
||||
id="guide69"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="109.48582,93.369913"
|
||||
orientation="0,-1"
|
||||
id="guide71"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="65.121878,12.99501"
|
||||
orientation="1,0"
|
||||
id="guide550"
|
||||
inkscape:locked="false" />
|
||||
</sodipodi:namedview>
|
||||
<defs
|
||||
id="defs2">
|
||||
<marker
|
||||
style="overflow:visible"
|
||||
id="Arrow2"
|
||||
refX="0"
|
||||
refY="0"
|
||||
orient="auto-start-reverse"
|
||||
inkscape:stockid="Arrow2"
|
||||
markerWidth="7.6999998"
|
||||
markerHeight="5.5999999"
|
||||
viewBox="0 0 7.7 5.6"
|
||||
inkscape:isstock="true"
|
||||
inkscape:collect="always"
|
||||
preserveAspectRatio="xMidYMid">
|
||||
<path
|
||||
transform="scale(0.7)"
|
||||
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
|
||||
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
|
||||
id="arrow2L" />
|
||||
</marker>
|
||||
<marker
|
||||
style="overflow:visible"
|
||||
id="Arrow2-3"
|
||||
refX="0"
|
||||
refY="0"
|
||||
orient="auto-start-reverse"
|
||||
inkscape:stockid="Arrow2"
|
||||
markerWidth="7.6999998"
|
||||
markerHeight="5.5999999"
|
||||
viewBox="0 0 7.7 5.6"
|
||||
inkscape:isstock="true"
|
||||
inkscape:collect="always"
|
||||
preserveAspectRatio="xMidYMid">
|
||||
<path
|
||||
transform="scale(0.7)"
|
||||
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
|
||||
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
|
||||
id="arrow2L-6" />
|
||||
</marker>
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
style="display:inline">
|
||||
<g
|
||||
id="g19985"
|
||||
style="display:none">
|
||||
<path
|
||||
style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 42.014207,78.885553 33.868367,0.105865"
|
||||
id="path1106" />
|
||||
<path
|
||||
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
|
||||
d="M 54.585716,79.075266 44.449435,78.916887"
|
||||
id="path9586"
|
||||
sodipodi:nodetypes="cc" />
|
||||
<circle
|
||||
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="circle9592"
|
||||
cx="-78.125687"
|
||||
cy="44.021099"
|
||||
r="1.2760839"
|
||||
transform="rotate(-88.91827)" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
x="41.672253"
|
||||
y="79.868111"
|
||||
id="text9761"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan9759"
|
||||
style="stroke-width:0.117792"
|
||||
x="41.672253"
|
||||
y="79.868111">4</tspan></text>
|
||||
</g>
|
||||
<path
|
||||
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:5.49547;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 49.392708,9.2082826 C 49.531367,8.0491252 27.044036,72.244814 27.044036,72.244814"
|
||||
id="path127"
|
||||
sodipodi:nodetypes="cc" />
|
||||
<g
|
||||
id="g650"
|
||||
transform="translate(-0.41310827,-0.00731495)"
|
||||
inkscape:transform-center-x="0.058802502"
|
||||
inkscape:transform-center-y="-0.015142275">
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
x="46.800331"
|
||||
y="15.960659"
|
||||
id="text9342"
|
||||
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan9340"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
|
||||
x="46.800331"
|
||||
y="15.960659">1</tspan></text>
|
||||
<circle
|
||||
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="path9448"
|
||||
cx="-48.065395"
|
||||
cy="-13.491238"
|
||||
r="1.2760839"
|
||||
transform="rotate(-178.67073)" />
|
||||
</g>
|
||||
<path
|
||||
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
|
||||
d="m 42.981079,26.489528 c 0.740859,-2.014661 3.661919,-9.743031 3.661919,-9.743031"
|
||||
id="path13743"
|
||||
sodipodi:nodetypes="cc"
|
||||
inkscape:transform-center-x="1.9143729"
|
||||
inkscape:transform-center-y="5.0531116" />
|
||||
<g
|
||||
id="g1238"
|
||||
style="display:inline">
|
||||
<path
|
||||
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 36.897143,48.164759 26.507248,0.07809"
|
||||
id="path1108" />
|
||||
<path
|
||||
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
|
||||
d="M 48.768524,48.161093 39.639351,48.31565"
|
||||
id="path9576"
|
||||
sodipodi:nodetypes="cc"
|
||||
inkscape:transform-center-x="-4.8199192"
|
||||
inkscape:transform-center-y="0.3134404" />
|
||||
<g
|
||||
id="g21538"
|
||||
transform="translate(-21.46967,-27.579792)"
|
||||
style="display:inline">
|
||||
<ellipse
|
||||
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
|
||||
id="circle9582"
|
||||
cx="-74.661598"
|
||||
cy="60.70055"
|
||||
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
|
||||
rx="1.2146922"
|
||||
ry="1.1834064" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
|
||||
x="59.531094"
|
||||
y="75.579971"
|
||||
id="text9714"
|
||||
transform="scale(0.98702867,1.0131418)"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan9712"
|
||||
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
x="59.531094"
|
||||
y="75.579971">3</tspan></text>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 49.945039,9.1516334 C 50.028779,9.4481077 73.189935,72.317745 73.189935,72.317745"
|
||||
id="path15674"
|
||||
sodipodi:nodetypes="cc" />
|
||||
<g
|
||||
id="g1205"
|
||||
transform="translate(0.35203906,0.62379443)"
|
||||
style="display:inline">
|
||||
<g
|
||||
id="g1198"
|
||||
transform="translate(-0.48682415,0.59660565)"
|
||||
style="display:inline">
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
x="49.768463"
|
||||
y="10.649764"
|
||||
id="text15678"
|
||||
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan15676"
|
||||
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
|
||||
x="49.768463"
|
||||
y="10.649764">2</tspan></text>
|
||||
<circle
|
||||
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="circle15680"
|
||||
cx="-50.731476"
|
||||
cy="-8.3328476"
|
||||
r="1.2760839"
|
||||
transform="rotate(-178.35508)" />
|
||||
</g>
|
||||
<path
|
||||
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
|
||||
d="M 54.145899,21.77088 C 53.442717,19.74276 50.806456,11.912664 50.806456,11.912664"
|
||||
id="path15682"
|
||||
sodipodi:nodetypes="cc"
|
||||
inkscape:transform-center-x="-1.6158511"
|
||||
inkscape:transform-center-y="4.8664848" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
29
public/assets/letter/a_l1.svg
Executable file
29
public/assets/letter/a_l1.svg
Executable file
@@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="100mm"
|
||||
height="100mm"
|
||||
viewBox="0 0 100 100"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
id="layer1">
|
||||
<path
|
||||
style="display:inline;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 49.925556,10.09664 22.308074,75.026486"
|
||||
id="path127" />
|
||||
<path
|
||||
style="display:none;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 75.756485,74.942739 50.166178,10.127525"
|
||||
id="path3061" />
|
||||
<path
|
||||
style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.68958;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 63.210757,47.79348 36.256704,48.025633"
|
||||
id="path3063" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
29
public/assets/letter/a_l2.svg
Executable file
29
public/assets/letter/a_l2.svg
Executable file
@@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="100mm"
|
||||
height="100mm"
|
||||
viewBox="0 0 100 100"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
id="layer1">
|
||||
<path
|
||||
style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 49.925556,10.09664 22.308074,75.026486"
|
||||
id="path127" />
|
||||
<path
|
||||
style="display:inline;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 75.756485,74.942739 50.166178,10.127525"
|
||||
id="path3061" />
|
||||
<path
|
||||
style="display:none;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.68958;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 63.210757,47.79348 36.256704,48.025633"
|
||||
id="path3063" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
29
public/assets/letter/a_l3.svg
Executable file
29
public/assets/letter/a_l3.svg
Executable file
@@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="100mm"
|
||||
height="100mm"
|
||||
viewBox="0 0 100 100"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
id="layer1">
|
||||
<path
|
||||
style="display:none;fill:#000000;fill-opacity:1;stroke:#009e40;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 49.925556,10.09664 22.308074,75.026486"
|
||||
id="path127" />
|
||||
<path
|
||||
style="display:none;fill:#000000;fill-opacity:1;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 75.756485,74.942739 50.166178,10.127525"
|
||||
id="path3061" />
|
||||
<path
|
||||
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:4.68958;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 63.210757,47.79348 36.256704,48.025633"
|
||||
id="path3063" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -33,7 +33,7 @@ const { title } = Astro.props;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
} */
|
||||
body{
|
||||
/* body{
|
||||
font-family: quicksand;
|
||||
animation: fadeInAnimation ease 6s;
|
||||
animation-iteration-count: 1;
|
||||
@@ -46,5 +46,5 @@ const { title } = Astro.props;
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
|
||||
@@ -1,49 +1,29 @@
|
||||
<main>
|
||||
<div>
|
||||
<button onclick="useDiv()">Use Div</button>
|
||||
<div id="myDiv">
|
||||
This is the div to hide.
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script is:inline>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800, // Replace with your game width
|
||||
height: 600, // Replace with your game height
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update
|
||||
let usageCount = 0;
|
||||
const maxUsage = 3; // Change this to the desired limit
|
||||
|
||||
function useDiv() {
|
||||
usageCount++;
|
||||
|
||||
if (usageCount >= maxUsage) {
|
||||
hideDiv();
|
||||
}
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
let snapshotButton;
|
||||
|
||||
function preload() {
|
||||
// Load your game assets here
|
||||
}
|
||||
|
||||
function create() {
|
||||
// Create your game objects and setup your scene
|
||||
|
||||
// Create a button to take a snapshot
|
||||
snapshotButton = this.add.text(10, 10, 'Snapshot', { fontSize: '24px', fill: '#fff' });
|
||||
snapshotButton.setInteractive();
|
||||
snapshotButton.on('pointerdown', takeSnapshot, this);
|
||||
function hideDiv() {
|
||||
const divToHide = document.getElementById('myDiv');
|
||||
if (divToHide) {
|
||||
divToHide.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function update() {
|
||||
// Update your game logic here
|
||||
}
|
||||
|
||||
function takeSnapshot() {
|
||||
// Capture a snapshot of the game canvas
|
||||
game.renderer.snapshot(snapshot => {
|
||||
const snapshotImage = snapshot.image;
|
||||
|
||||
// Create a temporary HTML anchor element for downloading
|
||||
const a = document.createElement('a');
|
||||
a.href = snapshotImage.src;
|
||||
a.download = 'snapshot.png';
|
||||
|
||||
// Trigger a click event to download the snapshot
|
||||
a.dispatchEvent(new MouseEvent('click'));
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -9,100 +9,126 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
x: isMobile ? 0 : window.innerWidth / 4,
|
||||
y: window.innerHeight / 4,
|
||||
width: isMobile ? window.innerWidth : window.innerWidth / 2,
|
||||
height: window.innerHeight / 2,
|
||||
};
|
||||
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor: 0xffffff,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update
|
||||
}
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
const customWidth = window.innerWidth;
|
||||
const customHeight = window.innerHeight;
|
||||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
|
||||
let predefinedPath;
|
||||
let dragGraphics;
|
||||
let isDragging = false;
|
||||
let polygon;
|
||||
function preload() {
|
||||
this.load.svg('letterA', '/assets/letter/a.svg');
|
||||
this.load.svg('layer1', '/assets/letter/a_l1.svg');
|
||||
this.load.svg('layer2', '/assets/letter/a_l2.svg');
|
||||
this.load.svg('layer3', '/assets/letter/a_l3.svg');
|
||||
this.load.audio('letterAAudio1', '/assets/audio/hook-arround-snake.mp3');
|
||||
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
|
||||
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
|
||||
this.load.audio('slide', '/assets/audio/slide.mp3');
|
||||
}
|
||||
|
||||
function create() {
|
||||
// Define the predefined path (letter 'A' in this example)
|
||||
predefinedPath = new Phaser.Curves.Path(100, 300);
|
||||
predefinedPath.lineTo(300, 100);
|
||||
predefinedPath.lineTo(500, 300);
|
||||
predefinedPath.moveTo(200, 200);
|
||||
predefinedPath.lineTo(400, 200);
|
||||
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
||||
|
||||
// Create graphics for the predefined path (letter 'A' in this example)
|
||||
const graphics = this.add.graphics();
|
||||
graphics.lineStyle(2, 0x00ff00); // Green color for the predefined path
|
||||
predefinedPath.draw(graphics);
|
||||
|
||||
// Create a polygon from the predefined path points
|
||||
polygon = new Phaser.Geom.Polygon(predefinedPath.curves.flatMap(curve => calculateSpacedPoints(curve, 0.02)));
|
||||
|
||||
dragGraphics = this.add.graphics();
|
||||
this.input.on('pointerdown', startDragging);
|
||||
this.input.on('pointerup', stopDragging);
|
||||
this.input.on('pointermove', dragWithinPath);
|
||||
this.time.delayedCall(2000, () => {
|
||||
firstScreen.setVisible(false);
|
||||
showLayers.call(this);
|
||||
}, [], this);
|
||||
}
|
||||
|
||||
function calculateSpacedPoints(curve, spacing) {
|
||||
const spacedPoints = [];
|
||||
function showLayers() {
|
||||
let textX, textY;
|
||||
|
||||
for (let t = 0; t <= 1; t += spacing) {
|
||||
const point = curve.getPoint(t);
|
||||
spacedPoints.push({ x: point.x, y: point.y });
|
||||
}
|
||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left').setTint(0x05b3a4);
|
||||
const slantLeftAudio = this.sound.add('slantLeft');
|
||||
slantLeftAudio.play();
|
||||
firstLayer.setDepth(1);
|
||||
firstLayer.setAlpha(0.5);
|
||||
firstLayer.setInteractive({ draggable: true });
|
||||
|
||||
return spacedPoints;
|
||||
}
|
||||
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
|
||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right').setTint(0x05b3a4);
|
||||
const slantRightAudio = this.sound.add('slantRight');
|
||||
secondTextLayer.setVisible(false);
|
||||
secondLayer.setDepth(1);
|
||||
secondLayer.setAlpha(0.5);
|
||||
secondLayer.setInteractive({ draggable: true });
|
||||
secondLayer.setVisible(false);
|
||||
|
||||
function isInsidePath(x, y) {
|
||||
const pathBounds = predefinedPath.getBounds();
|
||||
return pathBounds.contains(x, y);
|
||||
}
|
||||
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
|
||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||
const thirdTextLayer = this.add.text(textX, textY, '3. Slide').setTint(0x05b3a4);
|
||||
const slideAudio = this.sound.add('slide');
|
||||
thirdTextLayer.setVisible(false);
|
||||
thirdLayer.setDepth(1.1);
|
||||
thirdLayer.setScale(1.15);
|
||||
thirdLayer.setAlpha(0.5);
|
||||
thirdLayer.setInteractive({ draggable: true });
|
||||
thirdLayer.setVisible(false);
|
||||
|
||||
function dragWithinPath(pointer) {
|
||||
if (isDragging) {
|
||||
const dragX = pointer.x;
|
||||
const dragY = pointer.y;
|
||||
|
||||
// Check if the dragged point is within the predefined path
|
||||
const isInside = isInsidePath(dragX, dragY);
|
||||
|
||||
if (isInside) {
|
||||
// Draw a line to represent the dragged path
|
||||
dragGraphics.lineStyle(4, 0xff0000); // Set red color for the dragging path
|
||||
dragGraphics.lineTo(dragX, dragY);
|
||||
dragGraphics.strokePath();
|
||||
firstLayer.on('drag', (pointer) => {
|
||||
if (pointer.isDown) {
|
||||
firstTextLayer.setVisible(false);
|
||||
secondTextLayer.setVisible(true);
|
||||
slantRightAudio.play();
|
||||
secondLayer.setVisible(true);
|
||||
firstLayer.setAlpha(1);
|
||||
secondLayer.setAlpha(0.5);
|
||||
thirdLayer.setAlpha(0.5);
|
||||
} else {
|
||||
// If dragged point is outside the predefined path, stop dragging
|
||||
stopDragging();
|
||||
firstLayer.setAlpha(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function startDragging(pointer) {
|
||||
if (!isDragging && predefinedPath) {
|
||||
isDragging = true;
|
||||
// dragGraphics.clear();
|
||||
dragGraphics.lineStyle(4, 0xff0000); // Red color for the dragging path
|
||||
dragGraphics.beginPath();
|
||||
dragGraphics.moveTo(pointer.x, pointer.y);
|
||||
secondLayer.on('drag', (pointer) => {
|
||||
if (pointer.isDown) {
|
||||
graphics = this.add.graphics();
|
||||
graphics.lineStyle(50, 0x5e17eb);
|
||||
secondTextLayer.setVisible(false);
|
||||
thirdTextLayer.setVisible(true);
|
||||
slideAudio.play();
|
||||
thirdLayer.setVisible(true);
|
||||
secondLayer.setAlpha(1);
|
||||
thirdLayer.setAlpha(0.5);
|
||||
} else {
|
||||
secondLayer.setAlpha(0.5);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function stopDragging() {
|
||||
if (isDragging) {
|
||||
isDragging = false;
|
||||
dragGraphics.closePath();
|
||||
thirdLayer.on('drag', (pointer) => {
|
||||
if (pointer.isDown) {
|
||||
thirdLayer.setAlpha(1);
|
||||
} else {
|
||||
thirdLayer.setAlpha(0.5);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function update() {
|
||||
// TODO: Update any game logic if needed
|
||||
// Update any game logic if needed
|
||||
}
|
||||
|
||||
</script>
|
||||
146
src/pages/tracing/tracing4.astro
Normal file
146
src/pages/tracing/tracing4.astro
Normal file
@@ -0,0 +1,146 @@
|
||||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
---
|
||||
<Layout title="Guided Letter Tracing Game">
|
||||
<main>
|
||||
<div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor: 0xffffff,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update
|
||||
}
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
const customWidth = window.innerWidth;
|
||||
const customHeight = window.innerHeight;
|
||||
|
||||
let predefinedPath;
|
||||
let dragGraphics;
|
||||
let isDragging = false;
|
||||
|
||||
function preload() {
|
||||
this.load.svg('layer1', '/assets/a_l1.svg');
|
||||
this.load.svg('layer2', '/assets/a_l2.svg');
|
||||
this.load.svg('layer3', '/assets/a_l3.svg');
|
||||
}
|
||||
function create() {
|
||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
||||
firstLayer.setDepth(1);
|
||||
firstLayer.setAlpha(0.5);
|
||||
firstLayer.setInteractive();
|
||||
|
||||
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
|
||||
secondLayer.setDepth(1);
|
||||
secondLayer.setAlpha(0.5);
|
||||
secondLayer.setInteractive();
|
||||
|
||||
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
|
||||
thirdLayer.setDepth(1.1);
|
||||
thirdLayer.setScale(1.15);
|
||||
thirdLayer.setAlpha(0.5);
|
||||
thirdLayer.setInteractive();
|
||||
|
||||
dragGraphics = this.add.graphics();
|
||||
this.input.on('pointerdown', startDragging);
|
||||
this.input.on('pointerup', stopDragging);
|
||||
this.input.on('pointermove', dragWithinPath);
|
||||
}
|
||||
|
||||
function calculateSpacedPoints(curve, spacing) {
|
||||
const spacedPoints = [];
|
||||
|
||||
for (let t = 0; t <= 1; t += spacing) {
|
||||
const point = curve.getPoint(t);
|
||||
spacedPoints.push({ x: point.x, y: point.y });
|
||||
}
|
||||
|
||||
return spacedPoints;
|
||||
}
|
||||
function dragWithinPath(pointer) {
|
||||
if (isDragging) {
|
||||
const dragX = pointer.x;
|
||||
const dragY = pointer.y;
|
||||
|
||||
// Check if the dragged point is inside the predefined path
|
||||
const isInsidePath = predefinedPath.contains(dragX, dragY);
|
||||
|
||||
if (isInsidePath) {
|
||||
// Draw a line to represent the dragged path
|
||||
dragGraphics.lineTo(dragX, dragY);
|
||||
dragGraphics.strokePath();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function startDragging(pointer) {
|
||||
if (!isDragging && predefinedPath) {
|
||||
firstLayer.setAlpha(1);
|
||||
let isNearPath = false;
|
||||
|
||||
// Iterate through the curves of the predefined path
|
||||
for (let i = 0; i < predefinedPath.curves.length; i++) {
|
||||
const curve = predefinedPath.curves[i];
|
||||
const spacedPoints = calculateSpacedPoints(curve, spacing);
|
||||
|
||||
// Check if the pointer is within a certain distance to any of the spaced points
|
||||
for (let j = 0; j < spacedPoints.length; j++) {
|
||||
const point = spacedPoints[j];
|
||||
const distance = Phaser.Math.Distance.Between(point.x, point.y, pointer.x, pointer.y);
|
||||
|
||||
if (distance < distanceThreshold) {
|
||||
isNearPath = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (isNearPath) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (isNearPath) {
|
||||
isDragging = true;
|
||||
dragGraphics.clear();
|
||||
dragGraphics.beginPath();
|
||||
dragGraphics.moveTo(pointer.x, pointer.y);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function stopDragging() {
|
||||
if (isDragging) {
|
||||
isDragging = false;
|
||||
isDraggingInsidePath = false; // Reset the flag when dragging stops
|
||||
dragGraphics.closePath();
|
||||
}
|
||||
}
|
||||
|
||||
function dragWithinPath(pointer) {
|
||||
if (isDragging) {
|
||||
// TODO: Fill the dragged area within the predefined path with red color
|
||||
// You can add the logic to fill the dragged area within the predefined path with red color here.
|
||||
// The logic will depend on how you want to fill the area.
|
||||
// For simplicity, you can just draw a line as shown below:
|
||||
dragGraphics.lineTo(pointer.x, pointer.y);
|
||||
dragGraphics.strokePath();
|
||||
}
|
||||
}
|
||||
|
||||
function update() {
|
||||
// TODO: Update any game logic if needed
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user