From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../bounce_off_the_walls/index.html | 98 +++++++++++++++ .../create_the_canvas_and_draw_on_it/index.html | 118 ++++++++++++++++++ .../2d_breakout_game_pure_javascript/index.html | 57 +++++++++ .../move_the_ball/index.html | 136 +++++++++++++++++++++ files/zh-tw/games/tutorials/index.html | 25 ++++ 5 files changed, 434 insertions(+) create mode 100644 files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html create mode 100644 files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html create mode 100644 files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/index.html create mode 100644 files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html create mode 100644 files/zh-tw/games/tutorials/index.html (limited to 'files/zh-tw/games/tutorials') 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 +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}

+ +
+

這是 Gamedev Canvas tutorial中的第三步 你可以在以下的連結中查看原始碼Gamedev-Canvas-workshop/lesson3.html.

+
+ +

很好我們現在可以讓球移動了, 但目前他會在移動到邊緣後消失, 這使我們少了點樂趣! 為了解決這個問題我們稍後會加入一些碰撞處理 ( later ) 使球可以再碰到邊緣時反彈.

+ +

簡單的碰撞偵測

+ +

為了偵測碰撞的發生，我們將檢查球是否接觸(相撞)牆壁，如果有碰到，我們將改變球的行進方向。

+ +

為了方便計算，我們定義一變數 ballRadius 代表球的半徑。在你程式碼宣告變數的地方加入以下內容:

+ +
var ballRadius = 10;
+ +

接著更新繪製球的 drawBall() 函數，加入以下內容:

+ +
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+ +

從頂部和底部反彈

+ +

總共有四面牆壁會與球發生碰撞 — 首先處理上方的牆壁，我們在每個影格檢查球是否有接觸到 Canvas 上方壁面 —如果是的話，我們將扭轉球的運動，所以它將開始在相反的方向移動，並保持在可見邊界。記住坐標係從左上角開始，我們可以得到這樣的東西：

+ +
if(y + dy < 0) {
+    dy = -dy;
+}
+ +

如果球位置的Y值低於零，改變Y軸上的運動的方向，通過設置它等於本身，扭轉。如果球是向上移動的速度為每幀的2個像素，現在它將移動“了”的速度為- 2像素，這實際上等於在每幀的2個像素的速度向下移動。

+ +

上面的代碼將處理球反彈的頂部邊緣，所以現在讓我們想想下邊緣：

+ +
if(y + dy > canvas.height) {
+    dy = -dy;
+}
+ +

如果球的Y位置大於畫布的高度（請記住，我們計算從左上角的Y值，所以頂部邊緣開始在0和底部邊緣是在480像素，畫布的高度），然後通過反轉的Y軸運動的底部邊緣，如前。
+ 我們可以將這兩個語句為一個節省代碼冗長：

+ +
if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

如果兩個語句中的一個是真的，則反轉球的運動。

+ +

從左邊和右邊反彈

+ +

我們有頂部和底部邊緣覆蓋，所以讓我們想想左，右的。它實際上是非常相似的，你所要做的就是重複X而不是Y的陳述：

+ +
if(x + dx > canvas.width || x + dx < 0) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

在這一點上你應該插入上面的代碼塊到draw()功能，在關閉括號。

+ +

球不斷地消失在牆上！

+ +

測試你的代碼在這一點上，你會留下深刻的印象-現在我們有一個球，反彈了所有四個邊緣的畫布！然而，我們有另一個問題-當球擊中每一個牆，它下沉到它略有改變方向：

+ +

+ +

這是因為我們計算的牆壁和球的中心的碰撞點，而我們應該做它的圓周。球應該反彈後，如果接觸牆，而不是當它已經在牆上的一半，所以讓我們調整我們的陳述有點包括。更新您添加到的最後一個代碼：

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

當球的中心與牆的邊緣之間的距離與球的半徑完全相同時，它會改變運動方向。從邊緣減去一個半徑的寬度以及添加到另一個方向給我們在碰撞檢測在中球彈回牆壁的印象。

+ +

比較你的程式碼

+ +

讓我們用剛剛所學的再次檢查完成的程式碼，並把玩一下：

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}

+ +
+

Exercise: 每次球撞到牆上時嘗試改變球的顏色為隨機的顏色。

+
+ +

下一步

+ +

我們現在已經進入了舞台，我們的球是移動和停留在遊戲板上。 在第四章中，我們將討論實現一個可控制的球拍 - 參見 Paddle and keyboard controls.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}

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 +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

+ +
+

這是Gamedev Canvas tutorial十個步驟的第一步。你可以這份教學的原始碼，當你完成這份教學你的程式碼應該跟Gamedev-Canvas-workshop/lesson1.html差不多。

+
+ +

在開始撰寫遊戲功能之前，我們先建構在遊戲中負責渲染的基礎結構。渲染可透過HTML的{{htmlelement("canvas")}} 元件完成。

+ +

遊戲的HTML

+ +

