blob: 38815969bc52a9077a8781e5b23ebf65f3286298 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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>
|
