Vista電子報 No.61：請AI扮演電腦家教，教我寫網頁小遊戲

借力AI，提升個人競爭力。

Jul 04, 2024

昨天晚上，我很高興應中華華人講師聯盟的邀請，以「借力AI，提升個人競爭力」為題發表演說。近年來AI風起雲湧，誠然給各行各業帶來許多的衝擊和影響，如何掌握先機，提升個人競爭力，也就成為每位職場人士的必修學分。對於擔負傳道、授業等使命的企業講師或培訓師來說，自然也不在話下。

有鑒於AI具有資本密集和知識密集的特色，AI的確可以幫我們提升寫作、行銷的工作效率，關鍵是要懂得精準提問。這也呼應了我常在課堂上所提到的一句話，那就是「問對了，才能找到好答案」！話說回來，這和過往大家使用搜尋引擎時所採用的關鍵字思維，可說是大異其趣。

在短短的一個小時，我跟在座的諸位講師先進分享了AI的工作場景，好比幫忙整理會議紀錄、撰寫商品文案，乃至於整理靈感紀錄和開發商機等等⋯⋯大家也對AI的多元應用，感到驚奇不已。

我常常覺得，我們能夠親眼目睹AI時代的起飛，實在是一件幸運的事。以往，我們有太多的夢想，受限於技術、預算而無法實現；如今，有了AI成為我們的神隊友，只要你有好奇心，願意大膽嘗試行動，很多事情不但能夠順利完成，甚至可以事半功倍！

在本期的電子報，我就想舉一個自己的例子跟大家分享。昨天早上，我看了數據科學家尹相志在YouTube平臺上所發布的一支影片，讓我突發奇想：我是否可以依樣畫葫蘆，讓ChatGPT教我撰寫網頁小遊戲呢？

我給ChatGPT的指令相當明確：

請你模仿以下思路，幫我設計一款可以單純用HTML、JavaScript和CSS搭建的網頁版遊戲。遊戲要簡單耐玩，除了提供程式碼，請你附上詳細註解和相關教學。最後，請告知我該如何把程式碼部署到類似CodePen的免費平臺。

收到我的提問之後，ChatGPT果然很快幫我構思出一個很經典的網頁小遊戲。沒錯，那就是大家小時候都玩過的井字遊戲。

井字棋（Tic-Tac-Toe）是一個非常簡單且經典的遊戲，適合用來學習基本的 HTML、CSS 和 JavaScript。它的規則非常簡單，兩名玩家輪流在 3x3 的棋盤上標記自己的符號（通常是「X」和「O」），誰先在任意一條直線（橫、縱、斜）上連成三個相同的符號誰就贏。

為了要設計出井字遊戲，我們必須釐清遊戲的設計思路：

建立一個3x3的棋盤。
讓玩家能夠點擊棋盤上的格子來標記自己的符號。
檢查是否有玩家勝出或平手。
提供一個重置遊戲的按鈕。

在程式設計的邏輯與概念，可以分別從HTML、CSS和JavaScript來著手：

HTML是網頁的結構。所以，我們需要一個標題、一個棋盤容器和一個重置按鈕。

CSS是用來控制網頁的外觀和佈局的。所以，我們需要設計棋盤格子的大小、樣式以及互動效果。

JavaScript是用來處理互動邏輯的。我們需要處理玩家點擊事件、檢查勝利條件、檢查平手條件以及重置遊戲。

Thank you for reading Vista電子報. This post is public so feel free to share it.

接下來，讓我們來看看井字遊戲的程式，到底該怎麼寫？

1. HTML 部分

<!DOCTYPE html>: 宣告這是一個HTML5文件。
<html lang="zh-TW">: 設定文件語言為繁體中文。
<meta charset="UTF-8">: 設定字元編碼為UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 確保網頁在行動裝置上正常顯示。
<link rel="stylesheet" href="styles.css">: 將外部 CSS 檔案包含進來。
<div id="game-board">: 棋盤容器，包含9個格子，每個格子都有一個data-index屬性，用於標記位置。
<button id="reset-btn">重來</button>: 重置遊戲按鈕。
<div id="message"></div>: 用於顯示遊戲結果的訊息區域。
<script src="script.js"></script>: 將外部JavaScript檔案包含進來。

