如果年紀夠的，應該看到貪食蛇這三個字會先想到以前的 3G 時代手機，像是 Nokia 3310 之類的，但貪食蛇說真的還蠻好玩的，幾乎就是無腦純靠手技，一節課就可以玩滿整個畫面，而且還無法暫停再繼續，今天就帶大家用 ChatGPT 簡單的做出一個貪食蛇網頁遊戲，不需要使用任何圖片，單靠程式碼就可以，也不需要架一個網頁，儲存為 HTML 檔案，單機就能玩。
透過 ChatGPT 製作貪食蛇網頁遊戲
不想自己製作的這裡可以試玩：https://steachs.com/ai_game/greedy_snake/snake.html
先跟大家分享一下指令，最初我是簡單下一個指令：
做一個貪食蛇網頁遊戲，比如要吃的點都是 #，蛇本身是用 0 串起來
第一版做出來時，發現 ChatGPT 自己幫我在蛇跟食物加上了底色，看起來也不錯，我就請他移除了 # 跟 0 來表示，往下來看。
後來我請他移掉 # 跟 0 再加上一個開始遊戲的按鈕，才不會一開頁面就馬上開跑。
然後 Game Over 會自動跳出提示，這沒問題，不用跟他說都可以做到。
最後我覺得遊戲總應該要有個計分之類的，我就加上了分數及存活時間，挺有趣的，除了排版再調整外，基本上已經是可以玩的貪食蛇網頁小遊戲，整個過程不到五分鐘就做完了。
完整指令大概可以這樣下：
利用 Javascript 做一個貪食蛇網頁遊戲 20×20 格，蛇是綠色，食物是灰色，蛇頭中間加一個小黑點，網頁加上一個開始遊戲按鈕，按下才開始，並針對遊戲計分，每吃一個是 10 分，另外加上遊戲存活時間。
這樣就完整了，最後將 ChatGPT 給你的網頁程式碼存成一個副檔名為 .html 的檔案，直接執行就可以在瀏覽器上玩囉。
我完整的程式碼如下：
<!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>
