Update script.js

script.js

@@ -1,45 +1,26 @@
 // モジュールの設定
 const { Engine, Render, Runner, Bodies, World, Events } = Matter;
 
-let engine, world, render, runner;
-
-// エンジンとレンダラの初期化
-function initializeEngine() {
-    // 既存のエンジンとレンダラがあればキャンセル
-    if (engine) {
-        Matter.Render.stop(render);
-        Matter.Runner.stop(runner);
-        World.clear(world);
-        Engine.clear(engine);
-        render.canvas.remove();
-        render.canvas = null;
-        render.context = null;
-        render.textures = {};
+// エンジンとワールドの作成
+const engine = Engine.create();
+const world = engine.world;
+
+// レンダラの作成
+const render = Render.create({
+    element: document.body,
+    engine: engine,
+    canvas: document.getElementById('world'),
+    options: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        wireframes: false,
+        background: '#ffffff'
     }
+});
 
-    // 新しいエンジンとワールドを作成
-    engine = Engine.create();
-    world = engine.world;
-
-    // 新しいレンダラを作成
-    render = Render.create({
-        element: document.body,
-        engine: engine,
-        canvas: document.getElementById('world'),
-        options: {
-            width: window.innerWidth,
-            height: window.innerHeight,
-            wireframes: false
-        }
-    });
-
-    Render.run(render);
-    runner = Runner.create();
-    Runner.run(runner, engine);
-}
-
-// 初期化
-initializeEngine();
+Render.run(render);
+const runner = Runner.create();
+Runner.run(runner, engine);
 
 // シミュレーションに必要な変数
 let ball = null;
@@ -48,18 +29,27 @@ let vyData = [];
 let xData = [];
 let tData = [];
 let vxyData = [];
+let breadcrumbs = [];
 let startTime = null;
 
+// キャンバスの境界を取得
+const canvasBounds = render.canvas.getBoundingClientRect();
+
 // クリックイベントで小球を生成
 document.addEventListener('click', (event) => {
+    // キャンバス内のクリックのみ反応
+    if (event.clientX < canvasBounds.left || event.clientX > canvasBounds.right ||
+        event.clientY < canvasBounds.top || event.clientY > canvasBounds.bottom) {
+        return;
+    }
+
+    // 既存のボールがあれば新しいボールを生成しない
     if (ball) {
-        World.remove(world, ball);
-        plotGraphs();
-        initializeEngine(); // エンジンをリセットして再初期化
+        return;
     }
 
-    const x = event.clientX;
-    const y = event.clientY;
+    const x = event.clientX - canvasBounds.left;
+    const y = event.clientY - canvasBounds.top;
     const velocityX = parseFloat(document.getElementById('vx').value);  // ユーザー入力の初速度X
     const velocityY = parseFloat(document.getElementById('vy').value);  // ユーザー入力の初速度Y
 
@@ -68,11 +58,6 @@ document.addEventListener('click', (event) => {
     World.add(world, ball);
 
     // データの初期化
-    vxData = [];
-    vyData = [];
-    xData = [];
-    tData = [];
-    vxyData = [];
     startTime = new Date().getTime();
 });
 
@@ -86,17 +71,32 @@ Events.on(engine, 'beforeUpdate', () => {
         tData.push(elapsedTime);
         vxyData.push({ x: ball.velocity.x, y: ball.velocity.y });
 
+        // BreadCrumbsの追加
+        breadcrumbs.push(Bodies.circle(ball.position.x, ball.position.y, 2, { isStatic: true }));
+        World.add(world, breadcrumbs[breadcrumbs.length - 1]);
+
         // 画面外に出た場合、ボールを削除
         if (ball.position.x < 0 || ball.position.x > window.innerWidth ||
             ball.position.y < 0 || ball.position.y > window.innerHeight) {
             World.remove(world, ball);
             ball = null;
             plotGraphs();
-            initializeEngine(); // エンジンをリセットして再初期化
+            resetVariables();
         }
     }
 });
 
+// 変数をリセットする関数
+function resetVariables() {
+    vxData = [];
+    vyData = [];
+    xData = [];
+    tData = [];
+    vxyData = [];
+    breadcrumbs.forEach(breadcrumb => World.remove(world, breadcrumb));
+    breadcrumbs = [];
+}
+
 // グラフ描画の関数
 function plotGraphs() {
     plotChart('vxChart', 'Velocity-X vs Time', tData, vxData);