<canvas width="600" height="400"></canvas>
<script>
var tela= document.querySelector("canvas");
var pincel= tela.getContext("2d");
//personagem variáveis
var xPersonagem= 300;
var yPersonagem= 200;
var alturaDoPersonagem= 50;
var larguraDoPersonagem= 30;
//teclas de movimentação
var esquerda= 37;
var cima= 38;
var direita= 39;
var baixo= 40;
var taxa= 10;
function mostrarCodigo(evento){
alert(evento.keyCode);
}
function atualizarTela (){
pincel.clearRect(0,0,600,40);
paisagem();
personagem();
}
function leTeclado(evento){
if(evento.keyCode == direita){
xPersonagem= xPersonagem + taxa;
}
if(evento.keyCode == esquerda){
xPersonagem= xPersonagem - taxa;
}
}
function paisagem(){
//fundo ou céu
pincel.fillStyle= "lightblue";
pincel.fillRect(0,0,600,400);
//nuvem esquerda
pincel.fillStyle= "white";
pincel.fillRect(50,50,100,50);
pincel.fillStyle= "white";
pincel.fillRect(40,60,120,30);
//nuvem direita
pincel.fillStyle= "white";
pincel.fillRect(400,50,100,50);
pincel.fillStyle= "white";
pincel.fillRect(390,60,120,30);
//nuvem centro
pincel.fillStyle= "white";
pincel.fillRect(250,100,50,25);
pincel.fillStyle= "white";
pincel.fillRect(243,105,67,15);
//terra ou chão
pincel.fillStyle= "brown";
pincel.fillRect(0,300,600,100);
//grama ou mato
pincel.fillStyle= "green";
pincel.fillRect(0,280,600,20);
}
function personagem(){
//tronco
pincel.fillStyle= "red";
pincel.beginPath();
pincel.moveTo(xPersonagem, yPersonagem);
pincel.lineTo(xPersonagem-(larguraDoPersonagem/2),yPersonagem+alturaDoPersonagem);
pincel.lineTo(xPersonagem+(larguraDoPersonagem/2),yPersonagem+alturaDoPersonagem);
pincel.fill();
//cabeça
pincel.beginPath();
pincel.arc(xPersonagem,yPersonagem-((alturaDoPersonagem/100)*4),(alturaDoPersonagem/100)*20,0,2*Math.PI);
pincel.fill();
}
setInterval(atualizarTela,1);
document.onkeydown= leTeclado;
</script>