<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>AI Jumping Cube</title>
    <style>
        body, html { margin: 0; padding: 0; overflow: hidden; }
        canvas { display: block; touch-action: none; }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        let canvasWidth, canvasHeight, scale;

        function resizeCanvas() {
            canvasWidth = window.innerWidth;
            canvasHeight = window.innerHeight;
            scale = Math.min(canvasWidth / 400, canvasHeight / 400);
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            ctx.scale(scale, scale);
        }

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        const cube = {
            x: 200,
            y: 350,
            size: 30,
            dy: 0,
            jumpStrength: -10
        };

        const platforms = [
            {x: 100, y: 300, width: 100, height: 10},
            {x: 250, y: 200, width: 100, height: 10},
            {x: 50, y: 100, width: 100, height: 10}
        ];

        const gravity = 0.5;
        let lastJumpTime = 0;

        function drawCube() {
            ctx.fillStyle = 'red';
            ctx.fillRect(cube.x, cube.y, cube.size, cube.size);
        }

        function drawPlatforms() {
            ctx.fillStyle = 'green';
            platforms.forEach(platform => {
                ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
            });
        }

        function update() {
            cube.dy += gravity;
            cube.y += cube.dy;

            // Collision detection
            platforms.forEach(platform => {
                if (cube.y + cube.size > platform.y &&
                    cube.y < platform.y + platform.height &&
                    cube.x + cube.size > platform.x &&
                    cube.x < platform.x + platform.width) {
                    cube.y = platform.y - cube.size;
                    cube.dy = 0;
                }
            });

            // Improved AI: Jump when near and above a platform
            const currentTime = Date.now();
            if (currentTime - lastJumpTime > 1000) { // Prevent constant jumping
                const nearestPlatform = platforms.find(platform => 
                    platform.y < cube.y && 
                    Math.abs(platform.x - cube.x) < 70 &&
                    cube.y - platform.y < 150
                );

                if (nearestPlatform) {
                    cube.dy = cube.jumpStrength;
                    lastJumpTime = currentTime;
                }
            }

            // Keep cube within canvas
            if (cube.y + cube.size > 400) {
                cube.y = 400 - cube.size;
                cube.dy = 0;
            }
        }

        function gameLoop() {
            ctx.clearRect(0, 0, canvasWidth / scale, canvasHeight / scale);
            update();
            drawPlatforms();
            drawCube();
            requestAnimationFrame(gameLoop);
        }

        gameLoop();
    </script>
</body>
</html>