【副業】Replitを使って五目並べを作ってみた。作り方の解説をします。

今回の記事は、ゲーム作成ツール【　Replit　】を使って五目並べを作ってみました。　

ゲーム作成って一見難しそうに見えますが、今回紹介するゲーム作成ツールだと初心者でも簡単に作れます！！

私自身も難しそうと思って作ってみたのですが、めっちゃ簡単に作れたよ！！

では、本題に入りますがゲームを作ったことがないのにどーやってゲームを作るのか？と思った方もいると思います。

ずばり！今流行りのAIを使用してゲームを作ってもらいます。

今回は【　chatGPT×Replit　】でゲーム制作していきます！

みなさんには、この記事を読みながらできるように作り方の紹介もしますので、ぜひ一緒にやってみましょう、

chat GPTに指示
ゲーム作製
テストプレイ
完成

chat GPTに指示

まず初めに、chat GPTを開いて、ゲームを作るように指示しましょう。

ここで、なるべくchat GPTが理解できるように指示しましょう

指示文
ブラウザでできる、五目並べをを作って下さい。
ルールは，，，（ここであなた好みのルールを指定して下さい）

指示をすると、⇧⇧このようにAiから返事されるはずです。

次に出された、コードをゲーム作製ツールに貼り付けましょう。

ゲーム作製

今回使うゲーム制作ツールはReplitです。

手順

登録
左上の＋Create Replを押す
無料コースを選択
コードを貼る

左上のところに、適したコードを貼り付けましょう。

今回使用したコードも貼り付けておくので皆さんもぜひ使ってみて下さい。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五目並べ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>五目並べ</h1>
    <div id="game-board"></div>
    <p id="message"></p>
    <button id="reset-btn">リセット</button>

    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    display: flex;                 /* Flexboxを使用して中央揃え */
    justify-content: center;       /* 横方向の中央揃え */
    align-items: center;           /* 縦方向の中央揃え */
    height: 100vh;                 /* ビューポートの高さを100%に */
}

h1 {
    margin-top: 20px;
    font-size: 2em;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(9, 50px);
    grid-template-rows: repeat(9, 50px);
    gap: 1px;
    margin: 20px auto;
}

.cell {
    width: 50px;
    height: 50px;
    background-color: #ddd;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.black, .white {
    width: 90%;  /* セルの90%のサイズで石を表示 */
    height: 90%;
    border-radius: 50%;  /* 円形にする */
}

.black {
    background-color: black;
}

.white {
    background-color: white;
}

#message {
    font-size: 1.2em;
    margin: 20px 0;
}

#reset-btn {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    margin-bottom: 20px; /* ボタンの下に余白追加 */
}

Javascript

const boardSize = 9;
let board = [];
let isBlackTurn = true;
let gameOver = false;

const gameBoard = document.getElementById('game-board');
const messageElement = document.getElementById('message');
const resetButton = document.getElementById('reset-btn');

// 初期化関数
function initBoard() {
    board = [];
    gameBoard.innerHTML = '';
    for (let i = 0; i < boardSize; i++) {
        board[i] = [];
        for (let j = 0; j < boardSize; j++) {
            board[i][j] = null;

            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.dataset.row = i;
            cell.dataset.col = j;
            cell.addEventListener('click', handleClick);
            gameBoard.appendChild(cell);
        }
    }
    isBlackTurn = true;
    gameOver = false;
    messageElement.textContent = '黒のターン';
}

// セルクリック時の処理
function handleClick(event) {
    if (gameOver) return;

    const row = event.target.dataset.row;
    const col = event.target.dataset.col;

    if (!board[row][col]) {
        board[row][col] = isBlackTurn ? 'black' : 'white';
        event.target.classList.add(isBlackTurn ? 'black' : 'white');

        if (checkWin(row, col)) {
            messageElement.textContent = `${isBlackTurn ? '黒' : '白'}の勝利！`;
            gameOver = true;
        } else {
            isBlackTurn = !isBlackTurn;
            messageElement.textContent = `${isBlackTurn ? '黒' : '白'}のターン`;
        }
    }
}

// 勝利判定関数
function checkWin(row, col) {
    const player = board[row][col];
    return checkDirection(row, col, 1, 0, player) || // 横
           checkDirection(row, col, 0, 1, player) || // 縦
           checkDirection(row, col, 1, 1, player) || // 斜め（右下）
           checkDirection(row, col, 1, -1, player);  // 斜め（左下）
}

function checkDirection(row, col, rowDelta, colDelta, player) {
    let count = 1;

    for (let i = 1; i < 5; i++) {
        const newRow = parseInt(row) + i * rowDelta;
        const newCol = parseInt(col) + i * colDelta;
        if (newRow >= 0 && newRow < boardSize && newCol >= 0 && newCol < boardSize && board[newRow][newCol] === player) {
            count++;
        } else {
            break;
        }
    }

    for (let i = 1; i < 5; i++) {
        const newRow = parseInt(row) - i * rowDelta;
        const newCol = parseInt(col) - i * colDelta;
        if (newRow >= 0 && newRow < boardSize && newCol >= 0 && newCol < boardSize && board[newRow][newCol] === player) {
            count++;
        } else {
            break;
        }
    }

    return count >= 5;
}

// リセットボタン
resetButton.addEventListener('click', initBoard);

// ゲームの初期化
initBoard();