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

No:5102

1031

←

Prev Next

→

mushroom-less
Developer sayaensm｜Date and time 23/6/29 18:15:45
Build time 28.656 sec｜Game capacity 2.56KB｜

Script

キノコなくしゲームを作成します。

キノコなくしゲーム

画面上のキノコをタップして取り除こう！

このプログラムは、画面に表示されたキノコをクリックして取り除くゲームです。ゲームエリアには10個のキノコが表示され、キノコをクリックするとそのキノコが取り除かれ、ゲームクリア判定を行います。すべてのキノコを取り除いた場合、アラートが表示され、ゲームがリセットされます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

キノコなくしゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>キノコなくしゲーム</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        .mushroom {
            font-size: 40px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<h1>キノコなくしゲーム</h1>

<p>画面上のキノコをタップして取り除こう！</p>

<scripｔ>
    // ゲームの状態を表す変数
    let count = 0;

// キノコの配列を定義する
    const mushrooms = ["🍄", "🍄", "🍄", "🍄", "🍄", "🍄", "🍄", "🍄", "🍄", "🍄"];

// ゲームエリアの要素を取得する
    const gameArea = document.getElementById('game-area');

// キノコを表示する関数
    function displayMushrooms() {
        let output = "";
        for (let i = 0; i < mushrooms.length; i++) {
            output += '<span class="mushroom">' + mushrooms[i] + '</span>';
        }
        gameArea.innerHTML = output;
    }

// キノコをクリックしたときの処理
    function handleClick() {
        if (this.innerHTML == '<span class="mushroom">' +"🍄"+'</span>') {
            this.innerHTML = "　"; // キノコを取り除く
            count++; // カウントを増やす

// ゲームクリア判定
            if (count === mushrooms.length) {
                alert('ゲームクリア！');
                resetGame();
            }
        }
    }

// ゲームをリセットする関数
    function resetGame() {
        count = 0;
        for (let i = 0; i < mushrooms.length; i++) {
            mushrooms[i] = "🍄";
        }
        displayMushrooms();
    }

// ゲームを初期化する
    displayMushrooms();

// キノコにクリックイベントを追加する
    const mushroomsElements = document.getElementsByClassName('mushroom');
    for (let i = 0; i < mushroomsElements.length; i++) {
        mushroomsElements[i].addEventListener('click', handleClick);
    }
</script>

</body>
</html>
```