Sujet : Compteur de point jeu Jquery

Bonjour je suis débutante en Java Script. Je dois réaliser un jeu interactif et là je bloque sur un point normalement simple.

Le but de mon jeu et de cliquer sur tout les carrés (ils bougent).

Le problème est que je voudrais afficher un compteur qui calcul les points à chaque fois que l'utilisateur clique sur un carré. Mais je n'y arrive pas ...

Quelqu'un pourrait-il m'aider s'il vous plait?

PS: j'ai joint mon code ci dessous.

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">

    <style>
        img {
            display:20 block;
            margin:absolute auto;
        }
        var= compteur 
    </style>
</head>
<body>

<img src="carre.png" alt="carre" style="width:20% height:20%" class="monstre carre1">
<img src="carre.png" alt="carre" style="width:20% height:20%" class="monstre carre2">
<img src="carre.png" alt="carre" style="width:20% height:20%" class="monstre carre3">
<img src="carre.png" alt="carre" style="width:20% height:20%" class="monstre carre4">
<img src="carre.png" alt="carre" style="width:20% height:20%" class="monstre carre5">
<img src="carre.png" alt="carre" style="width:20% height:20%" class="monstre carre6">
<img src="carre.png" alt="carre" style="width:20% height:20%" class="monstre carre7">


</body>
</html>
$(document).ready(function(){
    var width = $(window).width();

    $('.monstre').on('click', function(){
        $(this).hide();
    });
    setInterval(function(){
        $('.monstre').each(function(){
            $(this).animate({ 
                top: Math.floor((Math.random() * 500) + 1),
                left: Math.floor((Math.random() * width) + 1)
            }, 500);
        });
        
    }, 500);

});