Pessoal,
Usei bastante do conhecimento adquirido e fui buscar na internet como fazer um checagem de divisão por 10.
incrementei placa, nivel automatico com aumento de velocidade de alvo.
por favor, comente o codigo .
<h1>Acerte o Alvo</h1>
<canvas id="jogo" width="600" height="400"></canvas>
<canvas id="placar" width="200" height="300"></canvas>
<script>
//Tela
var tela = document.getElementById('jogo');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
// Variáveis
var raio = 10;
var movimentoX = sorteiaPosicao();
var movimentoY = sorteiaPosicao();
var placar = 0;
var nivel = 3000;
// Placar
var numeros = document.getElementById('placar');
var digital = numeros.getContext('2d');
digital.fillStyle = 'lightgray';
digital.fillRect(0, 0,150, 170);
digital.font='35px Georgia';
digital.fillStyle='black';
digital.fillText('Placar', 30, 30)
digital.font='79px Georgia';
digital.fillStyle='black';
digital.fillText('0', 50, 100);
//Funções
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);
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
}
function limpaPlacar() {
digital.clearRect(0, 0, 150, 170);
digital.fillStyle = 'lightgray';
digital.fillRect(0, 0, 150, 170);
digital.font='35px Georgia';
digital.fillStyle='black';
digital.fillText('Placar', 30, 30)
}
function Alvo(x,y){
desenhaCirculo(x, y, raio+25, 'red');
desenhaCirculo(x, y, raio+15, 'white');
desenhaCirculo(x, y, raio, 'red');
}
function aumentandoNivel(n){
if(n % 10 == 0){
nivel = nivel - 500;
alert('Você Subil de Nivel!!')
}else{
}
}
function sorteiaPosicao(max){
return Math.floor(Math.random() * max);
}
function escrevePlacar(p){
limpaPlacar();
digital.font='79px Georgia';
digital.fillStyle='black';
digital.fillText(p, 50, 100);
}
function alvoMovimento(){
limpaTela();
movimentoX = sorteiaPosicao(600);
movimentoY = sorteiaPosicao(400);
Alvo(movimentoX, movimentoY);
}
setInterval(alvoMovimento, nivel);
function dispara(evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if((x > movimentoX - raio)
&& (x<movimentoX + raio)
&& (y>movimentoY - raio)
&& (y<movimentoY + raio)){
placar++;
escrevePlacar(placar);
console.log(placar);
alvoMovimento();
aumentandoNivel(placar);
}
}
tela.onclick = dispara;
</script>