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

No:170

683

←

Prev Next

→

quoits
Developer User2908｜Date and time 23/6/2 2:48:25
Build time 93.896 sec｜Game capacity 4.543KB｜

Script

以下が1枚のhtmlファイルによる輪投げゲームの実装です。

輪投げゲーム

ターゲットに輪を投げてスコアを競おう！

🎯

この輪投げゲームでは、画面中央にターゲットが表示され、周りに3つのリングがあります。ボタンをクリックするとランダムな位置にターゲットが移動し、リングに入ったかどうかを判定して、スコアを加算します。リングの外に投げてしまった場合は、スコアは加算されずターゲットが元の位置に戻ります。スマホでの操作に対応するため、画面中央に配置されたボタンをタップすることで投げることができます。また、絵文字を多めに使っているため、見た目もカラフルで楽しい印象を与えます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

以下が1枚のhtmlファイルによる輪投げゲームの実装です。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>輪投げゲーム</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            text-align: center;
        }
        #score {
            font-size: 24px;
            margin-bottom: 16px;
        }
        #target {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            border-radius: 50%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 48px;
        }
        #ring {
            width: 400px;
            height: 400px;
            position: relative;
            margin: 0 auto;
            text-align: center;
        }
        .ring {
            width: 100%;
            height: 100%;
            border: 1px solid black;
            opacity: 0.2;
            position: absolute;
            top: 0;
            left: 0;
        }
        .ring1 {
            border-radius: 50%;
        }
        .ring2 {
            border-radius: 70%;
        }
        .ring3 {
            border-radius: 90%;
        }
        #button {
            font-size: 24px;
            padding: 8px 16px;
            border: none;
            background-color: #44c767;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 16px;
        }
    </style>
</head>
<body>
    <h1>輪投げゲーム</h1>
    <p>ターゲットに輪を投げてスコアを競おう！</p>
    <div id="score">0</div>
    <div id="target">🎯</div>
    <div id="ring">
        <div class="ring ring1"></div>
        <div class="ring ring2"></div>
        <div class="ring ring3"></div>
    </div>
    <button id="button">投げる！🤾‍♂️</button>
    <script>
        window.addEventListener('load', function() {
            var score = 0;
            var target = document.getElementById('target');
            var rings = document.querySelectorAll('.ring');
            var button = document.getElementById('button');

function updateScore() {
                document.getElementById('score').textContent = score;
            }

function resetTarget() {
                target.style.transform = '';
            }

function throwRing() {
                button.disabled = true;

var x = Math.floor(Math.random() * 201) - 100;
                var y = Math.floor(Math.random() * 201) - 100;

target.style.transform = `translate(${x}px, ${y}px)`;
                
                setTimeout(function() {
                    var bounds = target.getBoundingClientRect();
                    var hit = false;

for (var i = 0; i < rings.length; i++) {
                        var ring = rings[i];

if (bounds.top >= ring.offsetTop &&
                            bounds.right <= ring.offsetLeft + ring.offsetWidth &&
                            bounds.bottom <= ring.offsetTop + ring.offsetHeight &&
                            bounds.left >= ring.offsetLeft) {
                            hit = true;
                            score += 10 - i * 3;
                            updateScore();
                            resetTarget();
                            break;
                        }
                    }

if (!hit) {
                        resetTarget();
                    }

button.disabled = false;
                }, 1500);
            }

button.addEventListener('click', function() {
                throwRing();
            });
        });
    </script>
</body>
</html>
```

この輪投げゲームでは、画面中央にターゲットが表示され、周りに3つのリングがあります。ボタンをクリックするとランダムな位置にターゲットが移動し、リングに入ったかどうかを判定して、スコアを加算します。リングの外に投げてしまった場合は、スコアは加算されずターゲットが元の位置に戻ります。

スマホでの操作に対応するため、画面中央に配置されたボタンをタップすることで投げることができます。また、絵文字を多めに使っているため、見た目もカラフルで楽しい印象を与えます。