鮭魚第一次用Chat GPT寫記憶遊戲

我覺得有付費有差 GPT-4真的比較聰明

Steven

Published in

UniMarket

7 min readMar 28, 2023

在我想做遊戲開始前我有問chat gpt 你知道什麼是記憶遊戲嗎？

以下附上連結：

Chat Gpt 3.5版本的：https://shareg.pt/uSfZaIt

Chat Gpt 4版本的：https://shareg.pt/PbDS9Lz

兩者都理解，但是4的版本更能正確地描述清楚步驟

一開始我用3.5的版本下了很多指令給cht GPT

下了N次指令：

我想做一個遊戲像記憶遊戲，我幫我排16張卡牌，每張卡牌都有正反面，反面都是黑色，正面的顏色會隨機改變，正面卡牌兩個顏色為一組，共八組，遊戲開始兩秒後會卡牌翻到背面，

然後有一個扭是重新開始，點選後會全部重新排列
點選兩張卡牌作配對顏色相同的繼續顯示，不同的就翻回去直到結束。

得到的結論是：

我中間下了很多次的跟翻面的詞語他都很難理解，我從16個卡片下翻面，到1個卡片翻面，發現在3.5的版本中只有單獨對少數的下翻面的指令他聽了懂，到了16張他都不會翻面。
後還我跑去問同事，詢問下指令的方式，他給予我建議ai就像是一位工程師思考方式就像是疊積木的方式一段段條列式說明步驟他會比較能理解，從卡牌到-框架-正反…..一個個蓋起來，後來我再去用3.5嘗試列出來確實有比較懂。

3.他有時幫你結尾的地方都像是懂你的縈繫機制，但是程式邏輯就是寫的不對3.5他不夠聰明的原因

後來我用4的版本下了一次指令給Cht GPT一次就成功了！！有付費的真的有在聰明

成功指令：

我想做一個記憶遊戲，請幫我用HTML5, JS , CSS 完成

請幫我建立正方形卡牌，背面卡牌是顯示黑色 2.
幫我產生16張卡牌，在幫我把卡牌排成4x4的正方形內 3.
一開始為正面卡牌，每兩塊的卡牌正面是同個顏色，共八種顏色 4. 2秒後卡牌翻到背面
底下有一個重新開始的按鈕，按下去會打亂卡牌顏色同時卡牌會翻到正面
點選卡牌的背面，會顯示正面顏色，點選兩個一樣的顏色就會持續打開，但如果點選兩個不一樣的顏色就會在翻成背面
全都打開完成後幫我恭喜成功

以下為遊戲連結：https://codepen.io/oz_185/pen/abaPmXe

歡迎大家去玩玩看，先說一下我沒有幫他美化ＸＤＤ

成功程式碼以下為：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game</title>
    <style>
        /* Add your CSS here */
    </style>
</head>
<body>
    <div class="game-board">
        <!-- The game board will be generated here -->
    </div>
    <button class="restart-btn">重新開始</button>
    <script>
        // Add your JavaScript here
    </script>
</body>
</html>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

.card {
    width: 100px;
    height: 100px;
    background-color: black;
    cursor: pointer;
}

.hidden {
    display: none;
}

const colors = [
    "red", "red", "green", "green", "blue", "blue",
    "yellow", "yellow", "purple", "purple", "cyan", "cyan",
    "orange", "orange", "pink", "pink"
];

const gameBoard = document.querySelector('.game-board');
const restartBtn = document.querySelector('.restart-btn');

function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

function createCards() {
    shuffle(colors);
    gameBoard.innerHTML = '';
    for (let color of colors) {
        const card = document.createElement('div');
        card.classList.add('card');
        card.dataset.color = color;
        gameBoard.appendChild(card);
    }
}

function flipCards() {
    const cards = document.querySelectorAll('.card');
    setTimeout(() => {
        cards.forEach(card => card.style.backgroundColor = 'black');
    }, 2000);
}

function startGame() {
    createCards();
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => card.style.backgroundColor = card.dataset.color);
    flipCards();
}

let firstCard, secondCard;

gameBoard.addEventListener('click', (e) => {
    if (!e.target.classList.contains('card')) return;

    const card = e.target;
    card.style.backgroundColor = card.dataset.color;

    if (!firstCard) {
        firstCard = card;
    } else if (!secondCard && firstCard !== card) {
        secondCard = card;
        if (firstCard.dataset.color === secondCard.dataset.color) {
            firstCard = null;
            secondCard = null;
        } else {
            setTimeout(() => {
                firstCard.style.backgroundColor = 'black';
                secondCard.style.backgroundColor = 'black';
                firstCard = null;
               
                secondCard = null;
            }, 1000);
        }
    }
});

restartBtn.addEventListener('click', startGame);

startGame();

感謝閱讀。