2. CSS 部分

body: 設定網頁的整體樣式，包括佈局和字體。
h1: 設定標題的樣式。
#game-board: 設定棋盤容器的樣式，使用CSS Grid來佈局。
.cell: 設定棋盤格子的樣式，包括大小、背景顏色、字體大小、游標樣式和邊框。
.cell:hover: 設定格子在滑鼠懸停時的樣式。
.cell.x 和 .cell.o: 設定格子內「X」和「 O」的顏色。
#reset-btn: 設定重置按鈕的樣式，包括大小、顏色、背景顏色和邊框樣式。
#message: 設定訊息區域的樣式。

3. JavaScript 部分

const board = document.getElementById('game-board');: 獲取棋盤容器。
const cells = document.querySelectorAll('.cell');: 獲取所有格子。
const message = document.getElementById('message');: 獲取訊息區域。
const resetBtn = document.getElementById('reset-btn');: 獲取重置按鈕。
let currentPlayer = 'x';: 設定當前玩家為「X」。
let gameActive = true;: 設定遊戲狀態為進行中。
const winningConditions = [ ... ];: 定義所有的勝利條件。
const handleCellClick = (e) => { ... };: 處理格子點擊事件的函數，負責標記玩家符號、檢查勝利和平手。
const checkWin = () => { ... };: 檢查是否有玩家勝出的函數。
const checkDraw = () => { ... };: 檢查是否平手的函數。
const resetGame = () => { ... };: 重置遊戲的函數。
cells.forEach(cell => { cell.addEventListener('click', handleCellClick); });: 為每個格子添加點擊事件監聽。
resetBtn.addEventListener('click', resetGame);: 為重置按鈕添加點擊事件監聽。

透過以上的設計和程式碼結構，不僅清晰易懂，而且讓遊戲具備良好的可擴展性和可維護性。更重要的是ChatGPT足以充當我的電腦助教，協助我了解HTML的結構、CSS的樣式設計以及JavaScript的互動邏輯。

寫好網頁遊戲之後，接下來就可以把程式部署到諸如CodePen的平臺。

連上CodePen網站，註冊一個免費帳號並記得登入。
點擊右上角的Create按鈕，選擇Pen創建一個新網頁專案。
將HTML、CSS和 JavaScript程式碼複製到對應的編輯框中。
點擊Save保存程式碼。
重複上述步驟，為每個小遊戲創建一個新的Pen。
將所有Pen的URL保存在主頁的對應位置。

如此一來，就可以在CodePen上免費部署和分享這些簡單耐玩的小遊戲囉！

有些讀者朋友可能沒聽過CodePen，我在這邊稍微介紹一下：

CodePen是一個線上社群和開發工具，專門為前端開發者設計。它提供了一個即時的HTML、CSS和JavaScript編輯和預覽環境，使開發者可以快速創建、測試和展示他們的網頁專案。

為何採用CodePen來部署網頁遊戲呢？

簡單快捷：CodePen提供即時編輯和預覽功能，可以快速創建和調試網頁遊戲，特別適合開發和測試小型遊戲。
分享方便：可以輕鬆分享自己的Pen網址給其他人，或者將其嵌入到自己的網站或部落格之中，方便展示和交流。
協作開發：CodePen支持多人協作，可以與其他開發者一起開發和改進遊戲，提升專案品質。
資源整合：CodePen支持引入各種外部資源，如圖片、聲音、外部資源庫等，方便整合到遊戲中，提升遊戲的功能和效果。
學習與成長：透過瀏覽和學習社群中其他開發者的作品，可以獲得靈感和技巧，快速提升自己的開發能力。

現在，歡迎大家來體驗一下ChatGPT教我設計的井字遊戲。

接下來，我又請ChatGPT教我設計另一款網頁遊戲，是我自己小時候相當喜歡玩的一個小遊戲，那就是記憶卡片配對遊戲。

