Noticias

Importante: ¡Si quieres publicar tu juego no olvides leer este tema!

* Sponsor

Comunidad Game Maker

Bienvenid@ a la comunidad hispana de Game Maker. Nuestro objetivo es crear videojuegos y dar soporte en castellano de GM. Para mejorar nuestro servicio hemos implantado, como adicion al reglamento general, algunas normas especificas en los subforos más comunes. ¡No olvides informarte antes de participar!.

Autor Tema: Joystick táctiles para juegos html5 en proceso.  (Leído 2347 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado dixon

en: Agosto 13, 2021, 04:04:16 am
Hola, gusto en saludarlos:


 Al final de este post se encuentra la ultima versión del código de joysticks táctiles para juegos html5.



Joystick táctiles para juegos html5 en proceso.

1.   Quiero crear un joystick táctil para juegos html5 y no puedo emplear el draw gui porque no funciona en exploradores.

2.   El año pasado cree un sistema engorroso y orrible de escalas para lograr imitar la función draw gui en exploradores y logré crear joytick táctiles para el juego “adiós capitán”. Pero es demasiado complicado y los resultados no son del todo agradables (Mira el juego y dale un like, XD). En el proceso aprendí algunas cosas y este es el punto 3:

3.   Se pueden crear Joytick táctiles para juegos html5 empleando un pequeño sistema de tres views manejado por un script encargado de escalar las views para que dé un resultado parecido a este:




1.   Para lograrlo hay que crear una view principal que se ajuste al tamaño del explorador.

2.   Una seguna view que contenga el juego.

3.   Una tercera view que contenga el joystick táctil.
Parece fácil pero no:

1.   Para que todo quede ajustado deben escalarse proporcionalmente las views 2 y 3, empleando regla de tres, (Estudia regla de tres matemáticas las vas a necesitar).

2.   Debido al problema de escalado que algunos conocemos (problemas con fuentes, imágenes más dibujadas), es necesario trabajar con views superiores a 512x512.

3.   Para ubicar correctamente las views vamos a necesitar un sistema o script parecido al “ajustador de canvas html5” que he creado, pero un poco más complejo, esta véz habrá que manejar muy bien las dos posiciones del dispositivo móvil:

Movil en posición horizontal: Al cambiar de posición el móvil, la posición del joystick táctil cambia.



Para lograr que todo cuadre, es conveniente trabajar ahora con 4 views como se indica abajo:





1.   View azul: La que se ajusta a todo el contorno del explorador.
2.   View Roja: La que mostrará el juego.
3.   View verde: la que contiene la parte izquierda del joystick.
4.   View naranja: la que contiene la parte izquierda del joystick táctil.

¿Y que lograremos con eso?, bueno con eso podemos manejar las views para que cuando el móvil esté en horizontal podamos mostrar algo como esto:




Ahora olviden todo lo aprendido, XD.  Ahora es que vengo a hablarles de lo que realmente quiero hablarles:

Características de este sistema ya explicado:

1.   Solo trabajará correctamente en game maker studio 1, 2 y superiores.
2.   Se requiere emplear las funciones incluidas de multitouch.
3.   No se aplicará correctamente en la versión de game maker llamada “game maker html5”.

En resumen: Quiero crear un sistema de joystick táctiles que funcione en la versión game maker llamada “Game maker html5”.

Razones y motivos principales:
1.   Los juegos creados con game maker html5 son más ligeros que los creados con game maker studio, y cargan más rápido.

Dificultades:
1.   Game maker html5 no incluye función multitouch.
2.   Game maker html5 presenta problemas de coordenadas del mouse en dispositivos móviles.

Objetivos y alternativas:
1.   Crear joystick táctiles para juegos html5 mediante lenguajes para el desarrollo web tales como javascript, Jquery, php, angular, react, etc…

2.   Integrar al juego exportado el joystick táctil creado mediante los lenguajes indicados. (para esto solo necesitamos modificar el index.html del juego)


¿Cómo funcionaría el proyecto?

1.   Se crearían, mediante los lenguajes para el desarrollo web, los botones táctiles los cuales pudiesen ser ajustados mediante reglas css u otras.
2.   Al pulsar los botones algún lenguaje deberá “simular” que se ha presionado una tecla y game maker reconocería esta tecla “en teoria”.

Dificultades:

1.   No encuentro el código que simula la teclas del teclado en exploradores, bueno solo encontré esto:
https://www.it-swarm-es.com/es/javascript/jquery-o-js-puro-simular-la-tecla-enter-presionada-para-probar/969438578/

2.   Jquery está obsoleto y quizás deje de implementarse en exploradores en el futuro.

Estado actual del proyecto:
En proceso....

¿ alguna idea?

Aqui les dejo un ejemplo:

Un ejemplo sin terminar. Giren el dispositivo móvil y verán los cambios.
https://dixonysusjuegoseducativos.000webhostapp.com/_practica_game/Draw_gui_game/index.html

El juego "Adios capitan", trabaja con el sistema engorroso de escalas, giren el dispositivo movil.
https://dixonysusjuegoseducativos.000webhostapp.com/juegos_completos/adios_capitan/index.html
« Última modificación: Mayo 16, 2022, 07:25:13 am por dixon »

Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.
 


No Tienes Permisos Para Dar Puntos
point 0 Puntos

Este tema no recibió puntos.


Desconectado dixon

Respuesta #1 en: Diciembre 09, 2021, 07:46:41 pm
Hola, saludos a todos.



Aquí les traigo un html5 donde se logró implementar los botones de javascript, pueden verificar su funcionamiento en pc y móviles.



html5+game_maker+Javascript
El objetivo del proyecto es crear un joystick virtual para pantallas táctiles que funcione en navegadores, de esta forma se podrán crear juegos html5 con botones que funcionen en todos los dispositivos.

Aquí les dejo el index.html del proyecto exportado con game maker a html5.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <!-- Generated by GameMaker:HTML5 http://http://www.yoyogames.com/gamemaker/html5 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" >
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name ="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta charset="utf-8"/>

        <!-- Set the title bar of the page -->
        <title>Game Maker HTML 5</title>

        <!-- Set the background colour of the document -->
        <style>
            body {
              background: #222;
              color:#cccccc;
            }

#container{
width: 90vw;
height: 90vh;
//background: blue;
margin: 0 auto;
text-align: center;

}


            canvas {
                      image-rendering: optimizeSpeed;
                      -webkit-interpolation-mode: nearest-neighbor;
height: 75%;
width: auto;
            }
