Untitled

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="scripts/jquery-3.2.1.min.js"></script>
<style>
    /* K6ik stiilid on siin */

    header {
        color: aquamarine;
    }

    td {
        width: 17vw;
        height: 17vw;
    }

    button {
        margin-top: 2vh;
    }

</style>

<body>
    <center>
        <!-- Veebilehe kood l2heb siia -->
        <h1>Clicker Game</h1>
        <p>Score: <text id="score">0</text></p>
        <table border="1">
            <tr>
                <td id="11"></td>
                <td id="12"></td>
                <td id="13"></td>
                <td id="14"></td>
                <td id="15"></td>
            </tr>
            <tr>
                <td id="21"></td>
                <td id="22"></td>
                <td id="23"></td>
                <td id="24"></td>
                <td id="25"></td>
            </tr>
            <tr>
                <td id="31"></td>
                <td id="32"></td>
                <td id="33"></td>
                <td id="34"></td>
                <td id="35"></td>
            </tr>
            <tr>
                <td id="41"></td>
                <td id="42"></td>
                <td id="43"></td>
                <td id="44"></td>
                <td id="45"></td>
            </tr>
            <tr>
                <td id="51"></td>
                <td id="52"></td>
                <td id="53"></td>
                <td id="54"></td>
                <td id="55"></td>
            </tr>
        </table>

        <button id="startGame">Start</button>
    </center>
</body>

<script>
    let score = 0;
    let timeout = 1000; // in ms
    let squareColor = "rgb(255, 0, 0)";
    let gameStarted = false;

    function getRandomSquareId() {
        let min = 1;
        let max = 5;
        let x = Math.floor(Math.random() * max) + min;
        let y = Math.floor(Math.random() * max) + min;
        return y.toString() + x.toString();
    }

    function clearTheBoard() {
        for (let y = 1; y <= 5; y++) {
            for (let x = 1; x <= 5; x++) {
                let id = "#" + y.toString() + x.toString();
                $(id).css("background-color", "white");
            }
        }
    }

    function renewPointSquare() {
        clearTheBoard();
        let randomID = getRandomSquareId();
        $("#" + randomID).css("background-color", squareColor);
        setTimeout(renewPointSquare, timeout);
        timeout = timeout * 0.95;
        if (timeout < 150) {
            timeout = 150;
        }
    }

    // M2ngu loogika


    $("#startGame").click(function() {
        if (gameStarted) {
            location.reload();
        } else {
            gameStarted = true;
            renewPointSquare();
            $("td").click(function() {
                if ($(this).css("background-color") == squareColor) {
                    score += 1;
                } else {
                    score -= 1;
                }
                $("#score").text(score);
            });
        }
    });

</script>

</html>