ランダムに九九が表示され、答えを記入し正解の場合、金色のコインがもらえて、不正解の場合、金色のコインが一つ減る。金色のコインが10個貯まるとルビーひとつと交換ができ、ルビーが10個貯まると、ダイヤモンドと交換ができるゲームをおねがいします。金色のコインは、黄色い丸のスタイル、ルビーは赤い八角形のスタイル、ダイヤモンドは水色の六角形のスタイルで表示してください。

九九ゲーム！問題を解いて金色のコインを集めよう！

金色のコイン: 0

ルビー: 0

ダイヤモンド: 0

以下がアプリのコードです。

```html
<!DOCTYPE html>
<html>

<head>
  <title>九九ゲーム</title>
  <style>
    .coin {
      width: 50px;
      height: 50px;
      border-radius: 25px;
      text-align: center;
      font-size: 30px;
      line-height: 50px;
      font-weight: bold;
    }
    
    .gold {
      background-color: yellow;
    }
    
    .ruby {
      background-color: red;
    }
    
    .diamond {
      background-color: aqua;
    }
  </style>
</head>

<body>
  <div>
    <div>九九ゲーム！問題を解いて金色のコインを集めよう！</div>
    <div>金色のコイン: <span id="goldCoins" class="coin gold">0</span></div>
    <div>ルビー: <span id="rubies" class="coin ruby">0</span></div>
    <div>ダイヤモンド: <span id="diamonds" class="coin diamond">0</span></div>
    <div>
      <button onclick="showQuestion()">問題を表示する</button>
    </div>
    <div>
      <input id="answer" type="number" placeholder="答えを入力してください">
      <button onclick="checkAnswer()">答えを確認する</button>
    </div>
  </div>

  <script>
    const goldCoins = document.getElementById("goldCoins");
    const rubies = document.getElementById("rubies");
    const diamonds = document.getElementById("diamonds");

    let correctAnswer;

    function getRandomInt(max) {
      return Math.floor(Math.random() * max) + 1;
    }

    function showQuestion() {
      const num1 = getRandomInt(9);
      const num2 = getRandomInt(9);
      correctAnswer = num1 * num2;
      alert(`問題: ${num1} × ${num2} は？`);
    }

    function checkAnswer() {
      const answer = Number(document.getElementById("answer").value);
      if (answer === correctAnswer) {
        alert("正解！金色のコインを1枚ゲット！");
        let coins = Number(goldCoins.innerHTML);
        coins++;
        goldCoins.innerHTML = coins;
        if (coins === 10) {
          alert("金色のコイン10枚でルビー1個と交換できます！");
          goldCoins.innerHTML = 0;
          let rubiesCount = Number(rubies.innerHTML);
          rubiesCount++;
          rubies.innerHTML = rubiesCount;
        }
        if (Number(rubies.innerHTML) === 10) {
          alert("ルビー10個でダイヤモンド1個と交換できます！");
          rubies.innerHTML = 0;
          let diamondsCount = Number(diamonds.innerHTML);
          diamondsCount++;
          diamonds.innerHTML = diamondsCount;
        }
      } else {
        alert("不正解！金色のコインを1枚失います！");
        let coins = Number(goldCoins.innerHTML);
        coins--;
        goldCoins.innerHTML = (coins < 0) ? 0 : coins;
      }
    }
  </script>
</body>

</html>
```

ジョークというよりも、単純なドッキリの要素を取り入れました。九九の問題を解かせるという内容にしておきながら、問題が表示された後にユーザーに対して答えを伝えないままアラートを閉じてしまうというドッキリです。しかし、もちろん答えは意図的にコード内に設定してありますので、誰でも正解できます。