@media screen and (orientation: portrait) {canvas{width: 95%;height: auto;}}

button{
background: gray;
font-size: 24px;
}

.clead_fix{
clear: both;
}

#boton_reiniciar{
background: green;
margin-left:0px;
}
        </style>
    </head>

    <body>
            <!-- Create the canvas element the game draws to -->
<div id="container">
    <button id="boton_reiniciar" onmousedown="pulsar_boton(113)" onmouseup="soltar_boton(113)" onmouseout="soltar_boton(113)">Reiniciar</button>
<button id="boton_pantalla" onmousedown="toggleFullScreen()">Pantalla completa</button>
<br/>
            <canvas id="canvas" width="256" height="256">
               <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>
<br/>
<button id="boton_arriba" onmousedown="pulsar_boton(38)" onmouseup="soltar_boton(38)" onmouseout="soltar_boton(38)">U</button> 
<br/>
<button id="boton_izquierda" onmousedown="pulsar_boton(37)" onmouseup="soltar_boton(37)" onmouseout="soltar_boton(37)">L</button> 
<button id="boton_derecha" onmousedown="pulsar_boton(39)" onmouseup="soltar_boton(39)" onmouseout="soltar_boton(39)">R</button>
<br/>
<br/>

<!--<h1 id="variable_1">variable_1: </h1>-->
</div>

        <!-- Run the game code -->
        <script type="text/javascript" src="html5game/html5_botones.js?RDPAC=1661301485"></script>

