work n new tracing game

src/pages/tracing/tracing2.astro

@@ -0,0 +1,134 @@
+---
+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: 800,
+  height: 600,
+  scene: {
+    create: create,
+    update: update
+  }
+};
+
+const game = new Phaser.Game(config);
+
+let predefinedPath;
+let dragGraphics;
+let isDragging = false;
+
+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);
+
+  // 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);
+
+  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) {
+    const spacing = 0.02; // Adjust this value as needed
+    const distanceThreshold = 10; // Adjust this value as needed
+    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.lineStyle(4, 0xff0000); // Red color for the dragging path
+      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>

src/pages/tracing/tracing3.astro

@@ -0,0 +1,108 @@
+---
+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: 800,
+  height: 600,
+  scene: {
+    create: create,
+    update: update
+  }
+};
+
+const game = new Phaser.Game(config);
+
+let predefinedPath;
+let dragGraphics;
+let isDragging = false;
+let polygon;
+
+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);
+
+  // 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);
+}
+
+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 isInsidePath(x, y) {
+  const pathBounds = predefinedPath.getBounds();
+  return pathBounds.contains(x, y);
+}
+
+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();
+    } else {
+      // If dragged point is outside the predefined path, stop dragging
+      stopDragging();
+    }
+  }
+}
+
+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);
+  }
+}
+
+function stopDragging() {
+  if (isDragging) {
+    isDragging = false;
+    dragGraphics.closePath();
+  }
+}
+
+function update() {
+  // TODO: Update any game logic if needed
+}
+
+</script>