Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Dog Chase Runner</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
            max-width: 100%;
        }
        body {
            background: #f0f0f0;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // Set canvas size for mobile
        canvas.width = Math.min(360, window.innerWidth);
        canvas.height = Math.min(640, window.innerHeight);

        // Game objects
        const player = {
            x: canvas.width / 2 - 20,
            y: canvas.height - 100,
            width: 40,
            height: 60,
            speed: 5,
            jumping: false,
            jumpHeight: 150,
            yVelocity: 0
        };

        const dog = {
            x: canvas.width / 2 - 25,
            y: canvas.height - 40,
            width: 50,
            height: 30,
            speed: 3
        };

        const obstacles = [];
        let score = 0;
        let gameOver = false;

        // Controls
        let leftPressed = false;
        let rightPressed = false;

        // Generate obstacles
        function createObstacle() {
            const width = Math.random() * 50 + 30;
            obstacles.push({
                x: Math.random() * (canvas.width - width),
                y: -50,
                width: width,
                height: 30,
                speed: 3
            });
        }

        // Jump mechanics
        function jump() {
            if (!player.jumping) {
                player.jumping = true;
                player.yVelocity = -15;
            }
        }

        // Touch controls for mobile
        canvas.addEventListener('touchstart', (e) => {
            const touchX = e.touches[0].clientX - canvas.offsetLeft;
            if (touchX < canvas.width / 3) leftPressed = true;
            else if (touchX > canvas.width * 2 / 3) rightPressed = true;
            else jump();
        });

        canvas.addEventListener('touchend', () => {
            leftPressed = false;
            rightPressed = false;
        });

        // Game loop
        function update() {
            if (gameOver) return;

            // Player movement
            if (leftPressed && player.x > 0) player.x -= player.speed;
            if (rightPressed && player.x < canvas.width - player.width) {
                player.x += player.speed;
            }

            // Jump physics
            if (player.jumping) {
                player.y += player.yVelocity;
                player.yVelocity += 0.8; // Gravity
                if (player.y >= canvas.height - 100) {
                    player.y = canvas.height - 100;
                    player.jumping = false;
                    player.yVelocity = 0;
                }
            }

            // Dog follows player
            if (dog.x < player.x) dog.x += dog.speed;
            if (dog.x > player.x) dog.x -= dog.speed;

            // Obstacle movement and collision
            obstacles.forEach((obs, index) => {
                obs.y += obs.speed;
                if (obs.y > canvas.height) obstacles.splice(index, 1);
                
                // Collision detection
                if (player.x < obs.x + obs.width &&
                    player.x + player.width > obs.x &&
                    player.y < obs.y + obs.height &&
                    player.y + player.height > obs.y) {
                    gameOver = true;
                }
            });

            // Dog collision
            if (player.x < dog.x + dog.width &&
                player.x + player.width > dog.x &&
                player.y < dog.y + dog.height &&
                player.y + player.height > dog.y) {
                gameOver = true;
            }

            // Score and obstacle generation
            score++;
            if (Math.random() < 0.02) createObstacle();
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Draw ground
            ctx.fillStyle = '#666';
            ctx.fillRect(0, canvas.height - 40, canvas.width, 40);

            // Draw player (chubby brunette boy)
            ctx.fillStyle = '#8B4513'; // Brown hair
            ctx.fillRect(player.x + 10, player.y - 10, 20, 20);
            ctx.fillStyle = '#FFDAB9'; // Skin
            ctx.fillRect(player.x + 5, player.y, 30, 30);
            ctx.fillStyle = '#0000FF'; // Blue shirt
            ctx.fillRect(player.x, player.y + 30, 40, 30);

            // Draw dog
            ctx.fillStyle = '#8B4513';
            ctx.fillRect(dog.x, dog.y, dog.width, dog.height);
            ctx.fillStyle = '#000';
            ctx.fillRect(dog.x, dog.y, 10, 10); // Nose

            // Draw obstacles
            ctx.fillStyle = '#FF0000';
            obstacles.forEach(obs => {
                ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
            });

            // Draw score
            ctx.fillStyle = '#000';
            ctx.font = '20px Arial';
            ctx.fillText(`Score: ${score}`, 10, 30);

            if (gameOver) {
                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = '#FFF';
                ctx.font = '40px Arial';
                ctx.fillText('Game Over!', canvas.width/2 - 100, canvas.height/2);
            }
        }

        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

        // Start game
        gameLoop();
    </script>
</body>
</html>
Editor is loading...