<!DOCTYPE html>
<html>
<head>
    <title>Top-Down Boat Game</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; background: #87CEEB; }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        // Get the canvas and context
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        resizeCanvas();

        // Adjust canvas size when the window is resized
        window.addEventListener('resize', resizeCanvas);

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        // Timing variables for game loop
        let lastTime = 0;
        function gameLoop(timestamp) {
            const deltaTime = (timestamp - lastTime) / 1000; // Convert to seconds
            lastTime = timestamp;

            update(deltaTime);
            draw();

            requestAnimationFrame(gameLoop);
        }
        requestAnimationFrame(gameLoop);

        // Boat object representing the player's boat
        const boat = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            angle: 0,
            speed: 0,
            maxSpeed: 200, // pixels per second
            acceleration: 200, // pixels per second squared
            rotationSpeed: Math.PI, // radians per second (180 degrees per second)
            width: 40,
            height: 20
        };

        // Key press tracking
        const keys = {};

        window.addEventListener('keydown', function (e) {
            keys[e.code] = true;
        });
        window.addEventListener('keyup', function (e) {
            keys[e.code] = false;
        });

        // Water object for simulation parameters
        const water = {
            waveAmplitude: 20,
            waveLength: 100,
            waveSpeed: 0.2, // waves per second
            time: 0,
        };

        // Update function to handle game logic
        function update(deltaTime) {
            // Boat rotation
            if (keys['ArrowLeft']) {
                boat.angle -= boat.rotationSpeed * deltaTime;
            }
            if (keys['ArrowRight']) {
                boat.angle += boat.rotationSpeed * deltaTime;
            }
            // Boat acceleration
            if (keys['ArrowUp']) {
                boat.speed += boat.acceleration * deltaTime;
            } else if (keys['ArrowDown']) {
                boat.speed -= boat.acceleration * deltaTime;
            } else {
                // Apply friction
                boat.speed *= 0.98;
            }

            // Limit speed
            if (boat.speed > boat.maxSpeed) boat.speed = boat.maxSpeed;
            if (boat.speed < -boat.maxSpeed / 2) boat.speed = -boat.maxSpeed / 2;

            // Update boat position
            boat.x += Math.cos(boat.angle) * boat.speed * deltaTime;
            boat.y += Math.sin(boat.angle) * boat.speed * deltaTime;

            // Keep boat within canvas bounds
            if (boat.x < 0) boat.x = canvas.width;
            if (boat.x > canvas.width) boat.x = 0;
            if (boat.y < 0) boat.y = canvas.height;
            if (boat.y > canvas.height) boat.y = 0;

            // Update water simulation
            updateWater(deltaTime);

            // Get water current at boat's position
            const sinFactor = Math.sin((boat.y / water.waveLength + water.time) * Math.PI * 2);
            const waterCurrent = sinFactor * 50; // pixels per second

            // Apply water current to boat's x position
            boat.x += waterCurrent * deltaTime;
        }

        // Draw function to render the game
        function draw() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Draw water
            drawWater();

            // Boat bobbing effect
            const bobbing = Math.sin((boat.x / water.waveLength + water.time) * Math.PI * 2) * 5;

            // Draw boat
            ctx.save();
            ctx.translate(boat.x, boat.y + bobbing);
            ctx.rotate(boat.angle);
            ctx.fillStyle = 'brown';
            ctx.fillRect(-boat.width / 2, -boat.height / 2, boat.width, boat.height);
            ctx.restore();
        }

        // Update the water simulation time
        function updateWater(deltaTime) {
            water.time += deltaTime * water.waveSpeed;
        }

        // Draw the water with a wave effect
        function drawWater() {
            // Create a gradient for the water
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#1E90FF');
            gradient.addColorStop(1, '#000080');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Overlay wave effect
            ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
            for (let i = 0; i < 10; i++) {
                ctx.beginPath();
                const waveOffset = (water.time + i * 0.5) * 50;
                ctx.moveTo(0, Math.sin(water.time + i) * 10 + waveOffset);
                ctx.bezierCurveTo(
                    canvas.width / 4, Math.sin(water.time + i + 1) * 10 + waveOffset,
                    canvas.width / 2, Math.sin(water.time + i + 2) * 10 + waveOffset,
                    canvas.width, Math.sin(water.time + i + 3) * 10 + waveOffset
                );
                ctx.lineTo(canvas.width, canvas.height);
                ctx.lineTo(0, canvas.height);
                ctx.closePath();
                ctx.fill();
            }
        }
    </script>
</body>
</html>