Estou aprendendo canvas no HTML5. Consegui desenhar um circulo, usando o JavaScript para movimentar, consegui através de eventos do mouse e as setas do teclado. Mas eu gostaria de saber se tem como eu determinar essa posição através de uma variável ou outra coisa?? Alguém tem alguma ideia?
-
Estou no celular agora e fica complicado de pesquisar e colar os links, mas pesquise por "jsfiddle games" tem vários jogos em canvas, eu vi um da cobrinha (snake) em que ela se movimenta sozinha, ache ele e de uma estudada no código...– Jader A. WagnerCommented 20/08/2014 às 12:58
-
A sua ideia é calcular/gerar um caminho onde um determinado elemento vai percorrer?– WakimCommented 23/08/2014 às 0:36
2 Respostas
Você pode criar um Interval que vai incrementar variáveis, o que mudaria a posição do objeto. Outra opção é ter um array de posições pre-definidas, em ultimo caso você pode usar Math.random() e obter valores aleatórios.
Bem conforme os colegas já disseram, você deseja jogar um valor aleatório para que se movimente sozinho ou por um caminho criando uma animação, ou apenas colocar um valor fixo?
Se for o primeiro caso basta trocar a variável que recebe o valor do "mouse" ou "teclado" pelo valor fixo, caso seja a animação (como acho que seja), você tem 2 opções jogar valores aleatórios ou adicionar um trigger (gatilho) para que a cada 'X segundos' por exemplo a posição do seu desenho seja atualizada na área de desenho dando o movimento.
Atualmente existe 3 forma de fazer isso:
window.setTimeout: Chama uma função apenas 1x
window.setInterval: Chama uma função infinitamente
window.requestAnimationFrame:
Essa função tem função semelhante as outras duas, a diferença dela pras demais é que foi implementada no HTML5 e tem foco em animação então a grosso modo ela trabalha melhor o processamento das chamadas.
Assim sendo a ideia é assim que seu navegador estiver pronto disparar um desses eventos que faça a atualização das posições dos elementos do 'canvas', abaixo coloco um exemplo simples de um circulo, circulando (rs) pela área do 'canvas'.
<canvas id="seuCanvas" width="1024" height="780" style="border: 1px solid #000000;"></canvas>
<script>
// Inicia a chama do canvas no JS
var canvas = document.getElementById("seuCanvas"), context = canvas.getContext("2d");
var amimacao = 1000; // Tempo da animação (em milisegundos)
var radius = 15; // Determina o raio do circulo
// Monta o circulo no canvas com a posição
function desenhaCirculo() {
// Calcula uma posição aleatória para o X
var centerX = Math.floor((Math.random() * canvas.width) + 1);
// Calcula uma posição aleatória para o Y
var centerY = Math.floor((Math.random() * canvas.height) + 1);
// Limpa e desenha o circulo na posição
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#00FF00";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "#00000";
context.stroke();
// Adiciona uma cahama a cada X milisegundos
window.setTimeout(desenhaCirculo, amimacao);
}
// Adiciona movimento ao carregar a página
window.onload = desenhaCirculo;
</script>