<script>
var variable_1 = document.getElementById("variable_1");
var nombre_boton ="";
var numero_boton =0;


//////////FUNCION PANTALLA COMPLETA
function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||   
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) { 
      document.documentElement.requestFullScreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
      document.documentElement.mozRequestFullScreen(); 
    } else if (document.documentElement.webkitRequestFullScreen) { 
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
    } 
  } else { 
    if (document.cancelFullScreen) { 
      document.cancelFullScreen(); 
    } else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
    } else if (document.webkitCancelFullScreen) { 
      document.webkitCancelFullScreen(); 
    } 
  } 
}


//Detectando si existe pantalla tactil.
var touchDevice = ('ontouchstart' in document.documentElement);

//Boton arriba
nombre_boton="boton_arriba";
var elementoTouch= document.getElementById(nombre_boton);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
pulsar_boton(38);}}, false);
elementoTouch.addEventListener('touchend', function(event){
soltar_boton(38);
}, false);

//Boton izquierda
nombre_boton="boton_izquierda";
var elementoTouch= document.getElementById(nombre_boton);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
pulsar_boton(37);}}, false);
elementoTouch.addEventListener('touchend', function(event){
soltar_boton(37);
}, false);

//Boton derecha
nombre_boton="boton_derecha";
var elementoTouch= document.getElementById(nombre_boton);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
pulsar_boton(39);}}, false);
elementoTouch.addEventListener('touchend', function(event){
soltar_boton(39);
}, false);

//Boton reiniciar
nombre_boton="boton_reiniciar";
var elementoTouch= document.getElementById(nombre_boton);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
pulsar_boton(113);}}, false);
elementoTouch.addEventListener('touchend', function(event){
soltar_boton(113);
}, false);


//Simulando el teclado
var variable_1 = document.getElementById("variable_1");
function pulsar_boton(key){
var eventObj = document.createEventObject ?
    document.createEventObject() : document.createEvent("Events");
eventObj.keyCode = key;
eventObj.which = key;
eventObj.key=' ';
eventObj.code='Space';
if(eventObj.initEvent){eventObj.initEvent("keydown", true, true)}
document.dispatchEvent ? document.dispatchEvent(eventObj) : document.fireEvent("onkeydown", eventObj);}

function soltar_boton(key){
var eventObj = document.createEventObject ?
    document.createEventObject() : document.createEvent("Events");
eventObj.keyCode = key;
eventObj.which = key;
eventObj.key=' ';
eventObj.code='Space';
if(eventObj.initEvent){eventObj.initEvent("keyup", true, true)}
document.dispatchEvent ? document.dispatchEvent(eventObj) : document.fireEvent("onkeyup", eventObj);}



</script>

    </body>
</html>



En este código podremos ver algunos códigos claves:
1.   El código html para visualizar los botones.
2.   El código que verifica si estamos usando pantalla táctil.
3.   Los códigos para eventos de pantalla táctil.
4.   El conjunto de códigos que simula la presión de una tecla del teclado (este es el más importante.).

Conclusiones:
La simulación de teclas es efectiva, los botones de javascript puden simular que una tecla ha sido presionada y esto a su vez es reconocido por game maker correctamente.

Bueno eso es todo por ahora seguimos programando.


Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.
 


Desconectado dixon

Respuesta #2 en: Enero 04, 2022, 08:49:48 am
Hola, saludos a todos espero que estén bien.


Aquí les traigo una nueva actualización del script que dota a los juegos html5 de botones táctiles permitiendo que los juegos puedan ser jugados desde cualquier plataforma. Ahora la implementación es muy fácil solo tendrán que copiar y pegar.

El código es el siguiente:
Código: [Seleccionar]

