Eu tenho visto a forma como o professor faz e tem resolvido os exercícios, e tem sido sempre de uma forma diferente da que eu pensei. Meu medo, é que por está fazendo processos simples, a minha forma de pensar não esteja me prejudicando agora mas possa vir me prejudicar no futuro. Tendo isso em mente, gostaria de saber porque o professor fez desse jeito (ele não colocou todas as instruções no desenhaAlvo de uma vez, fez outra função para isso. Eu já coloquei tudo em uma função só, qual o impacto disso?):
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
var raio = 10;
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
function desenhaAlvo(x, y) {
desenhaCirculo(x, y, raio+20, 'red');
desenhaCirculo(x, y, raio+10, 'white');
desenhaCirculo(x, y, raio, 'red');
}
function sorteiaPosicao(maximo) {
return Math.floor(Math.random() * maximo);
}
function atualizaTela() {
limpaTela();
var xAleatorio = sorteiaPosicao(600);
var yAleatorio = sorteiaPosicao(400);
desenhaAlvo(xAleatorio, yAleatorio);
}
setInterval(atualizaTela, 1000);
e Não desse jeito:
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var raio = 10
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
function aleatorio(maximo){
return Math.floor(Math.random()*maximo);
}
function desenhaAlvo(x,y){
limpaTela();
var x = aleatorio(600);
var y = aleatorio(300);
desenhaCirculo(x,y,raio+20,"red");
desenhaCirculo(x,y,raio+10,"white");
desenhaCirculo(x,y,raio,"red");
}
setInterval(desenhaAlvo,1000);