Copiez-collez le code HTML ci-dessous dans votre éditeur de code :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Cookie clicker</title>

    <style>
      @import url(https://fonts.googleapis.com/css?family=Kavoon);

      body {
        background-image: url("img/bgBlue.jpg");
        background-repeat: repeat;
        font-family: Kavoon;
        font-size: 24px;
        text-align: center;
        color: white;
      }

      .container {
        max-width: 320px;
        margin: auto;
      }

      h1 {
        font-size: 28px;
        background-color: rgba(0, 0, 0, 0.25);
        padding: 10px 40px 10px 40px;
        border-radius: 10px;
      }

      figure {
        position: relative;
        margin: 0;
      }

      figure > span {
        position: absolute;
        top: 25px;
        right: 50px;
        border-radius: 21px;
        height: 42px;
        width: 56px;
        background-color: #f4d03f;
        box-shadow: 4px 4px 4px black;
        padding-top: 9px;
      }

      button {
        display: block;
        width: 100%;
        font-family: Kavoon;
        font-size: 24px;
        background-color: white;
        padding: 9px;
        border-radius: 10px;
        border-width: 0;
      }

      p {
        text-align: left;
      }
      
      img[alt="GrandMa"] {
        float: left;
      }

      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Cookie clicker</h1>
      <figure>
        <img src="img/perfectCookie.png" alt="cookie">
        <span>0</span>
      </figure>

      <button>start</button>

      <p class="hidden">
        <img src="img/grandMa.png" alt="GrandMa" width="64" height="64">
        <span></span>
      </p>
    </div>

    <script>
      /*
       *  Variables globles
       */
      
      // Booléen indiquant si la partie est en cours
      let playing = false;
      
      // Temps restant
      let remainingTime;
      
      // Nombre de clics sur le cookie
      let clickCount = 0;

      // Zone d'affichage du score
      let score = document.querySelector("figure > span");

      // Paragraphe pour l'affichage du temps restant
      let timeDisplay = document.querySelector("p");

      // Zone d'affichage des secondes restantes
      let time = document.querySelector("p > span");

      // Bouton de démarrage
      let startButton = document.querySelector("button");

      // Image du cookie
      let cookieImage = document.querySelector("figure > img");
    </script>
  </body>
</html>