<div id="contenedorFlecha">
<div class="botones" id="botonLeft" onmousedown='funcionBoton(37,"pulsar")' onmouseup='funcionBoton(37,"soltar")' onmouseleave='funcionBoton(37,"soltar")'><</div>
<div class="botones" id="botonUp" onmousedown='funcionBoton(38,"pulsar")' onmouseup='funcionBoton(38,"soltar")' onmouseleave='funcionBoton(38,"soltar")'>^</div>
<div class="botones" id="botonRight" onmousedown='funcionBoton(39,"pulsar")' onmouseup='funcionBoton(39,"soltar")' onmouseleave='funcionBoton(39,"soltar")'>></div>
<div class="botones" id="botonDown" onmousedown='funcionBoton(40,"pulsar")' onmouseup='funcionBoton(40,"soltar")' onmouseleave='funcionBoton(40,"soltar")'>\/</div>
</div>
<div id="contenedorBotones">
<div class="botones" id="botonA" onmousedown='funcionBoton(65,"pulsar")' onmouseup='funcionBoton(65,"soltar")' onmouseleave='funcionBoton(65,"soltar")'>A</div>
<div class="botones" id="botonW" onmousedown='funcionBoton(87,"pulsar")' onmouseup='funcionBoton(87,"soltar")' onmouseleave='funcionBoton(87,"soltar")'>W</div>
<div class="botones" id="botonS" onmousedown='funcionBoton(83,"pulsar")' onmouseup='funcionBoton(83,"soltar")' onmouseleave='funcionBoton(83,"soltar")'>S</div>
<div class="botones" id="botonD" onmousedown='funcionBoton(68,"pulsar")' onmouseup='funcionBoton(68,"soltar")' onmouseleave='funcionBoton(68,"soltar")'>D</div>
</div>


<div id="botonEnter" onmousedown='funcionBoton(13,"pulsar")' onmouseup='funcionBoton(13,"soltar")' onmouseleave='funcionBoton(13,"soltar")'>Enter</div>
<div id="screen" onmousedown="toggleFullScreen()">Screen</div>
<div id="reiniciar" onmousedown='funcionBoton(113,"pulsar")' onmouseup='funcionBoton(113,"soltar")' onmouseleave='funcionBoton(113,"soltar")'>Restart</div>


<style>
body{
text-align: center;
background: black;
}

#botonEnter,#screen, #reiniciar{
background: brown;
background: transparent;
border: 1px solid red;
color: red;
width: 60px;
height:24px;
position: absolute;
left: 5vw;
}

#screen{
top: 10px;
}

#reiniciar{
top: 55px;
}

#botonEnter{
top: 100px;
}

canvas{
background: transparent;
border: 1px solid white;

width: 40vw;
max-height: 90vh;
position: absolute;
top: 5vh;
left: 30vw;
}

#contenedorFlecha{
background: navy;
background: transparent;
width: 20vw;
height: 35vh;
position: absolute;
bottom: 5vh;
left: 4vw;
}

#contenedorBotones{
background: navy;
background: transparent;
width: 20vw;
height: 35vh;
position: absolute;
bottom: 5vh;
right: 4vw;
}

.botones{
width: 30%;
height: 30%;
position: absolute;
}

#botonUp, #botonW{
background: brown;
background: transparent;
border: 1px solid white;
top: 0px;
left: 35%;
}

#botonLeft, #botonA{
background: green;
background: transparent;
border: 1px solid white;
bottom: 35%;
left: 0%;
}

#botonRight, #botonD{
background: purple;
background: transparent;
border: 1px solid white;
bottom: 35%;
right: 0px;
}

#botonDown, #botonS{
background: blue;
background: transparent;
border: 1px solid white;
bottom: 0%;
left: 35%;
}

@media (orientation: portrait) {

#botonEnter,#screen, #reiniciar{
left: 40vw;
}

#screen{
top: 70vh;
left: 5vw;
}

#reiniciar{
top: 70vh;
right: 5vw;
left: auto;
}

#botonEnter{
top: 70vh;
left: calc(50vw-30px);
}


