Olá pessoal, fiz um programa com basicamente tudo que aprendi, só que está não está funcionando corretamente.
<meta charset="UTF-8">
<strong><h1>Bem vindo ao jogo!<h1></strong>
<hr><hr>
<h2>Qual dificuldade você quer?"</h2> <br>
<input> Responda com: <strong>facil </strong>,<strong>medio </strong>ou <strong>dificil.</strong><br></input>
<canvas width="800" height="600"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
var cores = ["yellow","green", "grey","red"];
var posicao = 0;
function limpaTela(){
pincel.clearRect(0,0, 800,600);
}
function Cor(){
while(posicao <= cores.length){
pincel.fillStyle = cores[posicao];
}
if(posicao > cores.length){
return posicao = 0;
}
}
function aumentaPosicao(){
posicao++;
}
var x = 50;
function desenhaCirculo(x, y, raio){
Cor();
pincel.beginPath();
pincel.arc(x,y, raio, 0, 2*Math.PI);
pincel.fill();
}
function atualizaTela(){
limpaTela();
desenhaCirculo();
x++;
}
setInterval(aumentaPosicao, 500);
function dificuldade(){
if(input.value=facil){
setInterval(atualizaTela, 500);
}
else if (input.value=medio){
setInterval(atualizaTela, 250);
}
else if (input.value=dificil)
setInterval(atualizaTela, 100);
}
function dispara(evento) {
var w = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(w >= x + 10 && w <= x-20){
alert("VOCÊ ACERTOU!!!")
}
else{
alert("VOCÊ ERROU!!!")
}
}
dificuldade();
tela.onclick = dispara;
</script>