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

No:3840

3902

←

Prev Next

→

Collect Bell Marks
Developer User3694｜Date and time 23/6/26 18:48:56
Build time 25.267 sec｜Game capacity 2.913KB｜

Script

了解しました。私は、簡単なミニゲーム「ベルマーク・コレクション」というものを作ってみました。以下がそのHTMLファイルです。

ベルマーク・コレクション

画面内に表示されるベルマークをタップしよう！

このゲームでは、画面内にランダムに表示されるベルマークをタップして集めることが目的です。すべてのベルマークを集めると、おめでとう！というアラートが出ます。絵文字を利用してベルマークを表示し、スマホでも快適に遊べるようにしました。以上が私が作成した「ベルマーク・コレクション」です。何か不明点があれば、遠慮なくご質問ください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解しました。

私は、簡単なミニゲーム「ベルマーク・コレクション」というものを作ってみました。以下がそのHTMLファイルです。

```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ベルマーク・コレクション</title>
</head>
<body>
    <h1>ベルマーク・コレクション</h1>
    <p>画面内に表示されるベルマークをタップしよう！</p>
    <div id="container">
    </div>
    <script>
        // ベルマークの画像URL(ここでは絵文字を使用)
        const imageSrc = "🔔";
        
        // 画面サイズに応じたベルマークの数
        const numBells = Math.round(window.innerWidth / 50);
        
        // クリックされたベルマークの数
        let score = 0;
        
        // コンテナ要素を取得
        const container = document.getElementById("container");
        
        // ベルマークをランダムに配置する関数
        function placeBell() {
            // コンテナ要素のサイズを取得
            const containerWidth = container.offsetWidth;
            const containerHeight = container.offsetHeight;
            
            // ランダムな位置でベルマークを作成
            const bell = document.createElement("div");
            bell.className = "bell";
            bell.style.left = Math.floor(Math.random() * (containerWidth - 50)) + "px";
            bell.style.top = Math.floor(Math.random() * (containerHeight - 50)) + "px";
            bell.innerHTML = imageSrc;
            
            // ベルマークをクリックした時の処理
            bell.addEventListener("click", function() {
                container.removeChild(bell);
                score++;
                if (score >= numBells) {
                    alert("おめでとう！すべてのベルマークを集めた！");
                }
            });
            
            // コンテナ要素にベルマークを追加
            container.appendChild(bell);
        }
        
        // 初期化処理
        for (let i = 0; i < numBells; i++) {
            placeBell();
        }
    </script>
    <style>
        /* ベルマークのスタイル */
        .bell {
            position: absolute;
            font-size: 50px;
            cursor: pointer;
        }
    </style>
</body>
</html>
```

このゲームでは、画面内にランダムに表示されるベルマークをタップして集めることが目的です。すべてのベルマークを集めると、おめでとう！というアラートが出ます。絵文字を利用してベルマークを表示し、スマホでも快適に遊べるようにしました。

以上が私が作成した「ベルマーク・コレクション」です。何か不明点があれば、遠慮なくご質問ください。