canvas{
width: 90vw;
top: 2vh;
left: 5vw;
}

#contenedorBotones{
width: 38vw;
height: 20vh;
}

#contenedorFlecha{
width: 38vw;
height: 20vh;
}

}


</style>



<!-- Código JavaScript-->

<script>

/////////////////Funcion de botones
////////////////SIMULANDO TECLADO
////////////////////////////////////////////////////////////////////////////////
function funcionBoton(codigoBoton, accionBoton){
    //alert(codigoBoton);
var eventObj_izquierda = document.createEventObject ?
    document.createEventObject() : document.createEvent("Events");
eventObj_izquierda.keyCode = codigoBoton;
eventObj_izquierda.which = codigoBoton;
eventObj_izquierda.key=' ';
eventObj_izquierda.code='Space';
if(accionBoton == "pulsar")
{
if(eventObj_izquierda.initEvent){eventObj_izquierda.initEvent("keydown", true, true)}
document.dispatchEvent ? document.dispatchEvent(eventObj_izquierda) : document.fireEvent("onkeydown", eventObj_izquierda);
}
if(accionBoton == "soltar")
{
if(eventObj_izquierda.initEvent){eventObj_izquierda.initEvent("keyup", true, true)}
document.dispatchEvent ? document.dispatchEvent(eventObj_izquierda) : document.fireEvent("onkeyup", eventObj_izquierda);
}
}
//////////////////////////////////////////////////////////////////////////////////


///////////////FUNCION PANTALLA COMPLETA
////////////////////////////////////////////////////////////////////////////////
function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||   
    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) { 
    document.documentElement.requestFullScreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
document.documentElement.mozRequestFullScreen(); 
} else if (document.documentElement.webkitRequestFullScreen) { 
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 

} else { 
if (document.cancelFullScreen) { 
document.cancelFullScreen(); 
} else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} else if (document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen(); 
}}}
/////////////////////////////////////////////////////////////////////////////////


/////////////Funcion para pantallas tactiles
//////////////////////////////////////////////////////////////////////////////////
//Detectando si existe pantalla tactil.
var touchDevice = ('ontouchstart' in document.documentElement);
var botonesId = ["botonLeft","botonUp","botonRight","botonDown","botonA","botonW","botonS","botonD","reiniciar","botonEnter"];
var botonesCodigos = [37,38,39,40,65,87,83,68,113,13];
    var botonId = "";
    var botonCodigo = 0;
    var numeroArray =[];
   
if(touchDevice == true)
{

//Analizando todos los botones contenidos en el array
//Recorriendo el array que contiene los nombres de los botones.

        numeroX=0;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[0],"pulsar");funcionBoton(botonesCodigos[2],"soltar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[0],"soltar");}, false);


        numeroX=1;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[1],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[1],"soltar");}, false);

        numeroX=2;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[2],"pulsar");funcionBoton(botonesCodigos[0],"soltar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[2],"soltar");}, false);

    numeroX=3;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[3],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[3],"soltar");}, false);

    numeroX=4;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[4],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[4],"soltar");}, false);

    numeroX=5;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[5],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[5],"soltar");}, false);


    numeroX=6;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[6],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[6],"soltar");}, false);

    numeroX=7;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[7],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[7],"soltar");}, false);


    numeroX=8;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[8],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[8],"soltar");}, false);

    numeroX=9;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[9],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[9],"soltar");}, false);
}
///////////////////////////////////////////////////////////////////////////////////////



</script>



Este es un código que combina html, css y javascript y para implementarlo en sus juegos html5 tendrán que seguir estos sencillos pasos:

1.   Crea tu juego html5 empleando las siguientes teclas del teclado:
Vk_left (código ascii 37);
Vk_up (código ascii 38);
Vk_rigth (código ascii 39);
 Vk_down (código ascii 40);
A (código ascii 65);
W (código ascii 87);
D (código ascii 68);
S (código ascii 83);
Enter (código ascii 13);
F12: para reiniciar el juego. (código ascii 113);

