å ±å‘Šä¸‹è¼‰ - 資訊科

圖 目 錄圖 表 1 網 頁 使 用 技 術 ......................................................................................................... 4圖 表 2 預 期 成 果 樣 式 圖 ..................................................................................................... 7圖 表 3 MYSQL 用 戶 連 接 示 意 圖 ....................................................................................... 12圖 表 4 AJAX 連 線 循 環 圖 ................................................................................................. 13圖 表 5 JSON 編 碼 解 析 流 程 .............................................................................................. 13圖 表 6 遊 戲 官 網 ............................................................................................................. 15圖 表 7 查 看 公 告 ............................................................................................................. 15圖 表 8 成 功 加 入 會 員 ....................................................................................................... 15圖 表 9 加 入 會 員 ............................................................................................................. 15圖 表 10 回 應 討 論 ............................................................................................................ 16圖 表 11 發 布 討 論 ............................................................................................................ 16圖 表 12 創 立 遊 戲 室 ........................................................................................................ 16圖 表 13 遊 戲 等 候 室 ......................................................................................................... 16圖 表 14 房 間 密 碼 錯 誤 ..................................................................................................... 17圖 表 15 設 定 房 間 密 碼 ..................................................................................................... 17圖 表 16 遊 戲 室 2 ............................................................................................................. 17圖 表 17 遊 戲 室 ............................................................................................................... 17圖 表 18 遊 戲 畫 面 ............................................................................................................ 18圖 表 19 設 定 數 字 ............................................................................................................ 18圖 表 20 聊 天 室 ............................................................................................................... 18圖 表 21 遊 戲 積 分 統 計 ..................................................................................................... 18- 3 -

1-1 專 題 製 作 背 景 及 目 的第 1 章 前 言 ( 概 論 / 緒 論 )傳 統 的 單 機 遊 戲 , 只 能 一 個 人 默 默 地 玩 , 電 腦 的 互 動 也 難 以 人 性 化 , 遊 戲 的耐 玩 度 往 往 不 高 , 能 夠 和 彼 此 互 動 的 網 路 遊 戲 已 成 為 目 前 的 主 流 。 另 外 紙 本 的 賓果 遊 戲 無 法 符 合 現 代 人 隨 時 隨 地 的 想 與 人 互 動 的 需 求 。我 們 決 定 把 大 家 印 象 中 的 傳 統 賓 果 遊 戲 加 以 改 良 , 改 為 能 夠 在 網 路 上 即 時 互動 的 網 路 連 線 遊 戲 , 讓 身 處 異 地 的 親 朋 好 友 只 要 連 上 網 路 就 能 夠 互 動 , 遊 戲 過 程中 除 了 可 以 培 養 感 情 還 能 鬥 智 。1-2 專 題 製 作 方 法 、 步 驟 與 進 度1-2-1 專 題 製 作 方 法製 作 一 個 網 頁 遊 戲 所 涵 蓋 的 技 術 範 圍 非 常 廣 泛 , 光 是 程 式 語 言 橫 跨 HTML、PHP、SQL、JavaScript, 這 些 都 是 撰 寫 網 頁 遊 戲 時 會 用 到 的 基 本 語 言 , 如 圖 1-1所 示 , 而 遊 戲 PHP 程 式 判 斷 以 及 AJAX 之 應 用 皆 屬 於 需 花 長 時 間 思 考 及 研 究 才 能完 成 的 困 難 部 分 。為 了 達 到 預 定 的 專 題 目 的 , 本 次 專 題 我 們 使 用 非 常 有 效 率 的 分 工 模 式 , 讓 每個 組 員 可 以 專 心 研 究 自 己 所 分 配 到 的 部 分 , 整 合 時 再 互 相 作 討 論 , 交 流 自 己 研 究的 成 果 , 相 信 透 過 此 方 法 , 專 題 能 夠 完 美 完 成 。HTMLJavaScript網 頁遊 戲PHPSQL圖 表 1 網 頁 使 用 技 術- 4 -

1-2-2 專 題 製 作 步 驟資 料 蒐 集理 論 探 討工 作 分 配 、 準 備MySQL 資 料 表 規 劃網 頁 版 面 規 畫會 員 程 式 撰 寫遊 戲 房 間討 論 區 程 式 撰 寫遊 戲 介 面 呈 現遊 戲 賓 果 PHP 判 斷否功 能 正 確是否功 能 正 確是是功 能 正 確否遊 戲 AJAX 同 步功 能 正 確否遊 戲 整 合是版 面 CSS 美 化遊 戲 測 試撰 寫 報 告口 頭 報 告- 5 -

1-2-3 專 題 製 作 進 度工 作 項 目週 次1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 負 責 成 員資 料 蒐 集理 論 探 討工 作 分 配 、 準 備MySQL 資 料 表 規劃網 頁 版 面 規 劃會 員 程 式 撰 寫討 論 區 程 式 撰 寫CSS 網 頁 美 化遊 戲 房 間遊 戲 賓 果 PHP 判斷遊 戲 介 面 呈 現遊 戲 AJAX 同 步網 頁 整 合遊 戲 測 詴遊 戲 除 錯撰 寫 報 告口 頭 報 告林 、 胡 、 陳 、葉 、 蘇林 、 胡 、 陳 、葉 、 蘇林 、 胡 、 陳 、葉 、 蘇陳 、 葉 、 蘇林 、 陳葉葉林 、 陳蘇陳蘇蘇蘇林 、 胡 、 陳 、葉 、 蘇陳 、 蘇林 、 胡 、 葉 、 蘇陳 、 蘇預 定 進 度 2 2 5 10 15 20 28 45 50 55 60 70 75 80 85 90 100 累 積 百 分 比 %- 6 -

1-3 預 期 成 果本 專 題 預 計 完 成 一 個 多 功 能 遊 戲 帄 台 , 包 括 會 員 系 統 、 討 論 區 系 統 , 而 遊 戲當 中 將 會 有 使 遊 戲 方 便 進 行 的 房 間 系 統 , 遊 戲 主 體 部 分 希 望 能 夠 完 美 達 成 玩 家 間的 同 步 效 果 , 讓 每 位 玩 家 可 以 更 順 暢 地 進 行 遊 戲 互 動 。遊 戲 製 作 中 , 除 了 學 習 程 式 語 言 的 整 合 , 完 成 一 個 具 有 多 功 能 的 遊 戲 帄 台 外 ,還 包 括 了 同 學 們 間 的 分 工 與 合 作 、 研 究 與 切 磋 、 程 式 之 整 合 , 以 及 學 習 獨 立 思 考 、解 決 問 題 的 能 力 , 可 謂 一 舉 多 得 , 希 望 在 專 題 製 作 過 程 中 可 以 學 習 到 很 多 。圖 表 2 預 期 成 果 樣 式 圖- 7 -

第 2 章理 論 探 討2-1 HTML 語 言超 文 件 標 示 語 言 ( 英 文 :HyperText Markup Language,HTML) 是 為 「 網 頁建 立 和 其 它 可 在 網 頁 瀏 覽 器 中 看 到 的 資 訊 」 設 計 的 一 種 標 示 語 言 。HTML 被 用 來結 構 化 資 訊 —— 例 如 標 題 、 段 落 和 列 表 等 等 , 也 可 用 來 在 一 定 程 度 上 描 述 文 檔 的外 觀 和 語 意 。 由 蒂 姆 · 伯 納 斯 - 李 給 出 原 始 定 義 , 由 IETF 用 簡 化 的 SGML( 標 準 通用 標 示 語 言 ) 語 法 進 行 進 一 步 發 展 的 HTML, 後 來 成 為 國 際 標 準 , 由 全 球 資 訊 網協 會 (W3C) 維 護 。2-2 JavaScript 語 言JavaScript 是 一 種 廣 泛 用 於 用 戶 端 網 頁 開 發 的 腳 本 語 言 , 最 常 是 於 HTML 上使 用 , 用 來 給 HTML 網 頁 添 加 動 態 功 能 。 然 而 JavaScript 也 被 用 於 不 同 的 介 面 上 ,如 伺 服 器 。 它 最 初 由 網 景 公 司 的 Brendan Eich 設 計 , 是 一 種 動 態 、 弱 型 別 、 基於 原 型 的 語 言 , 內 建 支 援 型 別 。JavaScript 也 可 以 用 於 其 他 場 合 , 如 伺 服 器 端編 程 。2-3 PHP 語 言PHP(PHP:Hypertext Preprocessor) 是 一 種 在 電 腦 上 執 行 的 腳 本 語 言 , 主要 用 途 是 在 於 處 理 動 態 網 頁 , 也 包 含 了 命 令 列 執 行 介 面 (command lineinterface), 或 者 產 生 圖 形 使 用 者 介 面 (GUI) 程 式 。PHP 的 應 用 範 圍 相 當 廣 泛 , 尤 其 是 在 網 頁 程 式 的 開 發 上 。 一 般 來 說 PHP 大 多執 行 在 網 頁 伺 服 器 上 , 透 過 執 行 PHP 程 式 碼 來 產 生 使 用 者 瀏 覽 的 網 頁 。PHP 可 以在 多 數 的 伺 服 器 和 作 業 系 統 上 執 行 , 而 且 使 用 PHP 完 全 是 免 費 的 。 根 據 2007 年4 月 的 統 計 資 料 ,PHP 已 經 被 安 裝 在 超 過 2000 萬 個 網 站 和 100 萬 台 伺 服 器 上 。2-4 SQL 語 言SQL 全 名 是 結 構 化 查 詢 語 言 (Structured Query Language), 是 用 於 資 料 庫中 的 標 準 數 據 查 詢 語 言 ,IBM 公 司 最 早 使 用 在 其 開 發 的 資 料 庫 系 統 中 。1986 年10 月 , 美 國 國 家 標 準 學 會 (ANSI) 對 SQL 進 行 規 範 後 , 以 此 作 為 關 聯 式 資 料 庫管 理 系 統 的 標 準 語 言 (ANSI X3. 135-1986),1987 年 得 到 國 際 標 準 組 織 的 支 援下 成 為 國 際 標 準 。 不 過 各 種 通 行 的 資 料 庫 系 統 在 其 實 踐 過 程 中 都 對 SQL 規 範 作了 某 些 編 改 和 擴 充 。 所 以 , 實 際 上 不 同 資 料 庫 系 統 之 間 的 SQL 不 能 完 全 相 互 通用 。2-5 jQuery frameworkjQuery 是 一 套 跨 瀏 覽 器 的 JavaScript 函 式 庫 , 強 化 HTML 與 JavaScript 之- 8 -

間 的 操 作 。 目 前 全 球 有 28% 的 網 站 使 用 jQuery, 是 目 前 最 受 歡 迎 的 JavaScript函 式 庫 。jQuery 免 費 且 為 開 放 原 始 碼 , 使 用 GPL 和 MIT 許 可 證 雙 協 議 。jQuery 的 語法 設 計 使 得 許 多 操 作 變 容 易 , 如 操 作 文 件 (document)、 選 擇 DOM 元 素 、 動 畫 效果 、 事 件 處 理 、 發 展 Ajax 以 及 其 他 功 能 。 除 此 之 外 ,jQuery 提 供 API 讓 開 發 者將 自 己 所 寫 的 功 能 融 入 jQuery 內 。2-6 AJAX 技 術AJAX 為 「Asynchronous JavaScript XML」( 非 同 步 的 JavaScript 與 XML 技術 ), 是 一 種 廣 泛 應 用 在 瀏 覽 器 的 網 頁 開 發 技 術 。AJAX 概 念• 運 用 XHTML+CSS 來 表 達 資 訊• 運 用 JavaScript 操 作 DOM 執 行 動 態 效 果• 運 用 XML 和 XSLT 進 行 資 料 交 換 及 操 作• 運 用 XMLHttpRequest 為 Agent 與 網 頁 伺 服 器 進 行 非 同 步資 料 交 換• 運 用 JavaScript 技 術 實 現- 9 -

第 3 章專 題 設 計3-1 網 頁 架 構最 新 公 告( 管 理 員 )遊 戲 討 論 區會 員 管 理 介 面遊 戲 官 網會 員 資 料 修 改加 入 會 員發 佈 討 論遊 戲 主 程 式會 員 登 入個 人 戰 績創 建 房 間進 入 房 間進 入 遊 戲遊 戲 大 廳3-2 網 頁 語 言 及 函 式 庫 應 用HTML & CSSHTML 為 編 寫 網 頁 的 基 本 語 言 , 並 進 階 利 用 CSS 語 言 為 網 頁 進 行 美 化 。PHP & MySQLPHP 語 言 用 來 編 寫 遊 戲 的 核 心 運 算 功 能 , 玩 家 連 線 功 能 , 儲 存 會 員 資 料 以 及房 間 之 紀 錄 。jQuery frameworkJavaScript 編 程 的 最 大 問 題 , 就 是 來 自 不 同 的 瀏 覽 器 對 各 種 技 術 和 標 準 的支 援 , 而 AJAX 技 術 會 使 用 到 的 XmlHttpRequest 物 件 在 不 同 瀏 覽 器 中 也 有 不 同 的建 立 方 法 , 為 了 使 開 發 更 為 方 便 , 我 們 使 用 JavaScript 的 函 式 庫 ─ jQueryframework , 強 化 HTML 與 JavaScript 之 間 的 操 作 , 以 及 更 方 便 做 JavaScript的 開 發 設 計 。- 10 -

3-3 官 方 網 站 設 計3-3-1 會 員 系 統 設 計首 先 要 建 立 一 個 資 料 表 用 來 存 取 會 員 的 帳 號 及 密 碼 等 資 料 , 借 用 php 的 表 單傳 遞 , 將 資 料 存 入 資 料 庫 裡 , 再 利 用 欄 位 對 應 的 方 法 , 將 此 帳 號 及 密 碼 的 資 料 一併 取 出 來 , 而 session 變 數 功 能 是 用 來 維 持 登 入 狀 態 , 使 會 員 不 會 在 跳 下 一 頁 或重 新 整 理 時 , 無 緣 無 故 登 出 。3-3-2 討 論 區 及 發 佈 系 統 設 計與 會 員 系 統 設 計 大 略 相 同 , 但 討 論 區 資 料 表 以 必 須 與 會 員 的 資 料 來 做 連 結 再利 用 php 與 MySOL 做 資 料 的 傳 遞 。3-4 遊 戲 設 計遊 戲 設 計 主 要 分 為 遊 戲 房 間 、 遊 戲 賓 果 主 程 式 以 及 AJAX 同 步 三 大 部 分 。3-4-1 遊 戲 房 間 設 計玩 家 創 建 房 間 時 , 建 立 資 訊 將 會 被 寫 入 房 間 資 料 表 中 , 而 玩 家 進 入 房 間 時 會在 另 一 張 資 料 表 中 紀 錄 玩 家 目 前 所 處 的 房 間 位 置 , 利 用 此 兩 張 資 料 表 便 能 完 成 房間 的 主 體 架 構 , 而 房 間 內 部 會 利 用 AJAX 技 術 向 伺 服 器 同 步 目 前 房 間 資 訊 , 創 立房 間 的 室 長 可 以 踢 除 玩 家 也 是 利 用 AJAX 技 術 向 伺 服 器 傳 遞 被 踢 出 者 之 UID 以 利伺 服 器 將 該 玩 家 從 房 間 資 料 表 中 刪 除 , 被 踢 出 者 將 會 因 和 伺 服 器 同 步 時 找 不 到 自己 存 在 的 房 間 而 自 動 跳 出 房 間 , 當 室 長 按 下 開 始 遊 戲 時 , 無 論 房 間 人 數 有 幾 人 都會 開 始 進 行 遊 戲 , 此 時 會 依 據 房 間 id 建 立 對 應 此 房 間 之 專 屬 遊 戲 資 料 表 , 以 利遊 戲 進 行 時 使 用 。3-4-2 遊 戲 賓 果 主 程 式 設 計遊 戲 開 始 時 所 有 玩 家 填 好 上 傳 的 數 字 資 料 將 會 在 伺 服 器 遊 戲 資 料 表 中 儲 存一 份 , 以 利 連 線 的 判 斷 及 玩 家 作 弊 的 防 止 , 而 所 有 賓 果 連 線 的 判 斷 皆 在 伺 服 器 端利 用 PHP 進 行 ,PHP 判 斷 方 式 則 是 使 用 二 維 陣 列 進 行 橫 、 直 排 的 比 對 , 並 將 此 判斷 寫 為 獨 立 function, 玩 家 每 選 擇 一 個 數 字 , 就 會 將 數 字 送 進 此 function 進 行- 11 -

判 斷 , 若 賓 果 成 立 則 會 傳 出 該 玩 家 賓 果 的 數 字 以 及 目 前 分 數 , 而 這 些 訊 息 將 會 寫入 資 料 庫 , 用 戶 同 步 時 便 會 接 收 此 訊 息 在 遊 戲 畫 面 同 步 目 前 賓 果 及 選 取 狀 態 。由 於 賓 果 遊 戲 有 先 後 順 序 , 也 就 是 目 前 輪 到 誰 選 數 字 的 問 題 , 於 是 我 們 推 出了 一 條 判 斷 公 式 :「 目 前 已 喊 過 的 數 字 數 % 玩 家 人 數 +1」, 此 一 公 式 可 以 計 算 出 目前 輪 到 第 幾 位 玩 家 可 以 選 擇 數 字 , 順 利 轉 交 數 字 選 擇 權 。遊 戲 結 束 分 數 判 斷 是 在 最 後 一 個 數 字 被 玩 家 選 取 的 剎 那 , 伺 服 器 會 將 此 房 間玩 家 資 料 一 分 數 高 低 順 序 取 出 , 再 利 用 迴 圈 及 陣 列 判 斷 相 同 分 數 的 情 況 , 最 後 將結 果 寫 入 戰 績 資 料 表 中 , 此 時 玩 家 在 和 伺 服 器 同 步 時 會 一 併 取 得 排 名 資 訊 , 並 顯示 在 遊 戲 畫 面 中 。playerMySQLServer圖 表 3 MYSQL 用 戶 連 接 示 意 圖playerplayer3-4-3 AJAX 同 步 設 計雖 然 在 HTML5 中 已 定 義 了 WebSocket 協 議 , 但 由 於 此 協 議 並 不 是 所 有 瀏 覽 器都 支 援 , 而 目 前 最 多 人 使 用 的 IE 瀏 覽 器 所 有 版 本 皆 尚 未 支 援 此 協 議 , 所 以 考 慮到 讓 所 有 使 用 者 皆 可 正 常 進 行 遊 戲 , 所 以 我 們 不 使 用 此 方 法 , 而 是 使 用 傳 統 的AJAX 技 術 來 達 到 遊 戲 同 步 的 效 果 。遊 戲 同 步 是 透 過 讓 每 個 玩 家 固 定 幾 秒 就 利 用 AJAX 技 術 和 伺 服 器 同 步 目 前 最新 資 料 , 同 步 時 伺 服 器 的 PHP 會 判 對 目 前 是 否 為 最 新 資 料 , 如 果 不 是 , 將 會 對 從- 12 -

第 4 章專 題 成 果遊 戲 官 網加 入 會 員 之 後 , 即 可 在 討 論 區 任 意 的 發 布 文 章 。圖 表 6 遊 戲 官 網圖 表 7 查 看 公 告加 入 會 員輸 入 個 人 資 料 以 及 設 定 帳 號 密 碼 恭 喜 你 ! 已 經 加 入 會 員 囉 !圖 表 9 加 入 會 員圖 表 8 成 功 加 入 會 員- 15 -

會 員 功 能加 入 會 員 之 後 , 即 可 在 討 論 區 任 意的 發 布 文 章 。亦 可 回 覆 其 他 人 所 發 布 的 文 章 。圖 表 11 發 布 討 論圖 表 10 回 應 討 論遊 戲 主 程 式點 選 進 入 遊 戲 之 後 , 就 會 來 到 遊 戲 等 後 室 , 在 這 裡 可 以 選 擇 自 己 創 立 房 間 或 加 入別 人 所 創 的 房 間 , 而 創 立 房 間 時 , 還 可 依 自 己 需 求 設 定 房 間 密 碼 。圖 表 13 遊 戲 等 候 室圖 表 12 創 立 遊 戲 室- 16 -

Economic Effect of Eliminating Texas’ Business Margin Tax March 2015Appendix BTable A2: Johansen Test Provides No Indications of CointegrationSample: 2008Q1-2013Q4Included observations: 24Trend assumption: Linear deterministic trendSeries in Percent Changes: Real personal income, Private employment, Real margin tax revenueLags interval (in first differences): 1 to 2HypothesizedNo. Of CE(s)Unrestricted Cointegration Rank Test (Trace)EigenvalueTraceStatistic0.05Critical ValueProb.**None 0.498222 28.24955 29.79707 0.0746At most 1 0.364261 11.69920 15.49471 0.1719At most 2 0.033911 0.827989 3.841466 0.3629Trace test indicates no cointegration at the 0.05 level* denotes rejection of the hypothesis at the 0.05 level**MacKinnon-Haug-Michelis (1999) p-valuesHypothesizedNo. Of CE(s)Unrestricted Cointegration Rank Test(Maximum Eigenvalue)EigenvalueMax-EigenStatistic0.05Critical ValueProb.**None 0.498222 16.55036 21.13162 0.1943At most 1 0.364261 10.87121 14.26460 0.1608At most 2 0.033911 0.827989 3.841466 0.3629Max-eigenvalue test indicates no cointegration at the 0.05 level* denotes rejection of the hypothesis at the 0.05 level**MacKinnon-Haug-Michelis (1999) p-valueNOTES1Scott Drenkard and Joseph Henchman, 2015 State Business Tax Climate Index, Tax Foundation (Oct. 2014), p. 2.2March 2014 Primary Election Results Propositions Republican, KCENTV.com (accessed Jan. 2015).3James Quintero, Robert McDowall and Talmadge Heflin, The Texas Margin Tax and Its Impact on the State’s Economic Competitiveness,Texas Public Policy Foundation (Sept. 2012), pp. 1-7.4Texas Statewide Survey, Texas Public Policy Foundation (Oct. 2014).5Texas Franchise Tax Revisions—What Changed?, Texas Comptroller (accessed Jan. 2015).6Neeley v. West Orange-Cove I.S.D. (Nov. 2005).18 Texas Public Policy Foundation

放 置 1~36 的 位 置 , 若 不 想 一 個 一個 慢 慢 輸 入 , 亦 可 點 Randon 讓 電腦 隨 機 幫 你 放 置 數 字 。每 3 個 圈 , 即 可 完 成 連 線 , 盡 量 不要 讓 叉 叉 檔 到 你 圈 圈 連 線 的 機 會 ,這 樣 才 能 獲 得 高 分圖 表 19 設 定 數 字圖 表 18 遊 戲 畫 面遊 戲 當 中 附 有 聊 天 功 能遊 戲 結 束 時 統 計 積 分圖 表 20 聊 天 室圖 表 21 遊 戲 積 分 統 計- 18 -

第 5 章結 論 與 建 議5-1 結 論隨 著 網 頁 技 術 的 成 熟 , 遊 戲 在 網 頁 上 運 行 已 是 目 前 的 趨 勢 , 網 頁 遊 戲 將 會 使遊 戲 更 容 易 進 行 , 未 來 網 頁 遊 戲 將 會 漸 漸 取 代 在 本 地 端 執 行 的 下 載 遊 戲 , 於 是 如何 使 網 頁 介 面 更 加 人 性 化 、 使 網 頁 畫 面 更 加 流 暢 將 成 為 未 來 網 頁 編 輯 的 主 流 。 這次 專 題 使 用 了 AJAX 技 術 , 目 的 便 在 於 使 遊 戲 能 夠 更 加 流 暢 , 也 突 破 一 般 網 頁 的限 制 讓 整 個 網 頁 畫 面 看 起 來 更 為 乾 淨 、 美 觀 。本 次 專 題 除 了 著 重 在 遊 戲 主 程 式 , 另 一 方 面 則 是 會 員 官 網 的 部 分 , 因 為 科 技的 日 新 月 異 , 使 人 們 在 家 裡 便 可 以 透 過 網 路 與 親 朋 好 友 互 動 , 於 是 網 頁 中 人 與 人互 動 的 功 能 之 重 要 性 也 與 日 俱 增 , 從 近 日 火 紅 的 社 群 網 站 及 部 落 格 便 可 窺 知 一 二 ,由 此 可 知 結 合 了 互 動 功 能 的 網 頁 將 在 未 來 的 網 頁 編 輯 中 佔 有 一 席 之 地 。5-2 建 議Browser 與 Server 持 續 同 步 的 作 法 有 很 多 種 , 本 次 專 題 我 們 使 用 的 是 最 原始 的 輪 詢 (Polling), 也 就 是 每 隔 幾 秒 就 和 伺 服 器 做 查 詢 , 其 優 點 為 非 常 容 易 實作 、 沒 有 跨 瀏 覽 器 的 問 題 、 也 不 需 要 特 殊 伺 服 器 做 配 合 , 而 此 方 法 缺 點 是 沒 效 率 ,因 為 多 數 時 間 並 無 資 料 更 新 , 取 得 的 資 料 一 致 , 會 因 此 會 浪 費 許 多 不 必 要 的 頻 寬 ,造 成 伺 服 器 效 能 大 減 。 然 而 同 步 方 法 若 是 使 用 長 輪 詢 (Long Polling), 此 方 法 不會 不 停 地 向 伺 服 器 查 詢 資 料 , 相 較 之 下 比 較 有 效 率 , 也 能 夠 大 大 節 省 伺 服 器 的 負擔 , 因 此 往 後 在 使 用 AJAX 和 伺 服 器 持 續 同 步 資 料 時 , 應 使 用 長 輪 詢 (Long Polling)的 方 式 進 行 連 線 較 為 適 當 。編 輯 網 頁 時 光 運 用 HTML 不 能 滿 足 我 們 視 覺 上 的 需 求 , 於 是 我 們 搭 配 了 CSS語 言 來 美 化 版 面 , 由 於 市 面 上 有 各 式 各 樣 的 瀏 覽 器 而 且 各 版 本 所 支 援 的 功 能 也 不盡 相 同 , 所 以 我 們 在 編 寫 CSS 語 法 的 時 候 要 在 各 種 可 能 會 有 不 相 容 的 語 法 前 加 上該 瀏 覽 器 的 專 用 識 別 碼 (ex:-moz-), 如 此 一 來 便 可 解 決 在 不 同 瀏 覽 器 下 所 造 成的 板 面 不 一 的 情 況 。- 19 -

第 6 章心 得林 知 衡 :當 初 要 開 始 做 專 題 的 時 候 我 想 著 要 做 網 頁 類 的 , 於 是 找 了 現 在 的 夥 伴 , 任 何遊 戲 的 構 想 都 不 是 由 我 發 想 , 製 作 專 題 的 整 個 過 程 中 雖 然 是 我 召 集 了 大 家 一 起 ,卻 感 覺 不 太 能 夠 幫 到 什 麼 忙 , 對 於 網 頁 的 CSS 撰 寫 我 並 不 是 很 熟 悉 ( 跟 伯 麒 比 較起 來 又 是 差 一 大 截 ), 但 是 組 員 之 間 都 有 互 相 幫 忙 , 令 我 十 分 欣 慰 。製 作 專 題 的 過 程 中 也 明 確 地 感 覺 到 自 己 的 不 足 , 跟 修 宏 一 起 製 作 遊 戲 官 網 的 時 候他 負 責 php 的 部 分 , 雖 然 我 可 以 理 解 但 是 對 於 php 的 程 式 碼 實 在 有 種 無 力 感 , 看著 CSS 語 法 反 而 比 較 有 感 覺 。 但 是 運 用 CSS 語 法 需 要 靈 活 的 運 用 才 能 將 版 面 弄 得簡 潔 美 觀 , 對 於 一 個 初 學 者 來 說 實 在 是 很 辛 苦 的 一 件 事 , 感 覺 我 寫 出 來 的 CSS 語法 都 很 基 本 , 還 好 最 後 在 我 努 力 地 摸 索 之 下 真 的 有 進 展 不 然 在 整 個 專 題 製 作 之 中真 的 覺 得 很 無 力 ……感 謝 跟 我 一 組 的 夥 伴 , 遊 戲 主 程 式 都 是 伯 麒 跟 劭 軒 在 負 責 , 幾 個 禮 拜 下 來 我覺 得 伯 麒 的 白 髮 又 變 多 了 , 絞 盡 腦 汁 之 後 出 來 的 成 品 雖 然 還 有 很 多 不 足 的 地 方 ,但 是 除 了 CSS 之 外 我 也 有 機 會 去 探 索 photoshop 的 世 界 , 讓 我 覺 得 我 從 這 次 專 題之 中 獲 益 良 多 , 但 是 也 發 現 我 還 要 學 的 也 很 多 , 真 是 一 山 還 有 一 山 高 , 當 我 們 覺得 自 己 已 經 完 備 的 時 候 卻 發 現 眼 前 出 現 了 更 加 險 峻 的 高 山 , 繼 續 加 油 , 利 用 課 餘的 時 間 真 正 找 到 興 趣 往 理 想 的 自 己 邁 進 。真 的 很 感 謝 這 次 能 夠 跟 大 家 一 起 製 作 專 題 , 謝 謝 。葉 修 宏 :這 次 專 題 製 作 一 開 始 , 以 為 時 間 很 長 , 所 以 都 沒 有 很 積 極 得 去 準 備 , 而 且 以為 自 己 做 不 出 這 些 東 西 , 看 輕 了 自 己 , 但 老 師 給 了 我 一 本 有 關 MYSQL 資 料 庫 的 書 ,而 我 照 著 上 面 的 步 驟 , 慢 慢 的 打 上 程 式 碼 , 雖 然 感 覺 很 快 就 弄 完 了 , 但 程 式 都 會有 BUG 等 著 我 去 修 , 而 這 時 才 發 現 時 光 飛 逝 , 只 剩 一 個 月 就 要 成 果 發 表 了 , 導 致每 次 專 題 課 都 要 拼 命 狂 做 。 我 們 這 組 工 作 分 配 都 很 帄 均 , 每 個 人 都 要 完 成 自 己 的- 20 -

部 分 , 若 是 沒 完 成 , 就 會 讓 整 個 成 品 毀 掉 , 就 像 是 拼 圖 一 樣 , 缺 了 一 塊 就 不 完 整了 。我 所 做 的 部 分 是 會 員 系 統 , 我 做 的 時 間 需 要 非 常 早 , 因 為 如 果 沒 弄 完 , 我 的組 員 負 責 CSS 美 化 的 , 就 沒 辦 法 著 手 開 始 做 , 所 以 我 照 著 書 的 步 驟 慢 慢 地 做 , 利用 DW 的 套 軟 體 的 功 能 , 將 會 員 系 統 弄 完 , 雖 然 會 遇 到 很 多 問 題 , 但 我 們 這 組 的兩 個 主 力 都 會 來 指 導 我 , 幫 我 解 決 問 題 , 若 是 無 法 解 決 , 就 只 能 GOOGLE 找 資 料 ,而 這 次 的 成 果 讓 我 學 到 了 很 多 東 西 , 不 僅 是 程 式 , 還 包 括 團 隊 合 作 的 精 神 以 及 熬夜 的 重 要 性 。蘇 劭 軒 :在 做 此 專 題 前 , 對 於 網 頁 JavaScript 語 言 其 實 只 有 些 基 本 的 認 識 , 要 利 用JavaScript 開 發 出 動 態 網 頁 遊 戲 事 實 上 是 件 困 難 的 事 情 , 好 在 jQuery framework的 使 用 , 讓 JavaScript 的 開 發 變 得 簡 單 許 多 , 他 能 以 更 簡 單 更 直 接 的 方 式 來 撰寫 JavaScript, 不 過 jQuery framework 我 也 是 第 一 次 接 觸 , 為 了 熟 悉 他 的 基 本用 法 , 在 專 題 製 作 前 就 已 事 先 針 對 jQuery 進 行 研 究 , 但 實 際 撰 寫 遊 戲 時 , 要 靈活 運 用 jQuery 開 發 遊 戲 還 真 是 一 大 難 題 , 開 發 過 程 中 常 常 因 為 jQuery 的 不 熟 悉而 必 須 不 停 上 網 尋 找 方 法 的 應 用 , 當 然 JavaScript 在 偵 錯 時 也 非 常 不 容 易 , 往往 必 須 將 一 行 一 行 程 式 透 過 「alert」 把 訊 息 輸 出 , 才 可 以 從 密 密 麻 麻 的 程 式 碼中 找 到 錯 誤 。 遊 戲 開 發 過 程 中 , 雖 然 花 許 多 時 間 在 一 些 不 是 很 重 要 的 小 功 能 上 ,但 就 是 因 為 撰 寫 這 些 功 能 時 所 學 到 的 jQuery 應 用 技 巧 , 使 我 在 撰 寫 更 重 要 的 功能 可 以 有 更 靈 活 的 應 用 、 更 靈 活 的 想 法 , 雖 然 專 題 製 作 中 非 常 不 順 利 , 一 路 跌 跌撞 撞 , 最 終 還 是 不 可 思 議 的 把 遊 戲 撰 寫 出 來 了 !由 於 AJAX 和 伺 服 器 連 線 時 , 皆 需 要 有 PHP 在 伺 服 器 扮 演 接 收 訊 息 以 及 後 端與 資 料 庫 互 動 的 腳 色 , 所 以 每 撰 寫 到 一 個 AJAX 連 接 , 就 必 須 額 外 多 寫 一 份 與 其做 對 應 的 PHP 程 式 , 在 兩 種 語 言 間 交 互 撰 寫 必 須 要 保 持 頭 腦 百 分 之 百 的 清 醒 才 能夠 一 次 完 全 不 出 錯 的 完 成 兩 邊 的 呼 應 , 不 過 在 專 題 製 作 中 , 這 種 事 情 完 全 沒 有 發生 過 , 這 也 是 為 什 麼 到 專 題 製 作 後 期 每 寫 幾 行 程 式 碼 就 急 著 先 上 傳 進 行 功 能 測 詴- 21 -

參 考 文 獻類 型名 稱位 元 文 化 (2009)PHP 6 動 態 網 頁 入 門 實 務書 籍朱 印 宏 (2010) 網 站 開 發 新 路 線 : jQuery 核 心 詳 解 與 實 踐 應 用張 亞 飛 (2010)HTML5&CSS3jQuery JavaScript Library ─ Documentation網 站Wikipedia 維 基 百 科- 23 -

附 錄附 錄 一 設 備 清 單類 別 設 備 、 軟 體 名 稱 應 用 說 明程 式 設 計 Adobe dreamweaver CS5.5 程 式 設 計程 式 設 計 Notepad ++ v5.9.6.2 程 式 設 計美 工 設 計 Adobe photoshop CS5.5 網 頁 版 面 美 化文 書 處 理 Microsoft Word 2010 書 面 報 告伺 服 器 個 人 電 腦 提 供 網 頁 服 務- 24 -

附 錄 二 研 究 成 員 簡 歷姓 名 林 知 衡 班 級 資 訊 三 乙曾 修 習專 業 科 目基 本 電 學 、 數 位 邏 輯 、 電 子 學電 腦 軟 體 應 用 、 網 頁 程 式 設 計 、C# 程 式 設 計VB 程 式 設 計 、JAVA 程 式 設 計參 與 專 題工 作 項 目• 遊 戲 大 廳 CSS 美 化• 遊 戲 大 廳 排 版 與 佈 景姓 名 胡 欣 怡 班 級 資 訊 三 乙曾 修 習專 業 科 目基 本 電 學 、 數 位 邏 輯 、 電 子 學電 腦 軟 體 應 用 、 網 頁 程 式 設 計 、C# 程 式 設 計VB 程 式 設 計 、JAVA 程 式 設 計參 與 專 題工 作 項 目• 專 題 報 告 撰 寫- 25 -

姓 名 陳 伯 麒 班 級 資 訊 三 乙曾 修 習專 業 科 目基 本 電 學 、 數 位 邏 輯 、 電 子 學電 腦 軟 體 應 用 、 網 頁 程 式 設 計 、C# 程 式 設 計VB 程 式 設 計 、JAVA 程 式 設 計參 與 專 題工 作 項 目• 遊 戲 主 程 式 賓 果 之 判 斷• 遊 戲 大 廳 及 房 間 之 CSS 美 化• 程 式 概 念 提 供姓 名 葉 修 宏 班 級 資 訊 三 乙曾 修 習專 業 科 目基 本 電 學 、 數 位 邏 輯 、 電 子 學電 腦 軟 體 應 用 、 網 頁 程 式 設 計 、C# 程 式 設 計VB 程 式 設 計 、JAVA 程 式 設 計參 與 專 題工 作 項 目• 官 方 網 站 架 構• 會 員 管 理 系 統• 討 論 發 佈 系 統- 26 -

姓 名 蘇 劭 軒 班 級 資 訊 三 乙曾 修 習專 業 科 目基 本 電 學 、 數 位 邏 輯 、 電 子 學電 腦 軟 體 應 用 、 網 頁 程 式 設 計 、C# 程 式 設 計VB 程 式 設 計 、JAVA 程 式 設 計• 遊 戲 房 間 架 構• 遊 戲 主 程 式 架 構參 與 專 題工 作 項 目• 遊 戲 網 頁 呈 現• jQuery 之 應 用• 遊 戲 AJAX 之 連 接• 伺 服 器 環 境 架 設- 27 -