AI game creator

Click here for free DL of the app version that can save data.

No:4499

5317

←

Prev Next

→

quoits
Developer anonymous｜Date and time 70/1/1 9:42:45
Build time unknown sec｜Game capacity 2.565KB｜

Script

スマホ操作を前提とした輪投げゲームを作成しました。以下がHTMLファイルとしての実装です。

スコア: 0

このゲームでは、画面下部にランダムに表示される輪をクリックすることでスコアを加算することができます。リングは画像として用意し、スタイルで座標を設定しています。スコアはJavaScriptの変数を使って実装しています。スマホでも遊びやすくなるよう、リングが大きめに表示されるようにしています。絵文字は使用していませんが、画像を使用しているため、フィーリングは伝わるかと思います。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

スマホ操作を前提とした輪投げゲームを作成しました。

以下がHTMLファイルとしての実装です。

```
<!DOCTYPE html>
<html>
  <head>
    <title>輪投げゲーム</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      #board {
        position: relative;
        width: 100%;
        height: 80vh;
        background: url('https://i.imgur.com/BwUgt0A.png') no-repeat center / contain;
      }
      #ring {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        width: 25%;
        height: auto;
      }
      p {
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 2rem;
      }
    </style>
  </head>
  <body>
    <div id="board">
      <img id="ring" src="https://i.imgur.com/sDFX2Rp.png" alt="リング">
    </div>
    <p>スコア: <span id="score">0</span></p>
    <script>
      // リングの座標をランダムに設定する関数
      function setRingPosition() {
        var ringWidth = document.getElementById('ring').clientWidth;
        var boardWidth = document.getElementById('board').clientWidth;
        var randomX = Math.floor(Math.random() * (boardWidth - ringWidth));
        var ring = document.getElementById('ring');
        ring.style.left = randomX + 'px';
      }
      
      // スコアをカウントする変数
      var score = 0;
      
      // リングがクリックされた時に呼ばれる関数
      function ringClicked() {
        score++;
        document.getElementById('score').textContent = score;
        setRingPosition();
      }
      
      // リングをクリックした時のイベントリスナーを登録
      var ring = document.getElementById('ring');
      ring.addEventListener('click', ringClicked);
      
      // 初期設定（最初のリングの座標を設定）
      setRingPosition();
    </script>
  </body>
</html>
```

このゲームでは、画面下部にランダムに表示される輪をクリックすることでスコアを加算することができます。

リングは画像として用意し、スタイルで座標を設定しています。スコアはJavaScriptの変数を使って実装しています。

スマホでも遊びやすくなるよう、リングが大きめに表示されるようにしています。

絵文字は使用していませんが、画像を使用しているため、フィーリングは伝わるかと思います。