2.   Exporta tu juego html5.
3.   Copia el código para botones táctiles de este post.
4.   Abre con el block de notas el index.html  de tu juego.
5.   Pega el código al final del archivo justo por encima de la etiqueta de cierre </body> como se indica aquí abajo:

6.   Listo.


Dudas y preguntas aquí.
Pueden ver este código funcionando  en el juego “30pepas” publicado recientemente.

Tengo planeado mejorar el código y darle una mejor apariencia a los botones, ya le he encontrado varios errores pero si Dios quiere pronto serán corregidos.
« Última modificación: Enero 04, 2022, 05:10:59 pm por dixon »

Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.
 


Desconectado dixon

Respuesta #3 en: Enero 05, 2022, 11:49:08 pm
Hola, saludos, espero que esten muy bien.


Bueno, hoy les traigo una nueva actualización del script para los botones táctiles en juegos html5, ahora los botones tendrán una mejor imagen  “se ven geniales” XD, tambien se le ha corregido un error pero lamentablemente aun presenta otro error grave donde se quedan pegadas las teclas.

El nuevo código es este:

Código: [Seleccionar]

<div id="contenedorFlecha">
<div class="botones" id="botonLeft" onmousedown='funcionBoton(37,"pulsar")' onmouseup='funcionBoton(37,"soltar")' onmouseleave='funcionBoton(37,"soltar")'></div>
<div class="botones" id="botonUp" onmousedown='funcionBoton(38,"pulsar")' onmouseup='funcionBoton(38,"soltar")' onmouseleave='funcionBoton(38,"soltar")'></div>
<div class="botones" id="botonRight" onmousedown='funcionBoton(39,"pulsar")' onmouseup='funcionBoton(39,"soltar")' onmouseleave='funcionBoton(39,"soltar")'></div>
<div class="botones" id="botonDown" onmousedown='funcionBoton(40,"pulsar")' onmouseup='funcionBoton(40,"soltar")' onmouseleave='funcionBoton(40,"soltar")'></div>
</div>
<div id="contenedorBotones">
<div class="botones" id="botonA" onmousedown='funcionBoton(65,"pulsar")' onmouseup='funcionBoton(65,"soltar")' onmouseleave='funcionBoton(65,"soltar")'></div>
<div class="botones" id="botonW" onmousedown='funcionBoton(87,"pulsar")' onmouseup='funcionBoton(87,"soltar")' onmouseleave='funcionBoton(87,"soltar")'></div>
<div class="botones" id="botonS" onmousedown='funcionBoton(83,"pulsar")' onmouseup='funcionBoton(83,"soltar")' onmouseleave='funcionBoton(83,"soltar")'></div>
<div class="botones" id="botonD" onmousedown='funcionBoton(68,"pulsar")' onmouseup='funcionBoton(68,"soltar")' onmouseleave='funcionBoton(68,"soltar")'></div>
</div>

<div id="botonEnter" onmousedown='funcionBoton(13,"pulsar")' onmouseup='funcionBoton(13,"soltar")' onmouseleave='funcionBoton(13,"soltar")'></div>
<div id="botonScreen" onmousedown="toggleFullScreen()"></div>
<div id="botonReiniciar" onmousedown='funcionBoton(113,"pulsar")' onmouseup='funcionBoton(113,"soltar")' onmouseleave='funcionBoton(113,"soltar")'></div>


<style>
body{
text-align: center;
background: black;
}

#botonEnter,#botonScreen, #botonReiniciar{
background: brown;
background: transparent;
border: 1px solid red;
color: red;
width: 30px;
height:24px;
position: absolute;
left: 5vw;
}

#botonScreen{
top: 10px;
}

#botonReiniciar{
top: 55px;
}

#botonEnter{
top: 100px;
width: 60px;
}

canvas{
background: transparent;
border: 1px solid white;

width: 40vw;
max-height: 90vh;
position: absolute;
top: 5vh;
left: 30vw;
}

