incorrect coordinates with event.touches[1].clientX in javascript

41 Views Asked by At

This is the problem... the code below is about 3 elements that you can tap and obtain the coordinates using:

ee.touches[0]; y ee.touches[1]; 

When I activate the first touch in the "botondisparoContenedor" div and try to do the second in "botonleftContenedor" it does not work because it is as if the screen moved a few PX to the right but if I try to do the second touch in "botonrightContenedor" for that same reason.

Maybe it's nonsense but there is no solution. Just learning Javascript so understand my hazing hehehe

<style>
.botonleftContenedor{
    width:19vw;
    height:100vh;
    float:left;
    background-color: #00000090
}
.botonrightContenedor{
    width:19vw;
    height:100vh;
    float:left;
    background-color: #00000090
}
.botondisparoContenedor{
    width:19vw;
    height:100vh;
    float:right;
    background-color: #00000090
}
.inicio{
    width:90vw;
    height:10vh;
}
</style>

<div id="botonleftContenedor" class="botonleftContenedor"></div>
<div id="botonrightContenedor" class="botonrightContenedor"></div>
<div id="botondisparoContenedor" class="botondisparoContenedor"></div>
<div id="inicio" class="inicio"></div>


<script>
//MOVIMIENTO DEL JUGADOR
let actDireccion = 0; //0 Quieto / 1 Derecha / 2 Izquierda
let iniciarMovimiento;
var direccionActual;
var tomaEstaDireccion;
var disparo = 0;
var activadoDisp = 0;

var clickMoverRight = 
document.getElementById('botonrightContenedor');
var clickMoverLeft = 
document.getElementById('botonleftContenedor');
var clickdisparar = 
document.getElementById("botondisparoContenedor");

function accionDireccion(ee) {


if((ee.type === "keydown")||(ee.type === "touchstart")||(ee.type === "mousedown")||(ee.type === "pointerdown")||(ee.type === "touchmove")){


    if(ee.type !== "keydown"){
        var touch = ee.touches[0];
        var posX = touch.clientX;
        var posY = touch.clientY;
        direccionActual = document.elementFromPoint(posX, posY);    
        if(direccionActual.id){     tomaEstaDireccion = direccionActual.id;     }
    }



    if(ee.type !== "keydown"){
        if((tomaEstaDireccion != "botonrightContenedor")&&(tomaEstaDireccion != "botonleftContenedor")){
            touch = ee.touches[1];
            //touch = ee.changedTouches[1];
            posX = touch.clientX;
            posY = touch.clientY;
            direccionActual = document.elementFromPoint(posX, posY);    
            if(direccionActual.id){     tomaEstaDireccion = direccionActual.id;     }
        }
    }

    
document.getElementById("inicio").innerHTML = parseInt(posX) + ' -- ' + parseInt(posY);

    
    if (((ee.keyCode === 39)||(tomaEstaDireccion === "botonrightContenedor"))&&((actDireccion === 0)||(actDireccion === 2))) {
        actDireccion = 1;
    }else if(((ee.keyCode === 37)||(tomaEstaDireccion === "botonleftContenedor"))&&((actDireccion === 0)||(actDireccion === 1))){
        actDireccion = 2;
    }

}else if((ee.type === "keyup")||(ee.type === "touchend")||(ee.type === "mouseup")||(ee.type === "pointerup")){
    
    
    if (((ee.keyCode === 39)||(tomaEstaDireccion === "botonrightContenedor"))&&(actDireccion === 1)){
        actDireccion = 0;
    }else if(((ee.keyCode === 37)||(tomaEstaDireccion === "botonleftContenedor"))&&(actDireccion === 2)){
        actDireccion = 0;
    }
}
}


function dispararAhoraa(event) {

console.log(event.type);
if(((event.keyCode === 32)||(event.type === "keydown")||(event.type === "touchstart")||(event.type === "mousedown")||(event.type === "pointerdown"))&&(activadoDisp === 0)){

        
        if((event.keyCode === 32)||(event.target.id === "botondisparoContenedor")){
        disparo++;

        iniciarDisparos = setInterval(function() {
            disparo++;      
        }, 20);
        activadoDisp = 1;

        }
}

}


function dejaDeDisparar(evente){
if((evente.keyCode === 32)||(evente.type === "keyup")||(evente.type === "touchend")||(evente.type === "mouseup")||(evente.type === "pointerup")){
    activadoDisp = 0;
}   
}



clickdisparar.addEventListener("touchend", dejaDeDisparar);
clickdisparar.addEventListener("touchstart", dispararAhoraa);

clickMoverRight.addEventListener("touchmove", accionDireccion);
clickMoverRight.addEventListener("touchstart", accionDireccion);
clickMoverRight.addEventListener("touchend", accionDireccion);

clickMoverLeft.addEventListener("touchmove", accionDireccion);
clickMoverLeft.addEventListener("touchstart", accionDireccion);
clickMoverLeft.addEventListener("touchend", accionDireccion);


document.addEventListener("keydown", accionDireccion);
document.addEventListener("keyup", accionDireccion);
document.addEventListener("keydown", dispararAhoraa);
document.addEventListener("keyup", dejaDeDisparar);

</script>

I try for the second touch on the screen to show me the real coordinates and not moved a few PX to the right

0

There are 0 best solutions below