Simulate click on Jq or JS

Asked

Viewed 921 times

0

javascript jquery

  • Can you explain what you mean by "simulate the Keyboard"? You want me to trigger events that the browser uses?

  • I want to simulate as if I pressed the up key on the keyboard

  • yes the code I know, I want to make a button that by clicking simulate the 38 key or keyup using js or jq.

  • 1

    I want to simulate in this game http://wwwtyro.github.io/Astray/

3 answers

1


You have to create a evento of keydown and fire it at the click of the button, I made an example that returns an alert of the pressed key, already picking from the event 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>

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

  • I’m cracking my head with this friend see the value of e.keycode = 38 comes undefined, and when I click on something on the keyboard it fires it all at once.

  • Tested by the code here in the stack? here worked normal

  • I can tell you that this is the solution, I use it and it works normally. now we have to see what you do forward with the keys, if you want to post your code.

  • I will post Perai :D

  • Here friend https://bitbucket.org/adilmar/game/src

  • Relax, I’ll take a look, I’ll give you a feedback

  • thank you very much.

  • There really is something generating conflict here, I’ll try to arrange it for you

  • thanks, because it is rsrsrs less bad I am not so Noob so kkkk.

  • So, I couldn’t get here and I won’t have time now, but I figured out what it is, it picks up a Keyboardevent so it would have to work with this API to set the Keyboardevent on the DOM and then trigger the event. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

  • If it were to implement in something you were creating the answer would simulate the keys, now this game works differently, sorry I can not help at the moment

  • I’ll try here thank you very much.

  • yes I will try to do something from scratch :D

  • For nothing, if the answer was useful to you and can vote thank you ;)

  • Let’s go continue this discussion in chat.

Show 10 more comments

1

This script, it doesn’t 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>
    <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>

  • I’m cracking my head with this friend see the value of e.keycode = 38 comes undefined, and when I click on something on the keyboard it fires it all at once.

  • pera, you want to trigger the event when the person clicks on the button or you want the buttons to be pressed when pressing the arrows?

  • when you click the button see https://bitbucket.org/adilmar/game/src

  • replace Alert with a.log(e) console that you will see.

1

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

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>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.