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

No:5935

211

←

Prev Next

→

Search for hidden characters lurking in the screen..ALL
Developer User3788｜Date and time 23/7/1 2:50:25
Build time 30.945 sec｜Game capacity 3.031KB｜

Script

以下のようなコードを実装することで、画面内に潜む隠れキャラを探すゲームを作成することができます。

隠れキャラを探せ！

🐰 🐻 🐱 🐶 🐼

このコードでは、`gameboard`というidを持つ要素内に5種類の隠れキャラが表示されています。そのうちの1体が非表示にされ、プレイヤーはその隠れキャラを見つけるゲームです。クリックイベントを追加しており、正解であればおめでとうのメッセージが表示され、ゲームが終了します。誤答の場合は残念のメッセージが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

以下のようなコードを実装することで、画面内に潜む隠れキャラを探すゲームを作成することができます。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>隠れキャラを探せ！</title>
    <style>
        #gameboard {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        .hidden-chara {
            position: absolute;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <h1>隠れキャラを探せ！</h1>
    
    <div id="gameboard">
        <span class="hidden-chara">🐰</span>
        <span class="hidden-chara">🐻</span>
        <span class="hidden-chara">🐱</span>
        <span class="hidden-chara">🐶</span>
        <span class="hidden-chara">🐼</span>
    </div>
    
    <p id="result"></p>
    
    <script>
        // ゲームボード要素の取得
        const gameboard = document.getElementById("gameboard");
        
        // 隠れキャラ要素の取得
        const hiddenCharas = document.getElementsByClassName("hidden-chara");
        
        // 非表示にする隠れキャラのインデックスをランダムに選択
        const hiddenIndex = Math.floor(Math.random() * hiddenCharas.length);
        
        // 隠れキャラを非表示にする（ランダムに選択した1体を表示）
        hiddenCharas[hiddenIndex].style.visibility = "hidden";
        
        // 隠れキャラをクリックした時の処理
        function charaClick() {
            // クリックされた要素のインデックスを取得
            const currentIndex = Array.from(hiddenCharas).indexOf(this);
            
            // クリックした要素が隠れキャラであってかつ、正解ならば
            if (currentIndex === hiddenIndex) {
                // 結果を表示してゲーム終了
                document.getElementById("result").textContent = "おめでとう！隠れキャラを見つけたよ！";
                gameboard.removeEventListener("click", charaClick);
            } else {
                // 間違いを表示
                document.getElementById("result").textContent = "残念！もう一度探してみてね！";
            }
        }
        
        // 隠れキャラ要素にクリックイベントを追加
        Array.from(hiddenCharas).forEach(function(chara) {
            chara.addEventListener("click", charaClick);
        });
        
    </script>
</body>
</html>
```