簡單來說，記憶卡片配對遊戲是一個經典的記憶力遊戲，玩家需要翻開兩張相同的卡片進行配對。遊戲的目標是盡快找到所有的配對卡片。

在HTML的部分，我們需要一個標題、一個卡片容器和一個重置按鈕。而在CSS部分，我們需要設計卡片的樣式、佈局以及翻轉效果。至於在JavaScript的部分，我們則需要處理卡片翻轉、檢查配對、更新遊戲狀態以及重置遊戲。

很快地，ChatGPT就幫我構思了整個遊戲的思路。但我發現這個遊戲少了記錄功能，我希望可以自動計算要翻幾次牌，才能順利結束遊戲？

聰明的ChatGPT很快就弄懂了我的需求，所以它給我的建議如下：

在原有的HTML基礎上，新增了一個 <div id="attempts"> 用於顯示翻牌次數。
在原有的CSS基礎上，新增了對 #attempts 的樣式設定。
在JavaScript的部分，新增一個 attempts 變數來記錄翻牌次數。同時，在flipCard 函數中，每次翻牌時會增加attempts，並更新顯示的翻牌次數。在resetGame 函數中，重置attempts變數並更新顯示的翻牌次數。最後，在遊戲完成時，更新message的內容來顯示完成遊戲所花的翻牌次數。

經過以上的流程，我在半小時之內完成了記憶卡片配對遊戲。歡迎你用電腦來體驗一下！

看到這裡，不知道你是否跟我一樣，想要重新學習一下HTML、CSS跟JavaScript呢？於是，我請ChatGPT提供一些自學的建議：

循序漸進：從基礎的HTML開始，然後學習CSS，最後學習JavaScript。每一步都需要紮實掌握。
動手實踐：理論學習和實踐相結合，多動手寫程式碼，自己實現一些小功能。
多看多學：多瀏覽一些優秀的網站設計，學習別人的佈局和效果。
參與社群：加入一些網路社群或論壇，向其他開發者請教問題，交流學習經驗。

最後，它還提供了一些很棒的學習資源，我也順道跟大家分享：

網路資源

W3Schools
- 提供詳細的 HTML、CSS 和 JavaScript 教程和範例。
MDN Web Docs
- 提供全面的網頁開發文件和教程。
Codecademy
- 提供互動式的程式設計課程，涵蓋HTML、CSS和JavaScript。
freeCodeCamp
- 提供免費的網頁開發課程，並且有豐富的實戰練習。
CSS-Tricks
- 提供豐富的CSS技術文章和教程。

謝謝你看到這裡，相信你會發現：若能早點學會提問的技巧，肯定可以讓ChatGPT等生成式AI工具幫我們做很多事！第一屆「七天閃電AI營」即將開課了，如果你想搭上這班列車，請趕快把握最後的晚鳥優惠唷！

對了，如果你平常有關注投資理財的話，想必一定知道今天台積電的股價正式突破1000元大關了！

台積電今（4）日正式躋身第19檔千金股，股價突破1000元大關，帶動台股大盤上揚350.1點，攻上2萬3522.53點，也創下新高。台積電在市場資金湧入推升下，一開盤即攻上1000元大關，盤中最高達1010元，終場收在1005元，上漲26元，市值達26.06兆元，貢獻大盤211點。

你可能會很好奇，台積電的股票到底還能不能買？當然，這個問題你可以拿去問問ChatGPT。我相信，它可以從基本面、技術面、市場情緒和風險管理等層面給出各種建議。問題是這些建議看似無懈可擊，但真的有參考價值嗎？你真的敢聽從AI的建議去投資嗎？

這時，就讓我想起一位國中同學，大家都稱呼他強尼老師。他從事專職投資教學已超過十年的光景，並且建立了一套獨特的投資理念系統。強尼老師告訴我，他很樂意引領大家入門，但學習投資理財難以速成，需要花時間和心力來學習和積累。

AI雖然很方便，但它終究不是萬能的。如果你對強尼老師的投資教學感興趣的話，歡迎立刻訂閱。自即日起至10月6日晚上12點止，凡是訂閱時輸入優惠代碼VISTA888，皆可享受首月折扣150元的優惠唷！

Vista電子報