1

Estou tentando mover um objeto na direção em que a pessoa pressiona a tela, move e depois solta. Tentei usar alguns laços for (foi a única coisa que pensei) mas sem sucesso.

[se não deu bem pra entender segue a imagem de como seria]Como é pra ser

Estou usando o canvas do HTML5 e JavaScript.

EDITADO

O meu código até o momento

<!DOCTYPE html>
<html>
<head>
	<title>Canvas</title>
</head>
<body>
	<center>
		<canvas id="canvas" width="320" height="482"></canvas>
	</center>
	<script>
		var canvas   = document.getElementById("canvas");
		var contexto = canvas.getContext("2d");
		var touchX, touchY;
		var objetos = [];

		setInterval(function(){
			atualizaCanvas();
			atualizaPos();
		}, 25);

		function atualizaCanvas(){
			contexto.fillStyle = "#f0f0f0";
			contexto.fillRect(0, 0, 320, 482);
			for(var x in objetos){
				contexto.fillStyle = objetos[x].cor;
				contexto.fillRect(objetos[x].x, objetos[x].y, 20, 20);
			}
		}

		function atualizaPos(){
			for(var x in objetos){
				if(objetos[x].xComeco != objetos[x].xFinal){
					objetos[x].x += (objetos[x].xFinal - objetos[x].xComeco)/10;
				}
				objetos[x].y -= 10;
				if (objetos[x].y <= -10){
					delete objetos[x];
				}
			}
		}

		canvas.onmousedown = function(evento){
			touchX = evento.clientX - canvas.offsetLeft;
			touchY = evento.clientY - canvas.offsetTop;
		};

		canvas.onmouseup = function(evento){
			var ttX = evento.clientX - canvas.offsetLeft;
			var ttY = evento.clientY - canvas.offsetTop;
			if (ttY < touchY){
				objetos.push({
					x: touchX,
					y: touchY,
					cor: "red",
					xComeco: touchX,
					xFinal: ttX
				});
			}
		};
	</script>
</body>
</html>

3
  • Pode mostrar o código de o que já começou a fazer? 5/07/2015 às 1:56
  • Mostre seu código, por favor. Em geral, se você quer que uma animação aconteça num canvas sem interação do usuário (i.e. o objeto continue se movendo depois do ponto B) você provavelmente deve usar getAnimationFrame. Ou no máximo um setTimeout ou setInterval. Essa parte você já sabe fazer, ou tem dúvida? Para a pergunta não ficar muito ampla, contextualize melhor, diga o que você sabe fazer e o que ainda está te trazendo dificuldade.
    – mgibsonbr
    5/07/2015 às 2:46
  • Eu fui tentando um pouco mais e cheguei em um código que até chega perto do esperado for(var x in objetos){... objetos[x].x += (objetos[x].xFinal - objetos[x].xComeco)/10; ..., xComeco é a posição X onde a pessoa começou a pressionar a tela e xFinal é a posição X onde a pessoa parou de pressionar. 5/07/2015 às 3:02

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .