AI game creator

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

No:9170

←

Prev Next

→

deidara botch
Developer User3788｜Date and time 23/7/21 23:40:55
Build time 30.092 sec｜Game capacity 3.528KB｜

Script

了解しました。「デイダラボッチ」というゲームを作成します。以下が実装例です。

このプログラムは、1枚のHTMLファイルに「デイダラボッチ」というゲームを実装しています。ゲームのルールは以下の通りです。 1. 9つのセルが並ぶグリッドが表示されます。 2. サイコロの目（1~6の数字）が各セルにランダムに表示されます。 3. セルをクリックすると、そのセルが選択状態になり、背景色が黄色に変わります。 4. 選択されたセルを再度クリックすると、選択が解除され、背景色が元に戻ります。このように、JavaScriptを用いて簡単なゲームを作成しました。

←

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">
    <style>
        #container {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
        }
        .cell {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            font-size: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="container"></div>

init: function() {
                this.drawCells(); // グリッドを描画
                this.rollDice(); // サイコロを振る
            },

drawCells: function() {
                var container = document.getElementById('container');
                for (var i = 0; i < this.gridSize; i++) {
                    var cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.addEventListener('click', this.onCellClick.bind(this, i));
                    container.appendChild(cell);
                }
            },

rollDice: function() {
                this.numbers = [];
                for (var i = 0; i < this.gridSize; i++) {
                    var number = Math.floor(Math.random() * 6) + 1; // 1から6のランダムな数
                    this.numbers.push(number);
                }
                this.renderNumbers();
            },

renderNumbers: function() {
                var cells = document.getElementsByClassName('cell');
                for (var i = 0; i < cells.length; i++) {
                    cells[i].textContent = this.numbers[i];
                }
            },

onCellClick: function(index) {
                if (this.selected.indexOf(index) === -1) {
                    this.selected.push(index); // セルを選択状態にする
                    var cell = document.getElementsByClassName('cell')[index];
                    cell.style.backgroundColor = 'yellow';
                } else {
                    var selectedIndex = this.selected.indexOf(index);
                    this.selected.splice(selectedIndex, 1); // 選択を解除する
                    var cell = document.getElementsByClassName('cell')[index];
                    cell.style.backgroundColor = 'white';
                }
            },
        };

// ゲームの初期化
        game.init();
    </script>
</body>
</html>
```

このプログラムは、1枚のHTMLファイルに「デイダラボッチ」というゲームを実装しています。ゲームのルールは以下の通りです。

1. 9つのセルが並ぶグリッドが表示されます。
2. サイコロの目（1~6の数字）が各セルにランダムに表示されます。
3. セルをクリックすると、そのセルが選択状態になり、背景色が黄色に変わります。
4. 選択されたセルを再度クリックすると、選択が解除され、背景色が元に戻ります。

このように、JavaScriptを用いて簡単なゲームを作成しました。