Fix this game and improve 100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platformer Game with Enhanced Level Editor</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* Prevent scrollbars */
            background-color: #f2f2f2; /* Light gray background */
        }
        canvas {
            display: block; /* Center the canvas */
            background-color: #87ceeb; /* Sky background */
        }
        #editor {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            display: none; /* Initially hidden */
        }
        #block-palette {
            position: absolute;
            top: 50px;
            left: 10px;
            display: flex;
            gap: 5px;
        }
        .block {
            width: 50px;
            height: 50px;
            cursor: pointer;
        }
        .solid { background-color: green; }
        .hazard { background-color: red; }
        .interactive { background-color: blue; }
        .currency { background-color: gold; }
    </style>
</head>
<body>
    <canvas id="game-canvas" width="800" height="600"></canvas>
    <div id="editor">Level Editor Active</div>
    <div id="block-palette">
        <div class="block solid" data-type="solid"></div>
        <div class="block hazard" data-type="hazard"></div>
        <div class="block interactive" data-type="interactive"></div>
        <div class="block currency" data-type="currency"></div>
    </div>
    <script>
        const canvas = document.getElementById("game-canvas");
        const ctx = canvas.getContext("2d");
        const editorDiv = document.getElementById("editor");
        const blockPalette = document.getElementById("block-palette");

        // Define player properties
        let player = {
            x: 50,
            y: 50,
            width: 50,
            height: 50,
            speed: 5,
            jumping: false,
            yVelocity: 0,
        };

        // Define keyboard controls
        let rightPressed = false;
        let leftPressed = false;
        let jumpPressed = false;
        let editorActive = false; // Level editor state
        let currentBlockType = 'solid'; // Default block type
        let blocks = []; // Array to hold blocks

        // Event listeners for keyboard controls
        document.addEventListener("keydown", (event) => {
            if (event.code === "ArrowRight") rightPressed = true;
            else if (event.code === "ArrowLeft") leftPressed = true;
            else if (event.code === "Space") jumpPressed = true;
            else if (event.code === "Digit0") toggleEditor(); // Toggle editor on '0'
        });

        document.addEventListener("keyup", (event) => {
            if (event.code === "ArrowRight") rightPressed = false;
            else if (event.code === "ArrowLeft") leftPressed = false;
            else if (event.code === "Space") jumpPressed = false;
        });

        // Block palette click event
        blockPalette.addEventListener("click", (event) => {
            if (event.target.classList.contains("block")) {
                currentBlockType = event.target.getAttribute("data-type");
                console.log(`Current Block Type: ${currentBlockType}`);
            }
        });

        // Toggle Level Editor
        function toggleEditor() {
            editorActive = !editorActive; // Toggle the state
            editorDiv.style.display = editorActive ? 'block' : 'none'; // Show/hide editor UI
            if (editorActive) {
                console.log("Level Editor Activated");
            } else {
                console.log("Level Editor Deactivated");
            }
        }

        // Platforms
        let platforms = [
            { x: 0, y: 550, width: 800, height: 50 },
            { x: 300, y: 400, width: 200, height: 25 },
        ];

        // Draw player
        function drawPlayer() {
            ctx.fillStyle = "blue";
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }

        // Draw platforms and blocks
        function drawPlatforms() {
            ctx.fillStyle = "green";
            platforms.forEach(platform => {
                ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
            });
            // Draw blocks
            blocks.forEach(block => {
                ctx.fillStyle = getBlockColor(block.type);
                ctx.fillRect(block.x, block.y, 50, 50);
            });
        }

        // Get block color based on type
        function getBlockColor(type) {
            switch (type) {
                case 'solid': return 'green'; // Solid block
                case 'hazard': return 'red'; // Hazard block
                case 'interactive': return 'blue'; // Interactive block
                case 'currency': return 'gold'; // Currency block
                default: return 'gray'; // Default color
            }
        }

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

            // Jumping logic
            if (jumpPressed && !player.jumping) {
                player.jumping = true;
                player.yVelocity = -10; // Jump force
            }

            // Apply gravity
            player.yVelocity += 0.5; // Gravity
            player.y += player.yVelocity;

            // Check for landing
            if (player.y + player.height > canvas.height) {
                player.jumping = false;
                player.y = canvas.height - player.height; // Snap to ground
                player.yVelocity = 0; // Reset vertical velocity
            }
        }

        // Collision detection
        function checkCollision(player, platform) {
            let bottom = player.y + player.height >= platform.y;
            let top = player.y <= platform.y + platform.height;
            let right = player.x + player.width >= platform.x;
            let left = player.x <= platform.x + platform.width;

            return bottom && top && right && left;
        }

        function handleCollision() {
            platforms.forEach(platform => {
                if (checkCollision(player, platform)) {
                    if (player.yVelocity > 0) {
                        player.jumping = false;
                        player.y = platform.y - player.height; // Snap to the top of the platform
                        player.yVelocity = 0; // Reset vertical velocity
                    }
                }
            });
        }

        // Add block to the level
        canvas.addEventListener("click", (event) => {
            if (editorActive) {
                const rect = canvas.getBoundingClientRect();
                const x = Math.floor((event.clientX - rect.left) / 50) * 50; // Snap to grid
                const y = Math.floor((event.clientY - rect.top) / 50) * 50; // Snap to grid
                blocks.push({ x: x, y: y, type: currentBlockType });
            }
        });

        // Game loop
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlatforms();
            drawPlayer();
            movePlayer();
            handleCollision();
            requestAnimationFrame(gameLoop);
        }

        // Start the game loop
        requestAnimationFrame(gameLoop);
    </script>
</body>
</html>