#contenedorFlecha{
background: navy;
background: transparent;
width: 20vw;
height: 35vh;
position: absolute;
bottom: 5vh;
left: 4vw;
}

#contenedorBotones{
background: navy;
background: transparent;
width: 20vw;
height: 35vh;
position: absolute;
bottom: 5vh;
right: 4vw;
}

.botones{
width: 30%;
height: 30%;
position: absolute;
}


#botonUp, #botonW{
background: brown;
background: transparent;
border: 1px solid white;
top: 0px;
left: 35%;
}

#botonLeft, #botonA{
background: green;
background: transparent;
border: 1px solid white;
bottom: 35%;
left: 0%;
}

#botonRight, #botonD{
background: purple;
background: transparent;
border: 1px solid white;
bottom: 35%;
right: 0px;
}

#botonDown, #botonS{
background: blue;
background: transparent;
border: 1px solid white;
bottom: 0%;
left: 35%;
}

@media (orientation: portrait) {

#botonEnter,#botonScreen, #botonReiniciar{
left: 40vw;
}

#botonScreen{
top: 70vh;
left: 5vw;
}

#botonReiniciar{
top: 70vh;
right: 5vw;
left: auto;
}

#botonEnter{
top: 70vh;
left: calc(50vw-30px);
}


canvas{
width: 90vw;
top: 2vh;
left: 5vw;
}

#contenedorBotones{
width: 38vw;
height: 20vh;
}

#contenedorFlecha{
width: 38vw;
height: 20vh;
}

}



#botonRight{
background-image: url("imagenes/botonRight_up.png");
}
#botonRight:active{
background-image: url("imagenes/botonRight_down.png");
}
#botonUp{
background-image: url("imagenes/botonUp_up.png");
}
#botonUp:active{
background-image: url("imagenes/botonUp_down.png");
}
#botonLeft{
background-image: url("imagenes/botonLeft_up.png");
}
#botonLeft:active{
background-image: url("imagenes/botonLeft_down.png");
}
#botonDown{
background-image: url("imagenes/botonDown_up.png");
}
#botonDown:active{
background-image: url("imagenes/botonDown_down.png");
}

#botonA{
background-image: url("imagenes/botonA_up.png");
}
#botonA:active{
background-image: url("imagenes/botonA_down.png");
}
#botonW{
background-image: url("imagenes/botonW_up.png");
}
#botonW:active{
background-image: url("imagenes/botonW_down.png");
}
#botonD{
background-image: url("imagenes/botonD_up.png");
}
#botonD:active{
background-image: url("imagenes/botonD_down.png");
}
#botonS{
background-image: url("imagenes/botonS_up.png");
}
#botonS:active{
background-image: url("imagenes/botonS_down.png");
}



#botonEnter{
background-image: url("imagenes/botonEnter_up.png");
}
#botonEnter:active{
background-image: url("imagenes/botonEnter_down.png");
}

#botonReiniciar{
background-image: url("imagenes/botonReiniciar_up.png");
}
#botonReiniciar:active{
background-image: url("imagenes/botonReiniciar_down.png");
}

#botonScreen{
background-image: url("imagenes/botonScreen_up.png");
}
#botonScreen:active{
background-image: url("imagenes/botonScreen_down.png");
}



#botonRight, #botonLeft, #botonUp, #botonDown, #botonA, #botonW, #botonD, #botonS, #botonEnter, #botonReiniciar, #botonScreen{
border: 0px;
background-size: 100% 100%;
}


</style>



<!-- Código JavaScript-->

<script>

