0

Pessoal precisava fazer 4 botões (cima,baixo,direita e esquerda) que chama-se uma função que simulasse o keybord up,down,left e right alguém pode me ajudar.

Simular as teclas pressionadas no teclado.

ou então como fazer uma função usando este js

https://github.com/wwwtyro/Astray/blob/master/keyboard.js

Em resumo quero fazer 4 botões para este jogo que ai clicar faz o mesmo do teclado

http://wwwtyro.github.io/Astray/

4
  • Podes explicar o que entendes por "simulasse o keyboard"? queres que dispare eventos que o browser use?
    – Sergio
    8/12/2017 às 19:05
  • quero simular como se eu tivesse pressionado no teclado a tecla up 8/12/2017 às 19:06
  • sim o código eu sei, quero fazer um botão que ao clicar simule a tecla 38 ou keyup usando js ou jq. 8/12/2017 às 19:18
  • 1
    quero simular neste jogo wwwtyro.github.io/Astray 8/12/2017 às 19:30

3 Respostas 3

1

Você tem que criar um evento do keydown e disparar ele no click do botão, fiz um exemplo que retorna um alerta da tecla pressionada, já pegando a partir do evento keydown:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<button type="button" id="up">Pra Cima</button>
<button type="button" id="down">Pra baixo</button>
<button type="button" id="left">Pra esquerda</button>
<button type="button" id="right">Pra direita</button>
<script>

    $('#up').on('click', function(){

        let e = jQuery.Event("keydown");
        e.which = 38;
        e.keyCode = 38;
        $("#up").trigger(e);
    });

    $('#down').on('click', function(){
        
        let e = jQuery.Event("keydown");
        e.which = 40; //key code
        e.keyCode = 40;
        $("#down").trigger(e);
    });

    $('#right').on('click', function(){
        let e = jQuery.Event("keydown");
        e.which = 39; //key code
        e.keyCode = 39;
        $("#right").trigger(e);
    });

    $('#left').on('click', function(){
        let e = jQuery.Event("keydown");
        e.which = 37; //key code
        e.keyCode = 37;
        $("#left").trigger(e);
    });

    $(document).on('keydown', function(e) {
        alert(e.keyCode);
    });


</script>

Tive que fazer isso para meu jogo e funcionou perfeitamente

15
  • estou quebrando a cabeça com isso amigo veja o valor do e.keyCode = 38 vem indefinido, e quando eu clico em algo no teclado ele dispara tudo de uma vez. 8/12/2017 às 20:01
  • Testou pelo código aqui no stack? aqui funcionou normal
    – arllondias
    8/12/2017 às 20:02
  • Posso afirmar para você que essa é a solução, eu uso e funciona normalmente. agora temos que ver o que você faz dai para frente com as teclas, se quiser poste seu código.
    – arllondias
    8/12/2017 às 20:04
  • vou postar perai :D 8/12/2017 às 20:06
  • Aqui amigo bitbucket.org/adilmar/game/src 8/12/2017 às 20:13
1

Esse script, não simula... ele dispara o evento como se a tecla tivesse sido pressionada.

var direcionar = function(keycode){
    var e = jQuery.Event("keydown");
        e.which = keycode; 
    $(window).trigger(e);   
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td colspan="2" align="center">
      <input type="button" value="Acima" onclick="direcionar(38)" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Esquerda" onclick="direcionar(37)"/>    
    </td>
    <td>
      <input type="button" value="Direita" onclick="direcionar(39)"/>
    </td>
  </tr>
  <tr>
    <td colspan="2" align="center">
      <input type="button" value="Abaixo" onclick="direcionar(40)"/>
    </td>
  </tr>
</table>

4
  • estou quebrando a cabeça com isso amigo veja o valor do e.keyCode = 38 vem indefinido, e quando eu clico em algo no teclado ele dispara tudo de uma vez. 8/12/2017 às 20:01
  • pera, você quer disparar o evento quando a pessoa clica no botão ou quer que ao teclar as setas os botões sejam pressionados? 8/12/2017 às 20:05
  • quando clicar no botão veja bitbucket.org/adilmar/game/src 8/12/2017 às 20:12
  • substitua o alert por um console.log(e) que você verá. 8/12/2017 às 20:22
1

Se entendi bem, você quer mover um objeto na tela como se estivesse pressionando as setas do teclado. Com este código você simula algo parecido:

var alvo = $('#bola'); // objeto que será movido
var incremento = 2; // números de pixels a se mover
var continua;

$('.btn').mousedown(function(){
   var idx = $('.btn').index(this);
   continua = setInterval(function(){
      moveObj(idx);
   }, 50);
}).on('mouseup mouseleave', function() {
   clearInterval(continua);
});

function moveObj(idx){

   if (idx == 0 || idx == 2){ // botão UP e DOWN
      var dir = 'top';
      var inc = idx == 0 ? -Math.abs(incremento) : incremento;
      var mover = alvo.offset().top+inc;
   }

   if (idx == 1 || idx == 3){ // botão LEFT e RIGHT
      var dir = 'left';
      var inc = idx == 1 ? -Math.abs(incremento) : incremento;
      var mover = alvo.offset().left+inc;
   }

   alvo.css(dir, (mover+inc)+'px');

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: inline-block; text-align: center; position: fixed; bottom: 20px; left: 20px; z-index: 99;">
   <input type="button" value="&uarr;" class="btn" />
   <br />
   <input type="button" value="&larr;" class="btn" />
   <input type="button" value="&darr;" class="btn" />
   <input type="button" value="&rarr;" class="btn" />
</div>

<div id="bola" style="display: block; position: absolute; top: 20px; left: 20px; width: 50px; height: 50px; background: blue; border-radius: 50%;"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .