02-03 - Move Player (click)

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

02

 Use the pointerdown addEventListener, and get the values for clientX and clientY in

, for the pointerup event set ,

  • keys.up.pressed
  • keys.down.pressed
  • ect ... to false

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

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;
}
addEventListener('pointerdown', e => {
    const mousePoint = getMousePosition(e);
    const blockCenterX = block.position.x 
    const blockCenterY = block.position.y 
    const angle = calculateAngle(mousePoint.x, mousePoint.y, blockCenterX, blockCenterY);
    console.log('Angle:', angle.toFixed(2), 'degrees');
    if(angle > 315 || angle < 45){
        block.velocity.x = block.width
    } else
    if(angle > 215 && angle < 315){
        block.velocity.y = (block.width * -1)
    } else
    if(angle > 135 && angle < 215){
        block.velocity.x = (block.width * -1)
    } else 
    if(angle > 45 && angle < 135){
        block.velocity.y = block.width
    }
});

3

**Imporant note use this code in the .css script to prevent highlighting the canvas when your fingers hold down on mobile devices 

canvas {
    -webkit-user-select: none;
    /* Disable text selection in Safari */
    -webkit-touch-callout: none;
    /* Disable callout, like the text copy/paste popup */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* Disable the highlight color */
    user-select: none;
    /* Disable text selection in other browsers */
    touch-action: none;
    /* Disable the default touch behavior */
}