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

No:9011

328

←

Prev Next

→

countermeasures to the declining birthrate in anot..ALL
Developer User3840｜Date and time 23/7/20 12:26:35
Build time 23.123 sec｜Game capacity 2.308KB｜

Script

了解です。以下に「異次元の少子化対策」というゲームの実装例を示します。

異次元の少子化対策

クリックすると子供が生まれます！

このプログラムは、5x5のゲームボード上でクリックすると「👶」(赤ちゃんの絵文字)が生まれるというゲームです。各セルをクリックすると、そのセルに新しい赤ちゃんが生まれます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に「異次元の少子化対策」というゲームの実装例を示します。

```
<!DOCTYPE html>
<html>
<head>
    <title>異次元の少子化対策</title>
    <style>
        #game-board {
            display: flex;
            flex-wrap: wrap;
            max-width: 300px;
            margin: 0 auto;
            padding: 20px;
        }

.cell {
            width: 30px;
            height: 30px;
            text-align: center;
            font-size: 20px;
            line-height: 30px;
        }

.active {
            background-color: lightblue;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>異次元の少子化対策</h1>
    <p>クリックすると子供が生まれます！</p>

let game_board = document.getElementById('game-board');
        let cells = [];

// ゲームボードの初期化
        for (let i = 0; i < board_size; i++) {
            cells[i] = [];
            for (let j = 0; j < board_size; j++) {
                let cell = document.createElement('span');
                cell.className = 'cell';
                cell.textContent = '🥚';
                cells[i][j] = cell;
                game_board.appendChild(cell);
            }
        }

// クリックイベントの追加
        cells.forEach((row, rowIndex) => {
            row.forEach((cell, columnIndex) => {
                cell.addEventListener('click', () => {
                    // 子供の誕生
                    let newCell = document.createElement('span');
                    newCell.className = 'cell';
                    newCell.textContent = '👶';
                    cells[rowIndex][columnIndex] = newCell;
                    game_board.replaceChild(newCell, cell);
                });
            });
        });
    </script>
</body>
</html>
```