 |
|
||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Animação, Animações, Técnicas de Animação |
Como movimentar uma imagem na superfície do elemento Canvas do HTML5 usando as teclas de direçãoQuantidade de visualizações: 1241 vezes |
|
Nesta dica mostrarei uma das técnicas básicas para a animação em HTML5 + JavaScript. Trata-se de detectar as teclas de direção do teclado e movimentar uma imagem na tela, ou melhor, na superfície de um elemento Canvas. Nem preciso reforçar que esta técnica é essencial para o desenvolvimento de jogos em JavaScript. Antes de vermos o código é importante lembrar que as imagens do foguete e das nuvens foram colocadas no mesmo diretório da página HTML. Como essas imagens podem ter direitos reservados, eu não as incluí para download. Fica por sua conta encontrá-las na internet ou desenhar as suas próprias. Então, sem mais enrolação, veja o código JavaScript + HTML5 completo, sem plugs-ins nem bibliotecas, apenas "Plain Old JavaScript":
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Introdução a HTML5 Games</title>
<style type="text/css">
body {background-color: white};
</style>
</head>
<body onLoad="desenharFoguete()">
<Canvas id="canvas" style="background-color: white" width="600" height="600">
</Canvas>
<script type="text/javascript">
"use strict";
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// vamos carregar a imagem do foguete
var foguete = new Image();
foguete.src = "foguete.gif"; // GIF transparente
// vamos carregar a imagem de fundo
var fundo = new Image();
fundo.src = "nuvens.jpg";
// posições iniciais do foguete
var largura_imagem = 80;
var altura_imagem = 125;
var posX = (canvas.width / 2) - (largura_imagem / 2);
var posY = (canvas.height / 2) - (altura_imagem / 2);
function desenharFoguete(){
// limpamos toda a área de desenho
contexto.clearRect(0, 0, canvas.width, canvas.height);
// vamos desenhar o fundo
contexto.drawImage(fundo, 0, 0);
// vamos desenhar o foguete no centro do Canvas
contexto.drawImage(foguete, posX, posY);
}
document.onkeydown = function(e){
// obtém a tecla pressionada
var key = window.event?e.keyCode:e.which;
if(key == 37){ // é a seta para a esquerda?
posX = posX - 5; // move 5 pixels para a esquerda
}
else if(key == 38){ // é a seta para cima?
posY = posY - 5; // move 5 pixels para cima
}
else if(key == 39){ // é a seta para a direita?
posX = posX + 5; // move 5 pixels para a direita
}
else if(key == 40){ // é a seta para baixo?
posY = posY + 5; // move 5 pixels para baixo
}
desenharFoguete(); // redesenha o foguete e o background
}
</script>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
