Create script.js

script.js

@@ -0,0 +1,40 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+const cupRect = { x: canvas.width / 2 - 50, y: canvas.height / 2, width: 100, height: 200 };
+const waterRect = { x: canvas.width / 2 - 50, y: canvas.height / 2 + 200, width: 100, height: 0 };
+
+const surfaceTension = 5;
+let gameOver = false;
+
+canvas.addEventListener('mousedown', (event) => {
+    if (!gameOver) {
+        waterRect.height += 5;
+        waterRect.y -= 5;
+    }
+});
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw cup
+    ctx.strokeStyle = 'black';
+    ctx.lineWidth = 5;
+    ctx.strokeRect(cupRect.x, cupRect.y, cupRect.width, cupRect.height);
+
+    // Draw water
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(waterRect.x, waterRect.y, waterRect.width, waterRect.height);
+
+    // Check surface tension
+    if (waterRect.height > cupRect.height + surfaceTension) {
+        gameOver = true;
+        ctx.fillStyle = 'red';
+        ctx.font = '36px sans-serif';
+        ctx.fillText('ゲームオーバー', canvas.width / 2 - 100, canvas.height / 2);
+    }
+
+    requestAnimationFrame(draw);
+}
+
+draw();