3Dgame.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Game</title>
<style>
    body {
        margin: 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #111;
    }

    canvas {
        display: block;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    // Player
    const player = {
        x: canvas.width / 2,
        y: canvas.height - 30,
        width: 50,
        height: 50,
        speed: 5,
        jumping: false
    };

    // Controls
    const keys = {};

    window.addEventListener('keydown', e => {
        keys[e.key] = true;
    });

    window.addEventListener('keyup', e => {
        keys[e.key] = false;
    });

    // Game loop
    function gameLoop() {
        requestAnimationFrame(gameLoop);
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Update player position
        if (keys['ArrowLeft'] && player.x > 0) {
            player.x -= player.speed;
        }

        if (keys['ArrowRight'] && player.x < canvas.width - player.width) {
            player.x += player.speed;
        }

        if (keys[' ']) {
            if (!player.jumping) {
                player.jumping = true;
                jump();
            }
        }

        // Draw player
        ctx.fillStyle = 'green';
        ctx.fillRect(player.x, player.y, player.width, player.height);

        // Draw obstacles (red blocks)
        // You can implement obstacle spawning and movement here

        // Check for collisions
        // You can implement collision detection here

    }

    function jump() {
        let jumpCount = 0;
        const jumpInterval = setInterval(() => {
            if (jumpCount >= 10) {
                clearInterval(jumpInterval);
                player.jumping = false;
                return;
            }
            player.y -= 20;
            jumpCount++;
        }, 20);
    }

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