貪吃蛇遊戲怎麼做？用 ChatGPT 產生 snake.html 程式碼

想要自己做貪食蛇網頁遊戲，只要給 ChatGPT 完整指令包含蛇的移動規則、開始按鈕與計分機制，最後將產生的程式碼存成 HTML 檔案，用瀏覽器開啟就能直接遊玩。

如果年紀夠的，應該看到貪食蛇這三個字會先想到以前的 3G 時代手機，像是 Nokia 3310 之類的。貪食蛇說真的還蠻好玩的，幾乎就是無腦純靠手技，一節課就可以玩滿整個畫面，而且還無法暫停再繼續。今天阿湯就帶大家用 ChatGPT 簡單的做出一個貪食蛇網頁遊戲，不需要使用任何圖片，單靠程式碼就可以，也不需要架一個網頁，只要儲存為 HTML 檔案，單機就能玩。

透過 ChatGPT 製作貪食蛇網頁遊戲的基礎步驟

不想自己製作的這裡可以試玩：https://steachs.com/ai_game/greedy_snake/snake.html

要讓 ChatGPT 幫我們寫遊戲，最重要的是給出明確的指令。先跟大家分享一下指令，最初我是簡單下一個指令，請它幫我寫一個基本的貪食蛇網頁遊戲程式碼：

做一個貪食蛇網頁遊戲，比如要吃的點都是 #，蛇本身是用 0 串起來

第一版做出來時，我將程式碼實際執行，發現 ChatGPT 自己幫我在蛇跟食物加上了底色，畫面上甚至用了 # 跟 0 來表示區塊，雖然看起來也不錯，但畫面稍顯雜亂，所以我決定請它進一步修改，移除這些多餘的符號，往下來看。

調整遊戲畫面與體驗：加入開始按鈕

為了讓遊戲體驗更好，後來我請他移掉畫面上的 # 跟 0 來保持乾淨。此外，原本的程式碼一打開網頁就會馬上開跑，容易讓人措手不及，因此我請它在畫面上加上一個「開始遊戲」的按鈕，點擊後才會啟動。

至於遊戲失敗時的機制，當蛇撞到牆壁或自己的身體時，Game Over 會自動跳出瀏覽器的提示視窗，這部分沒問題，不用特別跟他說都可以做到。

增加遊戲挑戰性：設定計分與存活時間

最後我覺得遊戲總應該要有個目標跟計分之類的機制，我就請 ChatGPT 在畫面上方加上了分數及存活時間。這樣玩起來挺有趣的，除了排版可以再依照個人喜好調整外，基本上已經是可以玩的貪食蛇網頁小遊戲，整個過程不到五分鐘就做完了。

如果你想一次到位，完整指令大概可以這樣下，直接把所有需求都列出來：

利用 Javascript 做一個貪食蛇網頁遊戲 20x20 格，蛇是綠色，食物是灰色，蛇頭中間加一個小黑點，網頁加上一個開始遊戲按鈕，按下才開始，並針對遊戲計分，每吃一個是 10 分，另外加上遊戲存活時間。

如何執行與遊玩產生的 HTML 遊戲檔案？

這樣遊戲程式碼就完整了。最後只要將 ChatGPT 給你的網頁程式碼存起來即可，你可以跟著以下步驟操作：

1. 將 ChatGPT 產生的程式碼複製起來。
2. 在電腦上開啟「記事本」或任何純文字編輯器，將程式碼貼上。
3. 選擇「另存新檔」，並將副檔名儲存為 .html 的檔案（例如 snake.html）。
4. 直接對著該檔案點擊滑鼠兩下，或是點擊滑鼠右鍵選擇用瀏覽器開啟。

執行後就可以直接在瀏覽器上玩囉！