/////////////////Funcion de botones
////////////////SIMULANDO TECLADO
////////////////////////////////////////////////////////////////////////////////
function funcionBoton(codigoBoton, accionBoton){
    //alert(codigoBoton);
var eventObj_izquierda = document.createEventObject ?
    document.createEventObject() : document.createEvent("Events");
eventObj_izquierda.keyCode = codigoBoton;
eventObj_izquierda.which = codigoBoton;
eventObj_izquierda.key=' ';
eventObj_izquierda.code='Space';
if(accionBoton == "pulsar")
{
if(eventObj_izquierda.initEvent){eventObj_izquierda.initEvent("keydown", true, true)}
document.dispatchEvent ? document.dispatchEvent(eventObj_izquierda) : document.fireEvent("onkeydown", eventObj_izquierda);
}
if(accionBoton == "soltar")
{
if(eventObj_izquierda.initEvent){eventObj_izquierda.initEvent("keyup", true, true)}
document.dispatchEvent ? document.dispatchEvent(eventObj_izquierda) : document.fireEvent("onkeyup", eventObj_izquierda);
}
}
//////////////////////////////////////////////////////////////////////////////////


///////////////FUNCION PANTALLA COMPLETA
////////////////////////////////////////////////////////////////////////////////
function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||   
    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) {
    document.documentElement.requestFullScreen();
    } else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}}}
/////////////////////////////////////////////////////////////////////////////////


/////////////Funcion para pantallas tactiles
//////////////////////////////////////////////////////////////////////////////////
//Detectando si existe pantalla tactil.
var touchDevice = ('ontouchstart' in document.documentElement);
var botonesId = ["botonLeft","botonUp","botonRight","botonDown","botonA","botonW","botonS","botonD","reiniciar","botonEnter"];
var botonesCodigos = [37,38,39,40,65,87,83,68,113,13];
    var botonId = "";
    var botonCodigo = 0;
    var numeroArray =[];
   
if(touchDevice == true)
{

//Analizando todos los botones contenidos en el array
//Recorriendo el array que contiene los nombres de los botones.

        numeroX=0;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[0],"pulsar");funcionBoton(botonesCodigos[2],"soltar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[0],"soltar");}, false);


        numeroX=1;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[1],"pulsar");funcionBoton(botonesCodigos[3],"soltar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[1],"soltar");}, false);

        numeroX=2;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[2],"pulsar");funcionBoton(botonesCodigos[0],"soltar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[2],"soltar");}, false);

    numeroX=3;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[3],"pulsar");funcionBoton(botonesCodigos[1],"soltar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[3],"soltar");}, false);

    numeroX=4;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[4],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[4],"soltar");}, false);

    numeroX=5;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[5],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[5],"soltar");}, false);


    numeroX=6;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[6],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[6],"soltar");}, false);

    numeroX=7;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[7],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[7],"soltar");}, false);


    numeroX=8;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[8],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[8],"soltar");}, false);

    numeroX=9;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[9],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[9],"soltar");}, false);
}
///////////////////////////////////////////////////////////////////////////////////////



</script>

El proceso para integrar los botones a tu juego “HTML5” es el siguiente:
1.   Crea tu juego html5 empleando las teclas del teclado:
Vk_left (código ascii 37);
Vk_up (código ascii 38);
Vk_rigth (código ascii 39);
 Vk_down (código ascii 40);
A (código ascii 65);
W (código ascii 87);
D (código ascii 68);
S (código ascii 83);
Enter (código ascii 13);
F12: para reiniciar el juego. (código ascii 113);

2.   Exporta tu juego html5.
3.   Copia el código para botones táctiles de este post.
4.   Abre con el block de notas el index.html  de tu juego.
5.   Pega el código al final del archivo justo por encima de la etiqueta de cierre </body> como se indica aquí abajo:



6. Descarga el paquete de imágenes de los botones “aquí”;
7.Crea una carpeta llamada imágenes la cual debe encontrarse en la misma carpeta de tu juego como se indica en la imagen:


8. En esa carpeta deberás pegar las imágenes que descargastes para que te quede algo como esto:


9. Listo eso es todo.

Si quieres ver cómo quedó el diseño puedes  acceder al juego “30pepas”.



Listo eso es todo, seguimos programando, nos vemos luego.


« Última modificación: Enero 05, 2022, 11:50:52 pm por dixon »

Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.