1
resposta

Minha versão

<canvas></canvas>
<script>

    function setCanvasFillStyle(color = "black") {

        paint.fillStyle = color;
    }

    function drawArc(x = 0, y = 0, radius = 10, color = "black") {

        setCanvasFillStyle(color);
        paint.beginPath();
        paint.arc(x, y, radius, 0, 2 * Math.PI);
        paint.fill();
    }

    function drawRect(x = 0, y = 0, width, height, color = "black", colorBorder = "black") {

        setCanvasFillStyle(color);
        paint.fillRect(x, y, width, height);
        paint.strokeStyle = colorBorder;
        paint.strokeRect(x, y, width, height);
    }

    function setDimensionScreen(width, height) {

        screen.width = width;
        screen.height = height;
    }

    function drawTarget(x, y) {

        drawArc(x, y, radius + 20, "red");
        drawArc(x, y, radius + 10, "white");
        drawArc(x, y, radius, "red");
    }

    function clearScreen() {

        paint.clearRect(0, 0, widthScreen, heightScreen);
    }

    function setRandomPositionTarget() {

        xRandom = getRndInteger(50, widthScreen - 50);
        yRandom = getRndInteger(50, heightScreen - 50);
    }

    function getRndInteger(min, max) {

        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function refreshScreen() {

        clearScreen();
        setRandomPositionTarget();
        drawTarget(xRandom, yRandom);

        // console.log(`x${xRandom} - y ${yRandom}`);
    }


    function shot(event) {

        var x = event.pageX - screen.offsetLeft;
        var y = event.pageY - screen.offsetTop;

        // lógica de acerto?
        if (hitTheTarget(x, y)) {

            alert("Hit the target.");
        }
    }

    function hitTheTarget(x, y) {

        return ((x >= xRandom - radius && x <= xRandom + radius) && 
                (y >= yRandom - radius && y <= yRandom + radius));
    }


    //#region Variables
    var radius = 10, randomInterval = 0;
    var widthScreen = 600, heightScreen = 400;
    var xRandom = 0, yRandom = 0;

    //Get canvas 
    var screen = document.querySelector("canvas");

    //Get Paint
    var paint = screen.getContext("2d");


    //#endregion

    setDimensionScreen(widthScreen, heightScreen);

    randomInterval = getRndInteger(1000, 2000);

    console.log(randomInterval);

    setInterval(refreshScreen, randomInterval);

    screen.onclick = shot;

</script>
1 resposta

Oi Antonio

Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.