JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pitch"></div>
<div id="score-label">Score: <span id="score">0</span> points</div>

CSS

#pitch div {
    width: 40px;
    height: 40px;
    margin: 2px;
    float: left;
    background-color: lightgray;
}

#pitch div.moo {
    background-color: green;
}

#score-label {
    clear: both;
}

JavaScript

// @haliphax

var
    WIDTH = 7
    , HEIGHT = 7
    , field
    , timer
    , score
;

field = document.querySelector("#pitch");
score = 0;

for(var row = 0; row < HEIGHT; row++)
{
    var first = "clear: left;";
    
    for(var col = 0; col < WIDTH; col++)
    {
        var cell = document.createElement("div");
        cell.setAttribute("style", first);
        first = "";
        field.appendChild(cell);
    }
}

timer = setInterval(function()
{
    var
        myrow = (Math.random() * HEIGHT) | 0
        , mycol = (Math.random() * WIDTH) | 0
        , mycell
        , moo
    ;
    
    moo = document.querySelector("#pitch .moo");
    
    if(moo != null)
    {
        moo.setAttribute("class", null)
    }

    document
        .querySelectorAll("#pitch div")[myrow * WIDTH + mycol]
        .setAttribute("class", "moo")
    ;
}
, 2000);

setTimeout(function()
{
    clearInterval(t);
    alert("GAME OVER, MAN!");
}
, 60000);

document.onclick = function(e)
{
    var target = (e.target || e.srcElement);
    
    if(target.getAttribute("class") == "moo")
    {
        score++;
        document.querySelector("#score").innerHTML = score;
        target.setAttribute("class", null);
    }
};