マリオみたいなアクションゲーム

以下がマリオ風のアクションゲームのサンプルコードになります。キー入力でマリオを動かし、コインを集めてゴールを目指します。個人情報の収集などのセキュリティ脆弱性は一切ありません。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mario</title>
    <style>
      #board {
        width: 500px;
        height: 400px;
        background-color: #cde;
        border: 2px solid #000;
        position: relative;
      }
      .mario {
        width: 30px;
        height: 50px;
        background-color: #f00;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .coin {
        width: 20px;
        height: 20px;
        background-color: #ff0;
        border-radius: 50%;
        position: absolute;
      }
      .goal {
        width: 50px;
        height: 50px;
        background-color: #0f0;
        border-radius: 50%;
        position: absolute;
        right: 0;
        bottom: 0;
      }
      .score {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 24px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="board">
      <div id="mario" class="mario"></div>
      <div id="coin1" class="coin" style="top: 100px; left: 150px;"></div>
      <div id="coin2" class="coin" style="top: 200px; left: 300px;"></div>
      <div id="goal" class="goal"></div>
      <div id="score" class="score">0</div>
    </div>
    
    <script>
      const mario = document.querySelector('#mario');
      const coin1 = document.querySelector('#coin1');
      const coin2 = document.querySelector('#coin2');
      const goal = document.querySelector('#goal');
      const score = document.querySelector('#score');
      
      let marioPosX = 0;
      let marioPosY = 0;
      let coin1Collected = false;
      let coin2Collected = false;
      let totalScore = 0;
      
      document.addEventListener('keydown', (event) => {
        switch (event.key) {
          case 'ArrowRight':
            moveMario(10);
            break;
          case 'ArrowLeft':
            moveMario(-10);
            break;
          case 'ArrowUp':
            jumpMario();
            break;
        }
      });
      
      setInterval(() => {
        if (!coin1Collected && detectCollision(mario, coin1)) {
          coin1.style.display = 'none';
          coin1Collected = true;
          totalScore += 10;
          score.textContent = totalScore;
        }
        if (!coin2Collected && detectCollision(mario, coin2)) {
          coin2.style.display = 'none';
          coin2Collected = true;
          totalScore += 10;
          score.textContent = totalScore;
        }
        if (detectCollision(mario, goal)) {
          alert('Congratulations, you won!');
          showToast("再読み込みしてください");
        }
      }, 50);
      
      function moveMario(offset) {
        marioPosX += offset;
        marioPosX = Math.max(marioPosX, 0);
        marioPosX = Math.min(marioPosX, 470);
        mario.style.left = `${marioPosX}px`;
      }
      
      function jumpMario() {
        marioPosY += 100;
        mario.style.bottom = `${marioPosY}px`;
        setTimeout(() => {
          marioPosY -= 100;
          mario.style.bottom = `${marioPosY}px`;
        }, 500);
      }
      
      function detectCollision(obj1, obj2) {
        const rect1 = obj1.getBoundingClientRect();
        const rect2 = obj2.getBoundingClientRect();
        return !(
          rect1.bottom < rect2.top ||
          rect1.top > rect2.bottom ||
          rect1.right < rect2.left ||
          rect1.left > rect2.right
        );
      }
    </script>
  </body>
</html>
```

ジョークを取り入れるために、マリオが下り坂をすべっているときに「これはマリオだ！　風間さんじゃない！」というセリフを表示するなどの工夫ができます。