02 - Draw Player & Movement

02/02-03/02-03-js.html

    
                

02

This is perfect, code for mousdown movement 360 degrees

    function getMousePosition(event) {
        const rect = canvas.getBoundingClientRect();
        return {
            x: event.clientX - rect.left,
            y: event.clientY - rect.top
        };
    }
    function calculateAngle(mouseX, mouseY, pacmanX, pacmanY) {
        const dx = mouseX - pacmanX;
        const dy = mouseY - pacmanY;
        let angle = Math.atan2(dy, dx) * (180 / Math.PI); // Angle in degrees
    
        // Normalize angle to be between 0 and 360 degrees
        if (angle < 0) {
            angle += 360;
        }
        
        return angle;
    }
    
    canvas.addEventListener('mouseup', e => {
        keys.right.pressed = false
        keys.down.pressed = false
        keys.up.pressed = false
        keys.left.pressed = false

    })
    canvas.addEventListener('pointerup', e => {
        keys.right.pressed = false
        keys.down.pressed = false
        keys.up.pressed = false
        keys.left.pressed = false

    })
    canvas.addEventListener('pointerdown', e => {
        const mousePoint = getMousePosition(e);
        const pacmanCenterX = pacman.position.x;
        const pacmanCenterY = pacman.position.y;
        const angle = calculateAngle(mousePoint.x, mousePoint.y, pacmanCenterX, pacmanCenterY);
        console.log('Angle:', angle.toFixed(2), 'degrees');
        if(angle > 315 || angle < 45){
            keys.right.pressed = true
        } else
        if(angle > 215 && angle < 315){
            keys.up.pressed = true
        } else
        if(angle > 135 && angle < 215){
            keys.left.pressed = true
        } else 
        if(angle > 45 && angle < 135){
            keys.down.pressed = true
        }
    });