c

src/pages/tracing/index.astro

@@ -0,0 +1,89 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title='Tracing Game'>
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+    </main>
+</Layout>
+<script is:inline>
+var config = {
+  type: Phaser.AUTO,
+  width: window.innerWidth,
+  height: window.innerHeight,
+  backgroundColor: '#ffffff',
+  parent: 'game-container',
+  scene: {
+    preload: preload,
+    create: create
+  }
+};
+
+var game = new Phaser.Game(config);
+
+var letter;
+var lastX;
+var lastY;
+var graphics;
+var isTracing = false;
+
+function preload() {
+  this.load.image('letter', '/assets/A.png');
+}
+
+function create() {
+  // Add letter sprite to game
+  letter = this.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'letter');
+  
+  // Set interactive property of letter sprite to true
+  letter.setInteractive();
+  
+  // Add event listeners for mouse down and up events on letter sprite
+  this.input.on('pointerdown', startTracing);
+  this.input.on('pointerup', endTracing);
+}
+
+function startTracing(pointer) {
+  // Set tracing flag to true
+  isTracing = true;
+  
+  // Set last coordinates to current pointer coordinates
+  lastX = pointer.x;
+  lastY = pointer.y;
+  
+  // Set tint of letter sprite to indicate tracing has started
+  letter.setTint(0xff0000);
+  
+  // Create graphics object and set line style
+  graphics = this.add.graphics();
+  graphics.lineStyle(10, 0xffffff);
+}
+
+function endTracing() {
+  // Set tracing flag to false
+  isTracing = false;
+  
+  // Clear graphics object
+  graphics.clear();
+  
+  // Reset tint of letter sprite to indicate tracing has ended
+  letter.clearTint();
+}
+
+function update() {
+  // If tracing is in progress, draw line from last coordinates to current pointer coordinates
+  if (isTracing) {
+    graphics.beginPath();
+    graphics.moveTo(lastX, lastY);
+    graphics.lineTo(this.input.activePointer.x, this.input.activePointer.y);
+    graphics.strokePath();
+    lastX = this.input.activePointer.x;
+    lastY = this.input.activePointer.y;
+  }
+}
+</script>
+<style>
+</style>