Como inserir um teclado virtual para uso em um emulador de GameBoy?

Programação
,
#1

Eu não entendo muito de html e javascript, mas eu estou fazendo um projeto para usar um emulador de gameboy, chamado jsgameboy, que eu estou tentando usar no Internet Explorer 11 do windows phone. O que eu quero fazer é inserir um teclado virtual para eu conseguir executar os jogos de gameboy nesse emulador. A ideia é deixar o teclado embaixo da tela do emulador, como nesse print: https://photos.app.goo.gl/zBL5fYaaxVHNpU2x9 , Eu tô tentando colocar um teclado virtual como nesse print, onde a pessoa escreve os comandos no terminal linux através desse teclado:

wp_ss_20200715_0001
wp_ss_20200715_0001.png480×800 93.4 KB
Eu preciso que o teclado virtual colocado no html do emulador de gameboy seja incorporado de forma que, como em um jogo de pc, eu possa apertar as teclas no teclado de forma que o emulador responda a esses eventos realizados através do teclado virtual. Alguém tem alguma ideia? Aqui o código:

	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
	Remove this if you use the .htaccess -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>JS GameBoy Emulator</title>
	<meta name="description" content="">
	<meta name="author" content="Alex">

	<meta name="viewport" content="width=device-width; initial-scale=1.0">

	<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
	<link id="ms__id4" href="http://gb.alexaladren.net/style.css" rel="stylesheet">
	<link href="http://gb.alexaladren.net/favicon.ico" rel="shortcut icon">
	<link href="/apple-touch-icon.png" rel="apple-touch-icon">
	
	<script id="ms__id1" src="http://gb.alexaladren.net/Z80.js"></script>
	<script id="ms__id2" src="http://gb.alexaladren.net/GameBoy.js"></script>
	<script id="ms__id3" src="http://gb.alexaladren.net/emulator.js"></script>
</head>

<body>
	<div id="wrapper">
		<header>
			<h1>JS GameBoy Emulator</h1>
		</header>

		<div class="left-column">
		
			<div class="box display">
				<canvas width="320" height="288" id="display" onclick="pause()"></canvas>
				<div id="fps"></div>
			</div>
			<div class="box controls">
				<table>
					<tbody><tr>
						<td>Q</td><td>Select</td>
						<td>W</td><td>Start</td>
						<td>A</td><td>B</td>
						<td>S</td><td>A</td>
					</tr>
					<tr>
						<td>↑</td><td>Up</td>
						<td>↓</td><td>Down</td>
						<td>←</td><td>Left</td>
						<td>→</td><td>Right</td>
					</tr>
				</tbody></table>
			</div>
			<div class="copyright">
				<a href="http://www.alexaladren.net">Alejandro Aladrén</a> |
				<a href="mailto:alex@alexaladren.net">alex@alexaladren.net</a> | 
				<a href="http://www.gnu.org/licenses/">GPL v.3</a> |
				<a href="https://github.com/alexaladren/jsgameboy">GitHub</a>
			</div>
			
		</div>
		<div class="right-column">
		
			<div class="box select">
				<div id="romlist">
					
				<div>POKEMON BLUE</div><div>SUPER MARIOLAND</div><div>DR.MARIO</div><div>KIRBY DREAM LAND</div><div>POKEMON RED</div><div>TETRIS</div><div>ZELDA</div></div>
				<div class="button" id="addfrompc" onclick="addROMfromComputer(event)">Add a ROM from your PC</div>
			</div>
			
			<div class="box data" id="cartridge-data" style="display: none;">
				<div class="title" id="title"></div>
				<div id="cartridge"></div>
				<input id="save" style="display: none;" onclick="saveCartridgeRam()" type="button" value="Guardar">
				<input id="delete" style="display: none;" onclick="deleteCartridgeRam()" type="button" value="Eliminar partida">
			</div>
			
		</div>
	</div>