Spaces:
Running
Running
| 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(); | |