•  
     

Fazer o Mario se mover para a esquerda, para a direita, para cima, e para baixo usando as setas do teclado - jQuery

Animar nosso personagem com base no parâmetro de entrada passado pelo usuário pelo teclado.

Cada tecla pressionada é traduzida em um número para que o computador o use. Não se preocupe em memorizá-los, por enquanto te passamos o básico em script.js

Código: Selecionar todos

// Left arrow key pressed
case 37:
  ('img').animate({left: "-=10px"}, 'fast');

A seta esquerda do nosso teclado é traduzida para o número 37 pelo computador. Quando essa tecla for pressionada, movemos a imagem para a esquerda, subtraindo 10px
Para mover para cima, subtraímos 10px da parte de cima top
Para mover para a direita, adicionamos 10px à esquerda left
Por fim, para mover para baixo, adicionamos 10px à parte de cima top
Você pode completar os movimentos das setas para cima, para baixo, e para a direita? O que acontece se você somar pixels +=10px ao invés de subtrair?

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg">
</body>
</html>


CSS

Código: Selecionar todos

img{
position:relative;
left:0;
top:0;
}


JavaScript

Código: Selecionar todos

$(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
			// Left arrow key pressed
			case 37:
				$('img').animate({left: "-=10px"}, 'fast');
				break;
			// Up Arrow Pressed
			case 38:
			    $('img').animate({top: "-=10px"}, 'fast');
				// Put our code here
				break;
			// Right Arrow Pressed
			case 39:
			    $('img').animate({left: "+=10px"}, 'fast');
				// Put our code here
				break;
			// Down Array Pressed
			case 40:
			    $('img').animate({top: "+=10px"}, 'fast');
				// Put our code here
				break;
		}
	});
});



Clique no Mario e use as setas do teclado: http://jsfiddle.net/f5wadu12/