當整個遊戲透過{{htmlelement("canvas")}} 元件渲染時，HTML檔案結構就會相當簡單。用你最喜歡的文字編輯器打開新的HTML檔，將它命名為index.html並存在適當的位置上，再將下面的的程式碼貼到index.html中:

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Gamedev Canvas Workshop</title>
+    <style>
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    </style>
+</head>
+<body>
+
+<canvas id="myCanvas" width="480" height="320"></canvas>
+
+<script>
+	// JavaScript code goes here
+</script>
+
+</body>
+</html>
+
+ +

在header中設定了文字編碼、以及{{htmlelement("title")}}和一些CSS樣式。在body中包含{{htmlelement("canvas")}}與{{htmlelement("script")}}，前者將用來渲染遊戲畫面，後者將用來撰寫JavaScript程式控制渲染。{{htmlelement("canvas")}}元件有個id為myCanvas方便當作參考(reference，如許多程式語言中的變數)讓我們設定它的寬度為480 pixels與高度320 pixels，這份教學中全部的JavaScript 程式碼都會寫在<script>開始標記與</script>結束標記中間。

+ +

Canvas基礎

+ +

為了能夠順利渲染圖形在{{htmlelement("canvas")}}元件中，獲得{{htmlelement("canvas")}}元件的參考。請將下列的程式碼加在<script>開始標記的後面。

+ +
var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");
+ +

我們將{{htmlelement("canvas")}}元件的參考存成變數canvas為了未來使用。建立ctx變數儲存"2D渲染環境"，ctx變數實際拿來繪製Canvas的工具。

+ +

以下片段的程式範例在canvas上印出紅色正方形。將以下的程式加在上面J的avaScript程式碼之後，再用瀏覽器打開index.html測試。

+ +
ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();
+ +