我完整的程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>貪食蛇遊戲</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } #game-board { display: grid; grid-template-columns: repeat(20, 20px); grid-template-rows: repeat(20, 20px); gap: 2px; margin-top: 20px; } .cell { width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; border: 1px solid #ccc; } .snake { background-color: green; position: relative; } .snake-head::after { content: ''; width: 6px; height: 6px; background-color: black; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .food { background-color: gray; } #start-button { padding: 10px 20px; font-size: 16px; cursor: pointer; } #scoreboard { display: flex; justify-content: space-between; width: 300px; margin-top: 10px; } </style> </head> <body> <div id="scoreboard"> <div>分數: <span id="score">0</span></div> <div>存活時間: <span id="time">00:00:00</span></div> </div> <button id="start-button">開始遊戲</button> <div id="game-board"></div> <script> const boardSize = 20; let board = []; let snake = [{x: 10, y: 10}]; let direction = {x: 1, y: 0}; // 初始方向設定為向右 let food = {x: 5, y: 5}; let gameBoard = document.getElementById('game-board'); let gameInterval; let score = 0; let scoreElement = document.getElementById('score'); let startTime, elapsedTime, timeInterval; let timeElement = document.getElementById('time'); // 初始化遊戲板 function initializeBoard() { for (let y = 0; y < boardSize; y++) { board[y] = []; for (let x = 0; x < boardSize; x++) { let cell = document.createElement('div'); cell.classList.add('cell'); gameBoard.appendChild(cell); board[y][x] = cell; } } } // 繪製蛇和食物 function draw() { // 清除遊戲板 for (let y = 0; y < boardSize; y++) { for (let x = 0; x < boardSize; x++) { board[y][x].classList.remove('snake', 'food', 'snake-head'); } } // 繪製食物 board[food.y][food.x].classList.add('food'); // 繪製蛇 snake.forEach((segment, index) => { board[segment.y][segment.x].classList.add('snake'); if (index === 0) { board[segment.y][segment.x].classList.add('snake-head'); } }); } // 移動蛇 function moveSnake() { let newHead = {x: snake[0].x + direction.x, y: snake[0].y + direction.y}; // 檢查是否碰到牆壁 if (newHead.x < 0 || newHead.x >= boardSize || newHead.y < 0 || newHead.y >= boardSize) { alert('Game Over'); clearInterval(gameInterval); clearInterval(timeInterval); return; } // 檢查是否碰到自己 for (let segment of snake) { if (newHead.x === segment.x && newHead.y === segment.y) { alert('Game Over'); clearInterval(gameInterval); clearInterval(timeInterval); return; } } // 移動蛇 snake.unshift(newHead); // 檢查是否吃到食物 if (newHead.x === food.x && newHead.y === food.y) { score += 10; scoreElement.textContent = score; generateFood(); } else { snake.pop(); } draw(); } // 生成新食物位置 function generateFood() { let newFoodPosition; while (true) { newFoodPosition = { x: Math.floor(Math.random() * boardSize), y: Math.floor(Math.random() * boardSize) }; if (!snake.some(segment => segment.x === newFoodPosition.x && segment.y === newFoodPosition.y)) { break; } } food = newFoodPosition; } // 重置遊戲 function resetGame() { snake = [{x: 10, y: 10}]; direction = {x: 1, y: 0}; // 重置方向為向右 score = 0; scoreElement.textContent = score; generateFood(); draw(); startTime = null; elapsedTime = 0; timeElement.textContent = '00:00:00'; } // 處理按鍵事件 function changeDirection(event) { switch (event.key) { case 'ArrowUp': if (direction.y === 0) direction = {x: 0, y: -1}; break; case 'ArrowDown': if (direction.y === 0) direction = {x: 0, y: 1}; break; case 'ArrowLeft': if (direction.x === 0) direction = {x: -1, y: 0}; break; case 'ArrowRight': if (direction.x === 0) direction = {x: 1, y: 0}; break; } } // 開始遊戲 function startGame() { resetGame(); clearInterval(gameInterval); // 確保不會有多個計時器在運行 clearInterval(timeInterval); gameInterval = setInterval(moveSnake, 200); startTime = Date.now(); timeInterval = setInterval(updateTime, 1000); } // 更新時間顯示 function updateTime() { elapsedTime = Date.now() - startTime; let seconds = Math.floor(elapsedTime / 1000); let minutes = Math.floor(seconds / 60); let hours = Math.floor(minutes / 60); seconds = seconds % 60; minutes = minutes % 60; timeElement.textContent = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; } document.addEventListener('keydown', changeDirection); document.getElementById('start-button').addEventListener('click', startGame); initializeBoard(); draw(); </script> </body> </html>

常見問題