Simulate click on Jq or JS

Navigation
0

Simulate keystrokes on the keyboard.

or how to do a function using this js

link

In short, I want to make 4 buttons for this game that clicks on the same keyboard

link

    
asked by anonymous 08.12.2017 / 20:04

3 answers

1

You have to create a evento of keydown and fire it on the click of the button, I made an example that returns an alert of the key pressed, already catching from the event keydown : 

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script><buttontype="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>

I had to do this for my game and it worked perfectly

    
08.12.2017 / 20:37
1

This script does not simulate ... it triggers the event as if the key had been pressed. 

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><tdcolspan="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>
    
08.12.2017 / 20:39
1

If I understand correctly, you want to move an object on the screen as if you were pressing the arrow keys. With this code you simulate something like this: 

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><divstyle="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>
    
08.12.2017 / 21:30
Use $ _SESSION value in function NAN, as a result of a [closed]