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