Juego de tiro al blanco inspirado en el juego de Lógica de Programación 3 | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Tiro al Blanco</h1>
    <div style="display: flex;">
        <canvas width="1080" height="480"> canvas</canvas>
        <div style="display: flex; flex-direction: column; height: 480px; margin-left: 5px; max-width: 250px; justify-content: space-around; align-items: center;">
            <h2 style="text-align: center;">Tiempo: 60 segundos</h2>
            <textarea readonly=true style="resize: none; border: none; outline: none; font-size: 26px; width: 90%; height: 80%; text-align: center;">Puntos: 0</textarea>
            <div style="width: 90%; height: 20%; display: flex; flex-direction: column; justify-content: space-around; align-items: center;">
                <button class="start" style="width: 100%; height: 48%;">Jugar</button>
                <button class="reset" style="width: 100%; height: 48%;">Empezar de nuevo</button>
            </div>
        </div>
    </div>
</body>

<script>
    var salidaPuntos = document.querySelector("textarea");
    var h2 = document.querySelector("h2");
    var btnStart = document.querySelector(".start");
    var btnRestart = document.querySelector(".reset");
    var canvas = document.querySelector("canvas");
    var pincel = canvas.getContext("2d");
    var alto = canvas.height;
    var ancho = canvas.width;
    var radio, x, y, puntos = 0, tiempo, clicks = 0;
    var tiempoDeJuego = 60, intervalID = null;

    function numRandom(min, max){
        var rand = (Math.floor(Math.random() * 10000)) % max;
        if (rand > min)    return rand;
        else return min;
    }

    function hacerObjetivoRandom(){
        radio = numRandom(2,15);
        var offset = radio;
        var cantDianas = 4;
        x = numRandom(radio+(offset*cantDianas), ancho-(radio+(offset*cantDianas)));
        y = numRandom(radio+(offset*cantDianas), alto-(radio+(offset*cantDianas)));

        if (x < radio)    x += radio;
        else if (x > (ancho-radio))    x -= radio;

        if (y < radio)    y += radio;
        else if (y > (alto-radio))    y -= radio;

        var colores = ["red", "white"];
        for (var i = cantDianas; i >= 0; i--) {
            hacerCirculo(x,y,radio + (offset*i), colores[(i%2)]);
        }

        tiempo = new Date();
        clicks = 0;
    }

    function hacerCirculo(x, y, radio, color){
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x,y,radio,0,Math.PI*2);
        pincel.fill();
    }

    function limpiarPantalla(){
        pincel.clearRect(0,0,ancho,alto);
        pincel.fillStyle = "lightgray";
        pincel.fillRect(0,0,ancho,alto);
    }

    function tiro(e){
        clicks++;
        var xActual = e.pageX - canvas.offsetLeft;
        var yActual = e.pageY - canvas.offsetTop;

        if (x < xActual+radio &&
            x > xActual-radio &&
            y < yActual+radio &&
            y > yActual-radio &&
            intervalID != null) {

            // Un punto solo por darle
            puntos++;
            // + puntos si fue en poco tiempo, la diana era chica o no tomo muchos clicks
            var tiempoActual = new Date();
            if(tiempoActual.getHours() == tiempo.getHours() && tiempoActual.getMinutes() == tiempo.getMinutes()){
                var segs = (tiempoActual.getTime() - tiempo.getTime()) / 1000;
                //poco tiempo
                if (segs < 0.99) {
                    //diana chica
                    if (radio == 2) {
                        //un click
                        if (clicks == 1)    puntos += 5;
                        //+ de un click
                        else    puntos += 3;
                    }
                    //diana mediana
                    if (radio > 2 && radio <= 5) {
                        if (clicks == 1)    puntos += 3;
                        else    puntos += 2;
                    }
                    //diana grande
                    else{
                        if (clicks == 1)    puntos++;
                    }
                }
                //mediano tiempo
                else if (segs >= 1 && segs <= 1.49) {
                    if (radio == 2) {
                        if (clicks == 1)    puntos += 4;
                        else    puntos += 2;
                    }
                    if (radio > 2 && radio <= 5) {
                        if (clicks == 1)    puntos += 2;
                        else    puntos += 1;
                    }

                }
                //mucho tiempo
                else{
                    if (radio == 2) {
                        if (clicks == 1)    puntos += 3;
                        else    puntos += 2;
                    }
                    if (radio > 2 && radio <= 5) {
                        if (clicks == 1)    puntos += 2;
                    }
                }
            }
            salidaPuntos.value = "Puntos: " + puntos;
            limpiarPantalla();
            hacerObjetivoRandom();
        }

    }

    function correrTiempo(){
        h2.textContent = "Tiempo: " + tiempoDeJuego + " " + (tiempoDeJuego == 1 ? "segundo" : "segundos");
        if(tiempoDeJuego == 0){
            clearInterval(intervalID);
            intervalID = null;
        }
        else    tiempoDeJuego--;
    }

    function jugar(){
        intervalID = setInterval(correrTiempo,1000);
    }

    function restart(){
        h2.textContent = "Tiempo: 60 segundos";
        salidaPuntos.value = "Puntos: 0";
        tiempoDeJuego = 60;
        clearInterval(intervalID);
        intervalID = null;
        puntos = 0;
    }

    pincel.fillStyle = "lightgray";
    pincel.fillRect(0,0,ancho,alto);

    hacerObjetivoRandom();

    canvas.onclick = tiro;
    btnStart.onclick = jugar;
    btnRestart.onclick = restart;

</script>

</html>