Canvas Game - Copy this React, Tailwind Component to your project
Please fix the following code for me so that the image is better <!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Trò chơi bắn cá sinh tồn</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; background: #87CEEB; } </style> </head> <body> <canvas id="gameCanvas"></canvas> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let fish = { x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: 30, dx: (Math.random() 0.5) * 4, dy: (Math.random() 0.5) * 4 }; let score = 0; function drawFish() { ctx.beginPath(); ctx.arc(fish.x, fish.y, fish.size, 0, Math.PI * 2); ctx.fillStyle = 'orange'; ctx.fill(); ctx.closePath(); } function moveFish() { fish.x += fish.dx; fish.y += fish.dy; if (fish.x + fish.size > canvas.width || fish.x fish.size < 0) { fish.dx *= 1; } if (fish.y + fish.size > canvas.height || fish.y fish.size < 0) { fish.dy *= 1; } } function shootFish(event) { const rect = canvas.getBoundingClientRect(); const mouseX = event.clientX rect.left; const mouseY = event.clientY rect.top; const dist = Math.sqrt((mouseX fish.x) ** 2 + (mouseY fish.y) ** 2); if (dist < fish.size) { score++; fish.x = Math.random() * canvas.width; fish.y = Math.random() * canvas.height; fish.dx = (Math.random() 0.5) * 4; fish.dy = (Math.random() 0.5) * 4; } } function drawScore() { ctx.font = '20px Arial'; ctx.fillStyle = 'black'; ctx.fillText('Score: ' + score, 10, 30); } function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawFish(); moveFish(); drawScore(); requestAnimationFrame(gameLoop); } canvas.addEventListener('click', shootFish); gameLoop(); </script> </body> </html>
