Capturar Teclado com JavaScript por Segundo ou Milésimo de Segundos!

Front-end JavaScript
#1

pessoal eu quero saber porque não consigo mostrar as teclas digitadas no browser, pra poder movimentar imagens futuramente…

alguém pode me dizer o que fiz de errado?
eu peguei um codigo aqui e ali e cheguei a isso e não consigo sqaber o erro.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="asset/css/normalize.css">
	<link rel="stylesheet" href="css/style.css">
<style>
body{
	font-family: "Verdana", "Tre"
}


/*-- Formatação de tipografa ------*/

.tit-prin{
	color: blue;
	font-size: 20px;
}

</style>
	<script >
		
libLetras = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','x','y','z','w'];
mapLetras = [65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91];

function main(){
    canvas = document.getElementById("jogo");
    context = canvas.getContext("2d");
    posKey = geraPosicao(0,2);
    desafio = libLetras[posKey];
    context.font = '40pt Calibre';
    context.fillstyle = 'blue';
    context.fillText(valor, posX, posY);
    var posX = 100;
    var posY = 120;
    var tecla = event.keyCode;
    if(true){
        document.write(0+tecla);
    }
    document.addEventListener('keydown', tecla);
    alert('Tecla: ' + tecla);
}
</script>
<title>Smart Type</title>
</head>
<body onload="main();" >
	<header>
		<h2 class="tit-prin"> Smart Type </h2>
	</header>

	<section >
		<canvas id="jogo" width="500" height="500"> 
			
		</canvas>
		
	</section>
	
</body>
</html>
#2 
window.addEventListener("keydown", checkKeydown, false);

function checkKeydown(e) {
   document.body.innerHTML += String.fromCharCode(e.keyCode);
}
#3

Olá amigo, tenho esse código que fiz há algum tempo, que realizar a captura do teclado, veja se esse exemplo te ajuda.

<body>
    <form>
        <input type="button" id="cima" value="cima">
        <input type="button" id="esquerda" value="esquerda">
        <input type="button" id="baixo" value="baixo">
        <input type="button" id="direita" value="direita">
    </form>

<script type="text/javascript">
    //Carregar o javascript após o carregamento da página
    window.onload = function () {

        //---------------------------------------------------------------------
        //Com as setas do teclado
        document.querySelector('body').addEventListener('keyup', function (tecla) {
            //Quando soltar a tecla enviar um valor para o motor não seguir
            console.info("soltou a tecla", String.fromCharCode(tecla.keyCode));
        });

        document.querySelector('body').addEventListener('keydown', function (tecla) {
            //valor da tecla digitada
            var valorTecla = tecla.keyCode;
            console.info(valorTecla);

            analisarTeclaEnviar(valorTecla);
        });

        function analisarTeclaEnviar(tecla) {
            switch (tecla) {
                case 38:
                    // Pressionando a seta pra cima
                    console.log("cima ", tecla);
                    break;
                case 40:
                    // Pressionando a seta pra baixo
                    console.log("baixo ", tecla);
                    break;
                case 37:
                    // Pressionando a seta pra esquerda
                    console.log("esquerda ", tecla);
                    break;
                case 39:
                    // Pressionando a seta pra direita
                    console.log("direita ", tecla);
                    break;
                default:
                    break;
            }

            /* if (38 == tecla) {
                 // Pressionando a seta pra cima
                 console.log("cima ", tecla);
             }
             if (40 == tecla) {
                 // Pressionando a seta pra baixo
                 console.log("baixo ", tecla);
             }
             if (37 == tecla) {
                 // Pressionando a seta pra esquerda
                 console.log("esquerda ", tecla);
             }
             if (39 == tecla) {
                 // Pressionando a seta pra direita
                 console.log("direita ", tecla);
             }*/
        }

        //---------------------------------------------------------------------
        //Com botões
        var cima = document.getElementById("cima");
        var baixo = document.getElementById("baixo");
        var esquerda = document.getElementById("esquerda");
        var direita = document.getElementById("direita");

        cima.onclick = function () {
            //comando a ser enviado
            console.log("cima");
        };
        baixo.onclick = function () {
            //comando a ser enviado
            console.log("baixo");
        };
        esquerda.onclick = function () {
            //comando a ser enviado
            console.log("esquerda");
        };
        direita.onclick = function () {
            //comando a ser enviado
            console.log("direita");
        };

    };
</script>
</body>


#4

valeu, pessoal eu estou trabalhando nos códigos e o que vocês me passaram já quebra um galho, eu encontrei, já tudo vendo sobre eventos de JavaScript agora é só suar a camisa kkkkkk valeu vocês são demais!!!