Simulate keystrokes on the keyboard.
or how to do a function using this js
In short, I want to make 4 buttons for this game that clicks on the same keyboard
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
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>
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="↑" class="btn" />
<br />
<input type="button" value="←" class="btn" />
<input type="button" value="↓" class="btn" />
<input type="button" value="→" 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>