Testing player rotation

%%html
<!DOCTYPE html>
<html>
<head>
    <style>
        #canvas {
            margin: 0;
            border: 1px solid white;
        }
    </style>
</head>
<body>
    <canvas id='canvas'></canvas>
    <script>
        // Create empty canvas
        let canvas = document.getElementById('canvas');
        let c = canvas.getContext('2d');
        // Set the canvas dimensions
        canvas.width = 650;
        canvas.height = 400;
        // Define gravity value
        let gravity = 1.5;
        // Define the Player class
        class Player {
            constructor() {
                // Initial position and velocity of the player
                this.position = {
                    x: 100,
                    y: 200
                };
                this.angle = 0; // Initialize rotation angle
                this.velocity = {
                    x: 0,
                    y: 0
                };
                this.isJumping = false; // Add an "isJumping" flag
                // Dimensions of the player
                this.width = 30;
                this.height = 30;
            }
            // Method to draw the player on the canvas with rotation
            draw() {
                c.save(); // Save the current canvas state
                c.translate(this.position.x + this.width / 2, this.position.y + this.height / 2); // Translate to the center of the player
                c.rotate(this.angle * Math.PI / 180); // Rotate by the current angle (convert to radians)
                c.fillStyle = 'red';
                c.fillRect(-this.width / 2, -this.height / 2, this.width, this.height); // Draw the player centered at (0, 0)
                c.restore(); // Restore the previous canvas state
            }
            // Method to update the player's position and velocity
            update() {
                this.draw();
                this.position.y += this.velocity.y;
                this.position.x += this.velocity.x;
                if (this.position.y + this.height + this.velocity.y <= canvas.height) {
                    this.velocity.y += gravity;
                    // Adjust the angle when jumping
                    if (this.velocity.y < 0) {
                        this.angle = -15; // Change the rotation angle to 90 degrees when jumping
                    } else {
                        this.angle = 0; // Reset the angle when not jumping
                    }
                } else {
                    this.velocity.y = 0;
                    this.angle = 0; // Reset the angle when on the ground
                    this.isJumping = false; // Reset the "isJumping" flag when on the ground
                }
            }
            // Method to handle jumping
            jump() {
                if (!this.isJumping) { // Only allow jumping if not already jumping
                    this.velocity.y = -20;
                    this.isJumping = true; // Set the "isJumping" flag to true
                }
            }
        }
        // Create a player object
        player = new Player();
        // Define keyboard keys and their states
        let keys = {
            right: {
                pressed: false
            },
            left: {
                pressed: false
            }
        };
        // Event listener for keydown events
        addEventListener('keydown', (event) => {
            switch (event.keyCode) {
                case 65:
                    console.log('left');
                    keys.left.pressed = true;
                    break;
                case 83:
                    console.log('down');
                    break;
                case 68:
                    console.log('right');
                    keys.right.pressed = true;
                    break;
                case 87:
                    console.log('up');
                    player.jump(); // Call the jump method when the "up" key is pressed
                    break;
            }
        });
        // Event listener for keyup events
        addEventListener('keyup', (event) => {
            switch (event.keyCode) {
                case 65:
                    console.log('left');
                    keys.left.pressed = false;
                    break;
                case 83:
                    console.log('down');
                    break;
                case 68:
                    console.log('right');
                    keys.right.pressed = false;
                    break;
                case 87:
                    console.log('up');
                    if (player.isJumping) { // Allow a single jump while in the air
                        player.velocity.y = -20;
                    }
                    break;
            }
        });
        // Animation function to continuously update and render the canvas
        function animate() {
            requestAnimationFrame(animate);
            c.clearRect(0, 0, canvas.width, canvas.height);
            player.update();
            if (keys.right.pressed && player.position.x + player.width <= canvas.width - 50) {
                player.velocity.x = 15;
            } else if (keys.left.pressed && player.position.x >= 50) {
                player.velocity.x = -15;
            } else {
                player.velocity.x = 0;
            }
        }
        animate();
    </script>
</body>
</html>
<!DOCTYPE html>
Specific Hacks - Pick One

Try to stop the player from double jumping
Make the player rotate when it jumps (like in the game Geometry Dash)
Open Ended Hack

Make the player a sprite animation