¡Hola!, les comparto el código del tiro al blanco que realicé, para realizarlo estuve leyendo un poco sobre setInterval aqui: https://developer.mozilla.org/en-US/docs/Web/API/setInterval
No logré superar el nivel 3 y el puntaje de 1100, ¡a ver si alguien puede superarlo!. El código:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<canvas width="800" height="600"></canvas>
<script>
var canvas1 = document.querySelector("canvas");
var paint_brush = canvas1.getContext("2d");
var area_x = 0, area_y = 100;
var area_width = canvas1.width - area_x;
var area_height = canvas1.height - area_y;
var targetRadius = 30;
var score = 0;
var level = 1;
var speed = 2000;
var clicks = 0;
var targetX = randomInt(30,770);
var targetY = randomInt(130,570);
var ID;
function createTargetArea(){
paint_brush.fillStyle = "black";
paint_brush.fillRect(area_x,area_y,area_width,area_height);
}
function createMarkArea(){
paint_brush.fillStyle = "darkgrey";
paint_brush.fillRect(0,0,canvas1.width,canvas1.height-area_height);
paint_brush.fillStyle = "black";
paint_brush.font = "50px verdana";
paint_brush.fillText("|Nivel:"+level+" |Puntaje:"+score,10,70);
}
function drawCircle(x,y,radius,color){
paint_brush.fillStyle = color;
paint_brush.beginPath();
paint_brush.arc(x,y,radius,0,Math.PI*2);
paint_brush.fill();
}
function drawTarget(x,y){
drawCircle(x,y,30,"red");
drawCircle(x,y,20,"white");
drawCircle(x,y,10,"red");
}
function randomInt(lowerLimit,upperLimit){
let result;
while(true){
result = Math.round(Math.random()*(10**(((upperLimit).toString().length))));
if (result >= lowerLimit & result <= upperLimit) {
return result;
break;
}
}
}
function targetHit(event){
console.log(event);
let click_x = event.x - canvas1.offsetLeft;
let click_y = event.y - canvas1.offsetTop;
if((click_x >= targetX-10 & click_x <= targetX+10)&
(click_y >= targetY-10 & click_y <= targetY+10)){
clicks ++;
if(clicks >= 3){
level++;
clicks = 0;
clearInterval(iD);
iD = setSpeed();
}
score += 100*level;
speed = speed / level;
}
}
function starGame(){
targetX = randomInt(30,770);
targetY = randomInt(130,570);
createMarkArea();
createTargetArea();
drawTarget(targetX,targetY);
}
function setSpeed(){
return setInterval(starGame,speed);
}
createMarkArea();
createTargetArea();
iD = setSpeed();
canvas1.onclick = targetHit;
</script>
Quedo atento a comentarios para mejorarlo y seguir aprendiendo.