AI game creator

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

No:7600

3596

←

Prev Next

→

Hidden Chair Game
Developer o2pi4｜Date and time 23/7/8 23:47:06
Build time 11.419 sec｜Game capacity 2.157KB｜

Script

了解、椅子隠しゲームを作りたいと思います。以下にプログラムの実装例を示します。

このプログラムでは、椅子をランダムに配置した9つのマス目が表示されます。各マス目をクリックすると、そのマス目の下にある椅子が見つかります。全ての椅子を見つけると、おめでとうのメッセージが表示されます。

←

Prev　Next

→ 　

Back　

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

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

了解、椅子隠しゲームを作りたいと思います。以下にプログラムの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
<title>椅子隠しゲーム</title>
<style>
    #container {
        display: flex;
        flex-wrap: wrap;
        width: 400px;
        height: 400px;
        border: 1px solid black;
    }
    .chair {
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32px;
        cursor: pointer;
    }
    .found {
        background-color: yellow;
    }
</style>
</head>
<body>
<div id="container">
</div>
<script>
    var numChairs = 9;  // 椅子の数
    var foundChairs = 0;  // 見つけた椅子の数

// 椅子の位置をランダムに設定
    var chairPositions = [];
    for (var i = 0; i < numChairs; i++) {
        var row = Math.floor(i / 3);
        var col = i % 3;
        chairPositions.push({row: row, col: col});
    }
    chairPositions.sort(function() {return 0.5 - Math.random()});

// 椅子を表示
    var container = document.getElementById("container");
    for (var i = 0; i < numChairs; i++) {
        var chair = document.createElement("div");
        chair.className = "chair";
        chair.innerHTML = "🪑";
        chair.setAttribute("data-position", chairPositions[i].row + "," + chairPositions[i].col);
        chair.addEventListener("click", function() {
            if (!this.classList.contains("found")) {
                this.classList.add("found");
                foundChairs++;
                if (foundChairs == numChairs) {
                    alert("おめでとうございます！すべての椅子を見つけました！");
                }
            }
        });
        container.appendChild(chair);
    }
</script>
</body>
</html>
```