How would I change these functions to work on keypresses rather than button clicks on Tetris?

Question

https://code.sololearn.com/WcT7LGC7moHS/#html

Above is a link to the code in which I wish to change the buttons to simple key presses for rotation, movement, and soft and hard drops. Any assistance is appreciated

Answer 1

Fleet yes you can do it without an input field. The listner function will be like,
on("keypressed", (e) => {
//TODO
});

Answer 2

You can use keyboard event listeners for that purpose.
Check this link for more details
https://www.w3schools.com/jsref/obj_keyboardevent.asp

Feel free to ask if you have any doubts regarding the listeners

Answer 3

Yes, you can use key codes.

Here is an example of how your code will look like

document.on("keypressed", (e)=> {
//up arrow pressed.
if(e.keycode==38) {
//code for handling up arrow.
}
//you have to handle all the keys like this. Here is a reference for key codes. https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
});

Answer 4

Is it possible to use these keyboard event listeners without using an input field, and to call specific functions based on the key pressed?

Answer 5

What about arrow key controls? Would I just use the keyCodes?

Finally, how exactly would I use that segment of code and where?