JSFiddle - React, Tailwind, and code Playground

by leandro macedo

HTML

<!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">

	<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 inicializa(){
 
    canvas = document.getElementById("jogo");
    context = canvas.getContext("2d");

    posKey = geraPosicao(0,2);
	desafio = libLetras[posKey];

    var posX = geraPosicao(45,450);
    var posY = geraPosicao(45,450);

    exibeDesafio( desafio, posX, posY);

    document.addEventListener('keydown', pegaTecla);

    // alert('Tecla: ' + pegaTecla());


}

function pegaTecla(){
	var tecla = event.keyCode;


	// alert(tecla );
	alert(tecla);
}

function exibeDesafio(valor, posX, posY){
	context.font = '40pt Calibre';
    context.fillstyle = 'blue';
    context.fillText(valor, posX, posY);
}

function geraPosicao(valMin, valMax){
	return Math.floor( Math.random()  * valMax ) + valMin ;
}



	</script>

	<title>Smart Type</title>
</head>
<body onload="inicializa();" >
	<header>
		<h2 class="tit-prin"> Smart Type </h2>
	</header>

	<section >
		<canvas id="jogo" width="500" height="500"> 
			
		</canvas>
		
	</section>
	
</body>
</html>

CSS

body{
	font-family: "Verdana", "Tre"
}


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

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