chatGPTで〇×ゲーム作ってみた。

この記事では、chatGPTで制作した〇×ゲームを紹介しています。HTML、CSS、JavaScriptを使用したシンプルな〇×ゲームです。

『chatGPTとのやり取り回数は4回』

『所要時間は約10分』

完成したゲームは

からご覧いただけます。

HTML

ゲームボードとリセットボタンを含む基本的なマークアップです。

<section id="game">
    <div id="tic-tac-toe-board" class="board">
        <div class="row">
            <div class="cell" data-cell-index="0"></div>
            <div class="cell" data-cell-index="1"></div>
            <div class="cell" data-cell-index="2"></div>
        </div>
        <div class="row">
            <div class="cell" data-cell-index="3"></div>
            <div class="cell" data-cell-index="4"></div>
            <div class="cell" data-cell-index="5"></div>
        </div>
        <div class="row">
            <div class="cell" data-cell-index="6"></div>
            <div class="cell" data-cell-index="7"></div>
            <div class="cell" data-cell-index="8"></div>
        </div>
    </div>
    <button id="reset-button">リセット</button>
</section>

CSS

スタイルシートでゲームボードとセル、リセットボタンに美しいデザインを適用します。

#game {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 70vh;
    background-color: #2c3e50;
    color: #ecf0f1;
    font-family: 'Arial', sans-serif;
}

.board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-gap: 5px;
    margin-bottom: 20px;
}

.cell {
    width: 100px;
    height: 100px;
    background-color: #34495e;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 8px;
}

.cell:hover {
    background-color: #1abc9c;
    color: #2c3e50;
}

#reset-button {
    background-color: #e74c3c;
    color: #ecf0f1;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

#reset-button:hover {
    background-color: #c0392b;
}

JavaScript

ゲームのロジックを実装し、ユーザーの操作に応じてゲームの状態を更新します。

const cells = document.querySelectorAll('.cell');
let currentPlayer = 'O';
const winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];

function checkWin(player) {
    return winningCombinations.some(combination => {
        return combination.every(index => {
            return cells[index].classList.contains(player);
        });
    });
}

function handleClick(event) {
    const cell = event.target;
    const currentClass = currentPlayer;
    cell.textContent = currentPlayer;
    cell.classList.add(currentClass);

    if (checkWin(currentClass)) {
        alert(`${currentPlayer} wins!`);
        return;
    }

    currentPlayer = currentPlayer === 'O' ? 'X' : 'O';
}

cells.forEach(cell => {
    cell.addEventListener('click', handleClick, {
        once: true
    });
});

document.getElementById('reset-button').addEventListener('click', resetGame);

function resetGame() {
    cells.forEach(cell => {
        cell.textContent = '';
        cell.classList.remove('O', 'X');
        cell.removeEventListener('click', handleClick);
        cell.addEventListener('click', handleClick, {
            once: true
        });
    });
    currentPlayer = 'O';
}

まとめ

chatGPTで非常にプログラミングのハードルが下がったと思います。基本的な知識は必要ですが、分からないことはchatGPTが全て教えてくれるので少し勉強すれば誰でも簡単にプロ並みのウェブサイトを作ることができます。実際の現場でもchatGPTやコードを生成してくれるツールなどを使っていないエンジニアは少ないと思います。是非一度試して見て下さい。プログラミングの面白さが実感できるはずです。

chatGPTで〇×ゲーム作ってみた。

HTML

CSS

JavaScript

まとめ

Web制作のご依頼・ご相談など、お気軽にご連絡ください。