Spaces:
Running
Running
Create script.js
Browse files
script.js
ADDED
@@ -0,0 +1,40 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
const canvas = document.getElementById('gameCanvas');
|
2 |
+
const ctx = canvas.getContext('2d');
|
3 |
+
|
4 |
+
const cupRect = { x: canvas.width / 2 - 50, y: canvas.height / 2, width: 100, height: 200 };
|
5 |
+
const waterRect = { x: canvas.width / 2 - 50, y: canvas.height / 2 + 200, width: 100, height: 0 };
|
6 |
+
|
7 |
+
const surfaceTension = 5;
|
8 |
+
let gameOver = false;
|
9 |
+
|
10 |
+
canvas.addEventListener('mousedown', (event) => {
|
11 |
+
if (!gameOver) {
|
12 |
+
waterRect.height += 5;
|
13 |
+
waterRect.y -= 5;
|
14 |
+
}
|
15 |
+
});
|
16 |
+
|
17 |
+
function draw() {
|
18 |
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
19 |
+
|
20 |
+
// Draw cup
|
21 |
+
ctx.strokeStyle = 'black';
|
22 |
+
ctx.lineWidth = 5;
|
23 |
+
ctx.strokeRect(cupRect.x, cupRect.y, cupRect.width, cupRect.height);
|
24 |
+
|
25 |
+
// Draw water
|
26 |
+
ctx.fillStyle = 'blue';
|
27 |
+
ctx.fillRect(waterRect.x, waterRect.y, waterRect.width, waterRect.height);
|
28 |
+
|
29 |
+
// Check surface tension
|
30 |
+
if (waterRect.height > cupRect.height + surfaceTension) {
|
31 |
+
gameOver = true;
|
32 |
+
ctx.fillStyle = 'red';
|
33 |
+
ctx.font = '36px sans-serif';
|
34 |
+
ctx.fillText('ゲームオーバー', canvas.width / 2 - 100, canvas.height / 2);
|
35 |
+
}
|
36 |
+
|
37 |
+
requestAnimationFrame(draw);
|
38 |
+
}
|
39 |
+
|
40 |
+
draw();
|