guided tracing game in conditions
parent
e492d23d70
commit
515f350579
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
function useDiv() {
|
||||
usageCount++;
|
||||
|
||||
let snapshotButton;
|
||||
|
||||
function preload() {
|
||||
// Load your game assets here
|
||||
if (usageCount >= maxUsage) {
|
||||
hideDiv();
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue