initial commit

8 files changed, 673 insertions, 0 deletions

diff --git a/files/zh-tw/games/index.html b/files/zh-tw/games/index.html
new file mode 100644
index 0000000000..aa2ab96a05
--- /dev/null
+++ b/files/zh-tw/games/index.html
@@ -0,0 +1,85 @@
+---
+title: 遊戲開發
+slug: Games
+translation_of: Games
+---
+<div>{{GamesSidebar}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">遊戲絕對是最受歡迎的電腦功能之一。而相關技術不斷推陳出新，讓玩家在任何相容標準的網路瀏覽器上，也能盡情享受畫質更優、效能更好的遊戲。</span></p>
+</div>
+
+<div>{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="web_遊戲開發">web 遊戲開發</h2>
+
+<p>歡迎來到 MDN 遊戲開發中心！我們將給想要開發遊戲的 web 開發者，提供 web 遊戲開發相關的資源。你會找到很多有用的教學與技術文章，所以請盡情瀏覽。</p>
+
+<p>我們也涵蓋了參考的章節，你可以從那裡找到遊戲開發最需要用到的一些 API。</p>
+
+<div class="note"><strong>注：</strong>建立遊戲會需要用上一些 web 的核心技術，如 HTML、CSS、JavaScript。<a href="/zh-TW/docs/Learn">學習專區</a>會是個很好的學習區域。</div>
+</div>
+
+<div class="column-half">
+<h2 id="從原生到_Web">從原生到 Web</h2>
+
+<p>如果你是原生介面開發者（例如，你寫 C++ 的遊戲）、對於怎麼把遊戲移植到 Web 有興趣的話，請看看我們的工具 <a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a>：這是個 LLVM 轉到 JavaScript 的編譯器，它使用了 LLVM 位元碼（例如，使用 Clang 從 C/C++ 產生。其他語言亦可）並編譯到能在 Web 運行的 <a href="/zh-TW/docs/Games/Tools/asm.js">asm.js</a>。</p>
+
+<p>要入門請參見：</p>
+
+<ul>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html">About Emscripten</a> for an introduction including high-level details.</li>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">Download and Install</a> for installing the toolchain.</li>
+ <li>有關如何開始的教學：<a href="http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html">Emscripten Tutorial</a></li>
+</ul>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="示例">示例</h2>
+
+<p>需要 web 遊戲的示例，請參考我們的 <a href="/zh-TW/docs/Games/Examples">示例頁</a>。也請參考下 <a href="http://www.openwebgames.com/">openwebgames.com</a> 以獲取更多資源與示範！</p>
+</div>
+</div>
+
+<p><a href="http://www.openwebgames.com"><img alt="" src="https://mdn.mozillademos.org/files/12790/owg-logo-dark.svg" style="display: block; margin: 0px auto; width: 400px;"></a></p>
+
+<h2 id="參見">參見</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="http://buildnewgames.com/">Build New Games</a></dt>
+ <dd>A collaborative site featuring a large number of open web game development tutorials. Has not been very active recently, but still holds some nice resources.</dd>
+ <dt><a href="http://creativejs.com/">Creative JS</a></dt>
+ <dd>A collection of impressive JavaScript techniques and experiments, not specific to games, but helpful nonetheless. Has not been very active recently, but still holds some nice resources.</dd>
+ <dt><a href="http://gameprogrammingpatterns.com/">Game programming patterns</a></dt>
+ <dd>An online book, written by Bob Nystrom, which discusses programming patterns in the context of game development with the aim of helping game developers produce more effective and efficient code.</dd>
+ <dt><a href="http://gamedevjsweekly.com/">Gamedev.js Weekly</a></dt>
+ <dd>Weekly newsletter about HTML5 game development, sent every Friday. Contains the latest articles, tutorials, tools and resources.</dd>
+ <dt><a href="http://www.html5gamedevs.com/">HTML5 Game Devs Forum</a></dt>
+ <dd>Forums for developers, framework creators and publishers. Ask questions, get feedback and help others.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="http://html5gameengine.com/">HTML5 Game Engine</a></dt>
+ <dd>List of the most popular HTML5 game frameworks along with their rating, features and samples.</dd>
+ <dt><a href="http://www.jsbreakouts.org/">JSBreakouts</a></dt>
+ <dd>Compare JavaScript Breakout clones in different frameworks to help you choose the right one for you.</dd>
+ <dt><a href="http://gamedevelopment.tutsplus.com/">Tuts+ Game Development</a></dt>
+ <dd>Tutorials and articles about game development in general.</dd>
+ <dt><a href="http://html5devstarter.enclavegames.com/">HTML5 Gamedev Starter</a></dt>
+ <dd>Starter for the new game developers, a curated list of links to various, useful resources around the web.</dd>
+ <dt><a href="http://js13kgames.com/">js13kGames</a></dt>
+ <dd>JavaScript coding competition for HTML5 game developers with the file size limit set to 13 kilobytes. All the submitted games are available in a readable form on GitHub.</dd>
+ <dt><a href="https://hacks.mozilla.org/category/games/">Mozilla Hacks blog</a></dt>
+ <dd>Games category on the Mozilla Hacks blog containing interesting gamedev related articles.</dd>
+ <dd></dd>
+</dl>
+</div>
+</div>
diff --git a/files/zh-tw/games/introduction/index.html b/files/zh-tw/games/introduction/index.html
new file mode 100644
index 0000000000..c140521931
--- /dev/null
+++ b/files/zh-tw/games/introduction/index.html
@@ -0,0 +1,122 @@
+---
+title: Web 遊戲開發介紹
+slug: Games/Introduction
+tags:
+  - Firefox OS
+  - Games
+  - Guide
+  - Mobile
+translation_of: Games/Introduction
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/zh-TW/docs/Games")}}</div>
+
+<div>現有 Web 環境已成為多元的平台，不只可建構令人驚艷的高品質遊戲，也是發佈這些遊戲的重要媒介。</div>
+
+<div> </div>
+
+<div>可供撰寫的遊種類......</div>
+
+<p>現有的 Web 技術再搭配最新版瀏覽器，就能打造出絕佳的 Web 遊戲，而且我們講的可不是用 Flash® 寫的簡單卡牌遊戲，或是多人的社交遊戲而已。卻是可打趴一堆平面遊戲的 3D 動作射擊或角色扮演遊戲。多虧 <a href="/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a> 的即時 (Just-in-time，JIT) 技術與新 API 雙雙大幅提升其效能，你所撰寫的遊戲已可於瀏覽器 (或支援 <a href="/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a> 的裝置，即如 <a href="/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>) 中執行，卻又不致犧牲任何效能。</p>
+
+<h2 id="HTML5_遊戲平台">HTML5 遊戲平台</h2>
+
+<p>如同 Mozilla 常說的「Web 即是平台」，你可將 Web 想像為較佳的遊戲平台。接著就來看看 Web 平台的核心：</p>
+
+<table style="height: 351px; width: 608px;" class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">功能</th>
+   <th scope="col">技術</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>音效</strong></td>
+   <td><a href="/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></td>
+  </tr>
+  <tr>
+   <td><strong>圖形</strong></td>
+   <td><a href="/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a> (<a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0)</td>
+  </tr>
+  <tr>
+   <td><strong>輸入</strong></td>
+   <td><a href="/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">觸控事件</a>、<a href="/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>、裝置感測器、<a href="/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a>、<a href="/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a>、<a href="/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td>
+  </tr>
+  <tr>
+   <td><strong>程式語言</strong></td>
+   <td><a href="/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a>（或 C/C++ 可透過<a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> 編譯為 JavaScript）</td>
+  </tr>
+  <tr>
+   <td><strong>網路連線</strong></td>
+   <td><a href="/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> 及/或 <a href="/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></td>
+  </tr>
+  <tr>
+   <td><strong>儲存功能</strong></td>
+   <td><a href="/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> 或雲端</td>
+  </tr>
+  <tr>
+   <td><strong>Web</strong></td>
+   <td><a href="/docs/HTML" title="/en-US/docs/HTML">HTML</a>、<a href="/docs/CSS" title="/en-US/docs/CSS">CSS</a>、<a href="/docs/SVG" title="/en-US/docs/SVG">SVG</a>、<a href="/docs/Social_API" title="/en-US/docs/Social_API">Social API</a>（還有更多！）</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="商業案例">商業案例</h2>
+
+<p>不論你是獨立或大型遊戲工作室的開發者，你都應該將 Web 作為自己下一個遊戲專案的系統。先來看看 Web 能對你提供多少優勢：</p>
+
+<ol>
+ <li>
+  <div>Web 無遠弗屆，而用 HTML5 撰寫的遊戲可自由在桌機、平板電腦、智慧電視、智慧型手機上執行。</div>
+ </li>
+ <li>可獲得更好的行銷與露出機會。你不再限制於某個 App 商店才能推廣自己的 App；反而能透過 Web 上的所有媒體推銷遊戲，並利用 Web 的串連與分享效率接觸到新客戶。</li>
+ <li>你能控制「付款」這個重要的作業。之前只要你的遊戲放在某個生態系統中，就必須支付超過 30% 的收益給該系統。但現在你可選擇自己喜歡的 App 訂價與付款服務。</li>
+ <li>同樣的，你也能自行控制 App 的更新頻率，而不再需要枯等別人審核你的重要修正檔，還不知道今天還明天才能上架。</li>
+ <li>控制你的分析方式！你能蒐集自己所需的資料，或可選擇你所愛用的第三方，進而獲得你的銷售資訊以及所觸及的消費族群；不需再讓別人幫你決定分析方法。</li>
+ <li>你能進一步管理自己與消費者之間的關係，不再受限於 App 商城的機制而取得篩選過的反饋意見。也不需再經過中間人，就能以自己的方式和消費者直接交流。</li>
+ <li>玩家隨時隨地都能暢玩你的遊戲。因為 Web 無所不在，消費者能在自己的手機、平板電腦、家裡桌機、辦公室電腦，或任何地方觀看遊戲進度。</li>
+</ol>
+
+<h2 id="遊戲開發者所應知道的_Web_技術">遊戲開發者所應知道的 Web 技術</h2>
+
+<p>我們要為開發者提供 API 的相關資訊，了解 Web 帶來的絕妙開發功能。<br>
+ 以下只列舉出其中數項：</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a></dt>
+ <dd>此簡易 API 可讓遊戲全螢幕運作，提供玩家絕佳的動作體驗。</dd>
+ <dt><a href="/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a></dt>
+ <dd>如果要讓遊戲搭配搖桿或其他類型的控制器，就用這個 API。</dd>
+ <dt><a href="/docs/HTML" title="/en-US/docs/HTML">HTML</a> 與 <a href="/docs/CSS" title="/en-US/docs/CSS">CSS</a></dt>
+ <dd>這兩種技術可用以建立遊戲的使用者介面，並設定其風格與配置方式。部分的 HTML 即為 {{HTMLElement("canvas")}} 元素，可直接建構 2D 圖形。</dd>
+ <dt><a href="/docs/HTML/Element/audio" title="/en-US/docs/HTML/Element/audio">HTML audio</a></dt>
+ <dd>{{HTMLElement("audio")}} 元素可輕鬆播放簡易音效與音樂。如果需要進一步效果，可參閱 <a href="/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> 達到真正的音訊處理效能！</dd>
+ <dt><a href="/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
+ <dd>此強大的資料儲存 API，可將使用者的資料保存於電腦或其他裝置之上，亦可於本端儲存遊戲資料與其他資訊；如此可避免每次都需再下載資料一次。即使目前處於無網路連線的狀態 (例如飛機上長達數個小時的旅程...)，也同樣可以玩遊戲 。</dd>
+ <dt><a href="/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript 就是 Web 上使用的程式語言，可於現有瀏覽器上達到絕佳速度，且目前還在不斷的提升。你可寫出遊戲的程式碼，或可透過如 <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> 或 <a href="http://asmjs.org/spec/latest/" title="http://asmjs.org/spec/latest/">Asm.js</a> 的技術，輕鬆移植現有的遊戲。</dd>
+ <dt><a href="/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></dt>
+ <dd>Pointer Lock API 可鎖定遊戲介面中的滑鼠或其他指向裝置。取代之前的絕對游標定位，現可接收座標差而得到更精確的使用者動作，並避免使用者突然在他處輸入，卻遺漏了重要動作。</dd>
+ <dt><a href="/docs/SVG" title="/en-US/docs/SVG">SVG</a> (Scalable Vector Graphics，<a href="/docs/SVG">可縮放向量圖形</a>)</dt>
+ <dd>可建構向量圖形，根據裝置畫面的解析度而順暢調整。</dd>
+ <dt><a href="/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">Typed Array (具型別陣列)</a></dt>
+ <dd>JavaScript 的具型別陣列，可讓你在 JavaScript 中存取原始的二進位資料。如此可讓你設定 GL 紋理 (Texture)、遊戲資料，或其他物件。甚至非原生 JavaScript 格式的亦可處理。</dd>
+ <dt><a href="/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></dt>
+ <dd>此 API 可透過 JavaScript 程式碼控制音訊的回播、合成、操作等作業，讓你建構絕妙音效並即時播放音樂。</dd>
+ <dt><a href="/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a></dt>
+ <dd>可於 Web 內容中建立高效能、硬體加速的 3D (與2D) 圖像。此為 Web 所支援的 <a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 實作。</dd>
+ <dt><a href="/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd>WebRTC (Real-Time Communications) API 可控制音訊與視訊資料 (包含視訊會議)，並能在兩名使用者之間來回傳輸其他應用程式的資料。想讓玩家能一邊爆怪物的頭還一邊交談？就用這個 API 吧。</dd>
+ <dt><a href="/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></dt>
+ <dd>WebSocket API 可讓你的 App 或網站連上伺服器，進而即時來回傳輸資料。適用於多人遊戲、聊天服務等。</dd>
+ <dt><a href="/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a></dt>
+ <dd>Workers 可讓你分配背景執行緒，執行本身所屬的 JavaScript 程式碼，藉以利用新的多核心處理器。</dd>
+ <dt><a href="/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> and <a href="/docs/Web/API/File_and_Directory_Entries_API" title="/en-US/docs/DOM/File_API">File API</a></dt>
+ <dd>整合的 XMLHttpRequest 與 File API，可你從 Web 伺服器接收或傳送所需的任何資料 (別因為「XML」搞混了)。如此能順利下載新的遊戲關卡與圖片，藉以來回傳輸非即時的遊戲狀態資訊。</dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/games/techniques/index.html b/files/zh-tw/games/techniques/index.html
new file mode 100644
index 0000000000..66edeebd82
--- /dev/null
+++ b/files/zh-tw/games/techniques/index.html
@@ -0,0 +1,32 @@
+---
+title: Techniques for game development
+slug: Games/Techniques
+tags:
+  - Games
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+translation_of: Games/Techniques
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">This page lists essential core techniques for anyone wanting to develop games using open web technologies.</span></p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Techniques/Async_scripts">Using async scripts for asm.js</a></dt>
+ <dd>Especially when creating medium to large-sized games, async scripts are an essential technique to take advantage of, so that your game's JavaScript can be compiled off the main thread and be cached for future game running, resulting in a significant performance improvement for your users. This article explains how.</dd>
+ <dt><a href="/en-US/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">Optimizing startup performance</a></dt>
+ <dd>How to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device.</dd>
+ <dt><a href="/en-US/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">Using WebRTC peer-to-peer data channels</a></dt>
+ <dd>In addition to providing support for audio and video communication, WebRTC lets you set up peer-to-peer data channels to exchange text or binary data actively between your players. This article explains what this can do for you, and shows how to use libraries that make this easy.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></dt>
+ <dd>This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving {{ domxref("window.requestAnimationFrame") }}.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Audio_for_Web_Games">Audio for Web Games</a></dt>
+ <dd>Audio is an important part of any game — it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to negotiate. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></dt>
+ <dd>A concise introduction to collision detection in 2D games.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Tilemaps">Tilemaps</a></dt>
+ <dd>Tiles are a very popular technique in 2D games for building the game world. These articles provide an introduction to tilemaps and how to implement them with the Canvas API.</dd>
+</dl>
diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html
new file mode 100644
index 0000000000..62a57f6440
--- /dev/null
+++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html
@@ -0,0 +1,98 @@
+---
+title: 讓球碰到牆壁後反彈
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}</p>
+
+<div class="summary">
+<p>這是 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>中的第三步 你可以在以下的連結中查看原始碼<a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html">Gamedev-Canvas-workshop/lesson3.html</a>.</p>
+</div>
+
+<p><span class="seoSummary">很好我們現在可以讓球移動了, 但目前他會在移動到邊緣後消失, 這使我們少了點樂趣! 為了解決這個問題我們稍後會加入一些碰撞處理 ( <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection">later</a> ) 使球可以再碰到邊緣時反彈.</span></p>
+
+<h2 id="簡單的碰撞偵測">簡單的碰撞偵測</h2>
+
+<p>為了偵測碰撞的發生，我們將檢查球是否接觸(相撞)牆壁，如果有碰到，我們將改變球的行進方向。</p>
+
+<p>為了方便計算，我們定義一變數 <code>ballRadius</code> 代表球的半徑。在你程式碼宣告變數的地方加入以下內容:</p>
+
+<pre class="brush: js">var ballRadius = 10;</pre>
+
+<p>接著更新繪製球的 <code>drawBall()</code> 函數，加入以下內容:</p>
+
+<pre class="brush: js">ctx.arc(x, y, ballRadius, 0, Math.PI*2);</pre>
+
+<h2 id="從頂部和底部反彈" style='margin: 0px 0px 12px; padding: 0px; border: 0px; word-wrap: break-word; font-family: "Open Sans", Arial, sans-serif; font-weight: 700; line-height: 1; font-size: 2.143rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);'><font><font><font><font>從頂部和底部反彈</font></font></font></font></h2>
+
+<p>總共有四面牆壁會與球發生碰撞 — 首先處理上方的牆壁，我們在每個影格檢查球是否有接觸到 Canvas 上方壁面 —如果是的話，我們將扭轉球的運動，所以它將開始在相反的方向移動，並保持在可見邊界。記住坐標係從左上角開始，我們可以得到這樣的東西：</p>
+
+<pre class="brush: js">if(y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p style='margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: "Open Sans", Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);'><font><font>如果球位置的Y值低於零，改變Y軸上的運動的方向，通過設置它等於本身，扭轉。</font><font>如果球是向上移動的速度為每幀的2個像素，現在它將移動“了”的速度為- 2像素，這實際上等於在每幀的2個像素的速度向下移動。</font></font></p>
+
+<p style='margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: "Open Sans", Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);'><font><font>上面的代碼將處理球反彈的頂部邊緣，所以現在讓我們想想下邊緣：</font></font></p>
+
+<pre class="brush: js">if(y + dy &gt; canvas.height) {
+    dy = -dy;
+}</pre>
+
+<p><font><font>如果球的Y位置大於畫布的高度（請記住，我們計算從左上角的Y值，所以頂部邊緣開始在0和底部邊緣是在480像素，畫布的高度），然後通過反轉的Y軸運動的底部邊緣，如前。</font></font><br>
+ <font><font>我們可以將這兩個語句為一個節省代碼冗長：</font></font></p>
+
+<pre class="brush: js">if(y + dy &gt; canvas.height || y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p><span style='background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: "Open Sans",Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;'>如果兩個語句中的一個是真的，則反轉球的運動。</span></p>
+
+<h2 id="從左邊和右邊反彈" style='margin: 0px 0px 12px; padding: 0px; border: 0px; word-wrap: break-word; font-family: "Open Sans", Arial, sans-serif; font-weight: 700; line-height: 1; font-size: 2.143rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);'><strong style="border: 0px; margin: 0px; padding: 0px;"><font><font>從左邊和右邊反彈</font></font></strong></h2>
+
+<p><font>我們有頂部和底部邊緣覆蓋，所以讓我們想想左，右的。</font><font>它實際上是非常相似的，你所要做的就是重複X而不是Y的陳述：</font></p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width || x + dx &lt; 0) {
+    dx = -dx;
+}
+
+if(y + dy &gt; canvas.height || y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p><span style='background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: "Open Sans",Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;'>在這一點上你應該插入上面的代碼塊到draw()功能，在關閉括號。</span></p>
+
+<h2 id="球不斷地消失在牆上！" style='margin: 0px 0px 12px; padding: 0px; border: 0px; word-wrap: break-word; font-family: "Open Sans", Arial, sans-serif; font-weight: 700; line-height: 1; font-size: 2.143rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);'><font><font>球不斷地消失在牆上！</font></font></h2>
+
+<p>測試你的代碼在這一點上，你會留下深刻的印象-現在我們有一個球，反彈了所有四個邊緣的畫布！然而，我們有另一個問題-當球擊中每一個牆，它下沉到它略有改變方向：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10432/ball-in-wall.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<p>這是因為我們計算的牆壁和球的中心的碰撞點，而我們應該做它的圓周。球應該反彈後，如果接觸牆，而不是當它已經在牆上的一半，所以讓我們調整我們的陳述有點包括。更新您添加到的最後一個代碼：</p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
+    dx = -dx;
+}
+if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
+    dy = -dy;
+}</pre>
+
+<p><font>當球的中心與牆的邊緣之間的距離與球的半徑完全相同時，它會改變運動方向。從邊緣減去一個半徑的寬度以及添加到另一個方向給我們在碰撞檢測在中球彈回牆壁的印象。</font></p>
+
+<h2 id="比較你的程式碼">比較你的程式碼</h2>
+
+<p><span style='background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: "Open Sans",Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;'>讓我們用剛剛所學的再次檢查完成的程式碼，並把玩一下：</span></p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}</p>
+
+<div class="note">
+<p><strong>Exercise</strong>: 每次球撞到牆上時嘗試改變球的顏色為隨機的顏色。</p>
+</div>
+
+<h2 id="下一步">下一步</h2>
+
+<p>我們現在已經進入了舞台，我們的球是移動和停留在遊戲板上。 在第四章中，我們將討論實現一個可控制的球拍 - 參見 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls">Paddle and keyboard controls</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}</p>
diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
new file mode 100644
index 0000000000..a9ffc103a7
--- /dev/null
+++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
@@ -0,0 +1,118 @@
+---
+title: 建立Canvas並畫出
+slug: >-
+  Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it
+tags:
+  - 2D
+  - Beginner
+  - Canvas
+  - Games
+  - HTML
+  - JavaScript
+  - Tutorial
+translation_of: >-
+  Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}</p>
+
+<div class="summary">
+<p>這是<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>十個步驟的第一步。你可以這份教學的原始碼，當你完成這份教學你的程式碼應該跟<a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html">Gamedev-Canvas-workshop/lesson1.html</a>差不多。</p>
+</div>
+
+<p><span class="seoSummary">在開始撰寫遊戲功能之前，我們先建構在遊戲中負責渲染的基礎結構。渲染可透過HTML的{{htmlelement("canvas")}} 元件完成。</span></p>
+
+<h2 id="遊戲的HTML">遊戲的HTML</h2>
+
+<p>當整個遊戲透過{{htmlelement("canvas")}} 元件渲染時，HTML檔案結構就會相當簡單。用你最喜歡的文字編輯器打開新的HTML檔，將它命名為<code>index.html並存在適當的位置上，再將下面的的程式碼貼到index.html中</code>:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8" /&gt;
+    &lt;title&gt;Gamedev Canvas Workshop&lt;/title&gt;
+    &lt;style&gt;
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;canvas id="myCanvas" width="480" height="320"&gt;&lt;/canvas&gt;
+
+&lt;script&gt;
+	// JavaScript code goes here
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>在header中設定了文字編碼、以及{{htmlelement("title")}}和一些CSS樣式。在body中包含{{htmlelement("canvas")}}與{{htmlelement("script")}}，前者將用來渲染遊戲畫面，後者將用來撰寫JavaScript程式控制渲染。{{htmlelement("canvas")}}元件有<code>個id為</code><code>myCanvas</code>方便當作參考(reference，如許多程式語言中的變數)讓我們設定它的寬度為480 pixels與高度320 pixels，這份教學中全部的JavaScript 程式碼都會寫在<code>&lt;script&gt;開始標記與&lt;/script&gt;結束標記中間。</code></p>
+
+<h2 id="Canvas基礎">Canvas基礎</h2>
+
+<p>為了能夠順利渲染圖形在{{htmlelement("canvas")}}元件中，獲得{{htmlelement("canvas")}}元件的參考。請將下列的程式碼加在<code>&lt;script&gt;</code>開始標記的後面。</p>
+
+<pre class="brush: js">var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");</pre>
+
+<p>我們將{{htmlelement("canvas")}}元件的參考存成變數canvas為了未來使用。建立ctx變數儲存"2D渲染環境"，ctx變數實際拿來繪製Canvas的工具。</p>
+
+<p>以下片段的程式範例在canvas上印出紅色正方形。將以下的程式加在上面J的avaScript程式碼之後，再用瀏覽器打開<code>index.html</code>測試。</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();</pre>
+
+<p>所有的指令都介於{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}與{{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}。我們用{{domxref("CanvasRenderingContext2D.rect()","rect()")}}定義了一個矩形，{{domxref("CanvasRenderingContext2D.rect()","rect()")}}中前兩個數值代表左上角的座標。在上面的情況中，矩形距離左邊20 pixels，距離畫面上方40 pixels，50 pixels寬，50 pixels高，形成完美的正方形。{{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}屬性所儲存的顏色會被{{domxref("CanvasRenderingContext2D.fill()","fill()")}}方法用來塗滿正方形，在此為塗上紅色。</p>
+
+<p>不僅矩形— 以下的程式碼印出綠色的圓形。試著將程式碼加在JavaScript底部，存檔在重新整理瀏覽器中的<code>index.html</code>:</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();</pre>
+
+<p>如同你看到的我們再次使用了{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}與{{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}。在它們中間最重要的程式碼是{{domxref("CanvasRenderingContext2D.arc()","arc()")}}。{{domxref("CanvasRenderingContext2D.arc()","arc()")}}用到六個參數(依序介紹)：</p>
+
+<ul>
+ <li><code>圓弧中心的x、y座標</code></li>
+ <li>圓弧的半徑</li>
+ <li>圓弧開始和結束的角度(從開始到結束的角度, 以弧度表示)</li>
+ <li>繪製的方向(<code>false</code>代表順時針方向, 預設或true為逆時針方向) 最後一個參數並非必要</li>
+</ul>
+
+<p>{{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}看起來與之前不同，原因就像CSS一樣可以用16進位、顏色關鍵字、<code>rgba()函式等其他可用的顏色指定方法。</code></p>
+
+<p>不但有{{domxref("CanvasRenderingContext2D.fill()","fill()")}}填滿圖形，還有 {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} 專門為外輪廓線上色。也試著加入下面的JavaScript程式碼吧:</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();</pre>
+
+<p>上面的程式碼印出藍色邊框的空心矩形，由於在<code>rgba()函式的</code>alpha通道，藍色邊框呈現半透明。</p>
+
+<h2 id="比較你的程式碼">比較你的程式碼</h2>
+
+<p>這裡第一課的有全部原始碼，在JSFiddle上實際運行:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}</p>
+
+<div class="note">
+<p><strong>Exercise</strong>: 練習改變物體的大小和顏色</p>
+</div>
+
+<h2 id="下一步">下一步</h2>
+
+<p>現在我們已經設定基本的HTML並且學了一些canvas知識 ，讓我們接著下去第二章實做<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Move_the_ball">如何在遊戲中移動球</a><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Move_the_ball">。</a></p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}</p>
diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.html
new file mode 100644
index 0000000000..38815969bc
--- /dev/null
+++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.html
@@ -0,0 +1,57 @@
+---
+title: 只使用 JavaScript 的 2D 打磚塊遊戲
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript
+tags:
+  - 2D
+  - Beginner
+  - Canvas
+  - Games
+  - JavaScript
+  - Tutorial
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}}</p>
+
+<p class="summary">本文將帶你逐步做出簡單的 MDN 打磚塊遊戲。除了只用 JavaScript 寫成之外，也透過 HTML5 的 {{htmlelement("canvas")}} 繪製。</p>
+
+<p>每個步驟均提供可測試修改的實際範例，讓你能看到各個步驟所產生的影響。你將了解該如何使用 {{htmlelement("canvas")}} 元件完成基礎的遊戲機制，例如繪製 (Render)、移動圖形、碰撞偵測、操控機制、輸贏狀態等。</p>
+
+<p>若要能充分了解此一系列文章，你應具備基礎至中等的 <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> 知識。結束此教學之後即可寫出自己的簡易網頁遊戲。</p>
+
+<p><img alt="Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives." src="https://mdn.mozillademos.org/files/10383/mdn-breakout-gameplay.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="課程細節">課程細節</h2>
+
+<p>所有課程和其他不同版本的 <a href="http://breakout.enclavegames.com/lesson10.html">MDN打磚塊遊戲</a>，均可至 <a href="https://github.com/end3r/Canvas-gamedev-workshop">GitHub 找到：</a></p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/zh-TW/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">建立 Canvas 並繪製</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">讓球移動</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">讓球反彈</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">搖桿和鍵盤控制</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">判斷遊戲結束</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">建立磚塊場地</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">碰撞偵測</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">更新分數並判斷輸贏</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">滑鼠控制</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">結束</a></li>
+</ol>
+
+<p>若一開始就單純使用 JavaScript，將能學到紮實的網頁遊戲開發知識。往後則可自由選擇你自己愛用的框架 (Framework) 來完成專案。<br>
+ 框架同樣是由 JavaScript 寫成的工具。因此在用框架開發之前，能先了解程式語言本身將有助於了解框架內部所發生的事。框架可加快開發速度並代勞遊戲中某些無聊的部份，但若遊戲運作得不如預期，你都可試著除錯或撰寫純 JavaScript 的解決方案。</p>
+
+<div class="note">
+<p><strong>注意：</strong>如果你對 2D 網頁遊戲開發的遊戲函式庫有興趣，可參考此〈<a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">使用剖析器 (Phaser) 的打磚塊遊戲</a>〉系列相關文章 。</p>
+</div>
+
+<div class="note">
+<p><strong>注意：</strong>此系列文章也能當做行動遊戲開發工作坊的教材。如果你想講解一般的遊戲開發，則可利用此教學為基礎的〈<a href="https://github.com/end3r/Gamedev-Canvas-Content-Kit">Gamedev Canvas Content Kit</a>〉。</p>
+</div>
+
+<h2 id="下一步">下一步</h2>
+
+<p>好吧！讓我們開始第一章 — <a href="https://developer.mozilla.org/zh-TW/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">建立 Canvas 並繪製。</a></p>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} </p>
diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html
new file mode 100644
index 0000000000..37514c9c59
--- /dev/null
+++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html
@@ -0,0 +1,136 @@
+---
+title: 讓球移動
+slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}}</p>
+
+<div class="summary">
+<p>這一篇是<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>十個步驟中的第二步。當完成此步驟你的程式碼應該會與<a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html">Gamedev-Canvas-workshop/lesson2.html</a>差不多</p>
+</div>
+
+<p>完成上一個步驟，你已經知道如何畫出一顆球，現在讓他動起來吧。藉由繪製球在螢幕上然後再清除，然後在每個影格中繪製球在偏移一點點的位置上（如果在同一個位置上就等於沒動），造成物體移動的感覺，就如同電影中物體移動的方式。</p>
+
+<h2 id="定義一個繪製用的迴圈">定義一個繪製用的迴圈</h2>
+
+<p>為了固定更新 canvas 繪圖區域的每一個影格，我們需要定義一個繪製函式（drawing function），它將會重複執行，用不同的變數改變球的位置或其他物的位置。重複執行一個函式，其中使用 JavaScript timing function，像是 {{domxref("WindowTimers.setInterval()", "setInterval()")}} 或是 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.</p>
+
+<p>除了前兩行的 JavaScript，其餘的都刪除，並將以下的程式碼加入在前兩行之後。draw()函數每十毫秒會被setInterval執行一次:</p>
+
+<pre class="brush: js">function draw() {
+    // drawing code
+}
+setInterval(draw, 10);</pre>
+
+<p>因為 <code>setInterval</code> 無限循環的特性， <code>draw()</code> 函數將會每 10 毫秒被呼叫一次除非我們將它停止。 現在，讓我們來把球畫出來 — 將以下程式碼加入到 <code>draw()</code> 函數內:</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+</pre>
+
+<p>現在將你的程式碼更新 — 球將會在每個影格被重新繪製.</p>
+
+<h2 id="讓球動起來">讓球動起來</h2>
+
+<p>由於球並沒有移動，你沒有辦法察覺到它正不斷的被重新繪製。讓我們稍作修改。首先，取代掉原本寫死的位置(50,50)，我們宣告變數 x 和 y 讓球從 Canvas 正中央的底部出發，接著利用x和y來定義球應該被畫在哪裡。</p>
+
+<p>首先將下面兩行程式碼加到你的 <code>draw()</code> 函數<code>用以定義 x 和 y </code>:</p>
+
+<pre class="brush: js">var x = canvas.width/2;
+var y = canvas.height-30;
+</pre>
+
+<p>接著修改 <code>draw()</code> 函數，在 {{domxref("CanvasRenderingContext2D.arc()","arc()")}} 方法裡使用了變數 x 和 y，就像下面被強調的那行程式碼：</p>
+
+<pre class="brush: js; highlight:[3]">function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+</pre>
+
+<p>再來是最重要的部分: 在每個影格被繪製出來後，我們想要對 x 和 y 增加一數值，讓球看起來好像在移動一樣。讓我們來定義這個數值為 dx 以及 dy，並且分別設為 2 以及 -2。將以下程式碼添加到你定義 x 和 y 的地方:</p>
+
+<pre class="brush: js">var dx = 2;
+var dy = -2;
+</pre>
+
+<p>最後，在每個影格中我們利用 dx 和 dy 來更新 x 和 y 的數值，球就會在每次更新後被畫到不同的位置。將最後兩行程式碼加到你的 draw()函數內:</p>
+
+<pre class="brush: js; highlight:[7,8]">function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}</pre>
+
+<p>儲存你的程式碼並在瀏覽器重新整理。程式正常運作，雖然球似乎留下的他的蹤跡:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10430/ball-trail.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="在每個影格開始前清除_canvas">在每個影格開始前清除 canvas</h2>
+
+<p>由於我們在每個影格繪製新的球之前並沒有把舊的清除掉，讓他看起來像留下了一條痕跡。別擔心，其實是有方法可以把 canvas 清除掉: {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. 這個方法需要 4個參數:  前兩個參數代表了長方形左上角的 x和 y座標，後兩個參數代表了長方形右下角的 x 和 y 座標。之前在這長方形範圍內所繪製的東西將會被清除掉。</p>
+
+<p>將以下強調的程式碼加到 <code>draw()</code> 函數內:</p>
+
+<pre class="brush: js; highlight:[2]">function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+</pre>
+
+<p>將程式碼儲存並重新整理瀏覽器，這次球沒有再留下痕跡了。每 10 毫秒 canvas 會被清除，球將會被畫在指定的位置上，且 x 和 y 會更新以用在下一個影格.</p>
+
+<h2 id="整理程式碼">整理程式碼</h2>
+
+<p>再接續幾個章節我們會持續增加 <code>draw()</code> 函數內的指令，讓我們儘可能的維持程式的簡潔度。讓我們把繪製球的程式碼獨立為一個函數。</p>
+
+<p>將原本的 draw() 函數拆成以下兩個函數:</p>
+
+<pre class="brush: js">function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    x += dx;
+    y += dy;
+}</pre>
+
+<h2 id="比較你的程式碼">比較你的程式碼</h2>
+
+<p>以下為到目前為止完整的程式碼，你可以核對並試著操作以幫助你更瞭解他的運作方式:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","415")}}</p>
+
+<div class="summary">
+<p>Exercise: 練習改變球的移動速度或行進方向。</p>
+</div>
+
+<h2 id="下一步">下一步</h2>
+
+<p>我們繪製了球並且讓他可以移動，但他仍會消失在 canvas 的邊緣。在第三章我們將會實作 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Bounce_off_the_walls">讓球碰到牆壁後反彈</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}}</p>
diff --git a/files/zh-tw/games/tutorials/index.html b/files/zh-tw/games/tutorials/index.html
new file mode 100644
index 0000000000..d0ce8dfdf2
--- /dev/null
+++ b/files/zh-tw/games/tutorials/index.html
@@ -0,0 +1,25 @@
+---
+title: Workflows for different game types
+slug: Games/Tutorials
+tags:
+  - Canvas
+  - Games
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - Workflows
+translation_of: Games/Tutorials
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>This page contains articles that highlight different workflows for effectively creating different types of web games, whether you want to create a 2D or 3D game from scratch, or port a C++ or Flash game over to open web technologies.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a></dt>
+ <dd>In this step-by-step tutorial you'll implement a simple breakout clone using pure JavaScript. Along the way you will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.</dd>
+ <dt><a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a></dt>
+ <dd>In this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using the<a class="external external-icon" href="http://phaser.io/">Phaser</a> HTML5 game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">2D maze game with device orientation</a></dt>
+ <dd>This tutorial shows how to create a 2D maze game using HTML5, incorporating fundamentals such as collision detection and sprite placement on a {{htmlelement("canvas")}}. This is a mobile game that uses the <a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> and <a href="/en-US/docs/Web/Guide/API/Vibration">Vibration</a><strong> APIs</strong> to enhance the gameplay and is built using the <a href="http://phaser.io/">Phaser</a> framework.</dd>
+</dl>