所有的指令都介於{{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()")}}方法用來塗滿正方形，在此為塗上紅色。

+ +

不僅矩形— 以下的程式碼印出綠色的圓形。試著將程式碼加在JavaScript底部，存檔在重新整理瀏覽器中的index.html:

+ +
ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();
+ +

如同你看到的我們再次使用了{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}與{{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}。在它們中間最重要的程式碼是{{domxref("CanvasRenderingContext2D.arc()","arc()")}}。{{domxref("CanvasRenderingContext2D.arc()","arc()")}}用到六個參數(依序介紹)：

+ + + +

{{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}看起來與之前不同，原因就像CSS一樣可以用16進位、顏色關鍵字、rgba()函式等其他可用的顏色指定方法。

+ +

不但有{{domxref("CanvasRenderingContext2D.fill()","fill()")}}填滿圖形，還有 {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} 專門為外輪廓線上色。也試著加入下面的JavaScript程式碼吧:

+ +
ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();
+ +

上面的程式碼印出藍色邊框的空心矩形，由於在rgba()函式的alpha通道，藍色邊框呈現半透明。

+ +

比較你的程式碼

+ +

這裡第一課的有全部原始碼，在JSFiddle上實際運行:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}

+ +
+

Exercise: 練習改變物體的大小和顏色

+
+ +

下一步

+ +

現在我們已經設定基本的HTML並且學了一些canvas知識 ，讓我們接著下去第二章實做如何在遊戲中移動球。

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

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 +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}}

+ +

本文將帶你逐步做出簡單的 MDN 打磚塊遊戲。除了只用 JavaScript 寫成之外，也透過 HTML5 的 {{htmlelement("canvas")}} 繪製。

+ +

每個步驟均提供可測試修改的實際範例，讓你能看到各個步驟所產生的影響。你將了解該如何使用 {{htmlelement("canvas")}} 元件完成基礎的遊戲機制，例如繪製 (Render)、移動圖形、碰撞偵測、操控機制、輸贏狀態等。

+ +

若要能充分了解此一系列文章，你應具備基礎至中等的 JavaScript 知識。結束此教學之後即可寫出自己的簡易網頁遊戲。

+ +

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.

+ +

課程細節

+ +

所有課程和其他不同版本的 MDN打磚塊遊戲，均可至 GitHub 找到：

+ +
    +
  1. 建立 Canvas 並繪製
    2. +
  2. 讓球移動
    3. +
  3. 讓球反彈
    4. +
  4. 搖桿和鍵盤控制
    5. +
  5. 判斷遊戲結束
    6. +
  6. 建立磚塊場地
    7. +
  7. 碰撞偵測
    8. +
  8. 更新分數並判斷輸贏
    9. +
  9. 滑鼠控制
    10. +
  10. 結束
    11. +
+ +

若一開始就單純使用 JavaScript，將能學到紮實的網頁遊戲開發知識。往後則可自由選擇你自己愛用的框架 (Framework) 來完成專案。
+ 框架同樣是由 JavaScript 寫成的工具。因此在用框架開發之前，能先了解程式語言本身將有助於了解框架內部所發生的事。框架可加快開發速度並代勞遊戲中某些無聊的部份，但若遊戲運作得不如預期，你都可試著除錯或撰寫純 JavaScript 的解決方案。

+ +
+

注意：如果你對 2D 網頁遊戲開發的遊戲函式庫有興趣，可參考此〈使用剖析器 (Phaser) 的打磚塊遊戲〉系列相關文章 。

+
+ +
+

注意：此系列文章也能當做行動遊戲開發工作坊的教材。如果你想講解一般的遊戲開發，則可利用此教學為基礎的〈Gamedev Canvas Content Kit〉。

+
+ +

下一步

+ +

好吧！讓我們開始第一章 — 建立 Canvas 並繪製。

+ +

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} 

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 +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{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")}}

+ +
+

這一篇是Gamedev Canvas tutorial十個步驟中的第二步。當完成此步驟你的程式碼應該會與Gamedev-Canvas-workshop/lesson2.html差不多

+
+ +

完成上一個步驟，你已經知道如何畫出一顆球，現在讓他動起來吧。藉由繪製球在螢幕上然後再清除，然後在每個影格中繪製球在偏移一點點的位置上（如果在同一個位置上就等於沒動），造成物體移動的感覺，就如同電影中物體移動的方式。

+ +

定義一個繪製用的迴圈

+ +

為了固定更新 canvas 繪圖區域的每一個影格，我們需要定義一個繪製函式（drawing function），它將會重複執行，用不同的變數改變球的位置或其他物的位置。重複執行一個函式，其中使用 JavaScript timing function，像是 {{domxref("WindowTimers.setInterval()", "setInterval()")}} 或是 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.

+ +

除了前兩行的 JavaScript，其餘的都刪除，並將以下的程式碼加入在前兩行之後。draw()函數每十毫秒會被setInterval執行一次:

+ +
function draw() {
+    // drawing code
+}
+setInterval(draw, 10);
+ +

因為 setInterval 無限循環的特性， draw() 函數將會每 10 毫秒被呼叫一次除非我們將它停止。 現在，讓我們來把球畫出來 — 將以下程式碼加入到 draw() 函數內:

+ +
ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+
+ +

現在將你的程式碼更新 — 球將會在每個影格被重新繪製.

+ +

讓球動起來

+ +

由於球並沒有移動，你沒有辦法察覺到它正不斷的被重新繪製。讓我們稍作修改。首先，取代掉原本寫死的位置(50,50)，我們宣告變數 x 和 y 讓球從 Canvas 正中央的底部出發，接著利用x和y來定義球應該被畫在哪裡。

+ +

首先將下面兩行程式碼加到你的 draw() 函數用以定義 x 和 y :

+ +
var x = canvas.width/2;
+var y = canvas.height-30;
+
+ +

接著修改 draw() 函數，在 {{domxref("CanvasRenderingContext2D.arc()","arc()")}} 方法裡使用了變數 x 和 y，就像下面被強調的那行程式碼：

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+ +

再來是最重要的部分: 在每個影格被繪製出來後，我們想要對 x 和 y 增加一數值，讓球看起來好像在移動一樣。讓我們來定義這個數值為 dx 以及 dy，並且分別設為 2 以及 -2。將以下程式碼添加到你定義 x 和 y 的地方:

+ +
var dx = 2;
+var dy = -2;
+
+ +

最後，在每個影格中我們利用 dx 和 dy 來更新 x 和 y 的數值，球就會在每次更新後被畫到不同的位置。將最後兩行程式碼加到你的 draw()函數內:

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+ +

儲存你的程式碼並在瀏覽器重新整理。程式正常運作，雖然球似乎留下的他的蹤跡:

+ +

+ +

在每個影格開始前清除 canvas

+ +

由於我們在每個影格繪製新的球之前並沒有把舊的清除掉，讓他看起來像留下了一條痕跡。別擔心，其實是有方法可以把 canvas 清除掉: {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. 這個方法需要 4個參數:  前兩個參數代表了長方形左上角的 x和 y座標，後兩個參數代表了長方形右下角的 x 和 y 座標。之前在這長方形範圍內所繪製的東西將會被清除掉。

+ +

將以下強調的程式碼加到 draw() 函數內:

+ +
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;
+}
+
+ +

將程式碼儲存並重新整理瀏覽器，這次球沒有再留下痕跡了。每 10 毫秒 canvas 會被清除，球將會被畫在指定的位置上，且 x 和 y 會更新以用在下一個影格.

+ +

整理程式碼

+ +

再接續幾個章節我們會持續增加 draw() 函數內的指令，讓我們儘可能的維持程式的簡潔度。讓我們把繪製球的程式碼獨立為一個函數。

+ +

將原本的 draw() 函數拆成以下兩個函數:

+ +
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;
+}
+ +

比較你的程式碼

+ +

以下為到目前為止完整的程式碼，你可以核對並試著操作以幫助你更瞭解他的運作方式:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","415")}}

+ +
+

Exercise: 練習改變球的移動速度或行進方向。

+
+ +

下一步

+ +

我們繪製了球並且讓他可以移動，但他仍會消失在 canvas 的邊緣。在第三章我們將會實作 讓球碰到牆壁後反彈.

+ +

{{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")}}

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 +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

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.

+ +
+
2D breakout game using pure JavaScript
+
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.
+
2D breakout game using Phaser
+
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 thePhaser HTML5 game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.
+
2D maze game with device orientation
+
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 Device Orientation and Vibration APIs to enhance the gameplay and is built using the Phaser framework.
+
-- cgit v1.2.3-54-g00ecf