blob: 68a7f25df9a744d08013d1ebd43691e53268c276 (
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
58
59
60
|
---
title: 2D breakout game using pure JavaScript
slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript
tags:
- 2D
- Beginner
- Canvas
- Games
- JavaScript
- NeedsTranslation
- TopicStub
- 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">在这里我们将完全使用JavaScript语言基于HTML5的canvas标签，一步一步的绘制一个简单的MDN消除游戏。</p>
<p>过程中的每一步都会有例子可供体验，让你更清晰的了解他的制作过程。你将学习到如何使用canvas标签的基本语法去实现简单游戏的渲染、动画、碰撞、控制胜负。</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> </p>
<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-CN/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">创建、绘制画布</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>对于实现一个网页游戏而言，最好的方式是从纯 JavaScirpt 着手，那样可以让我们建立更坚实的基础。之后你可以在你的项目中选择你喜欢的框架。框架也只是用JavaScript语言实现的工具；如果你想要在项目中使用框架，你必须先了解语言本身。框架可以帮你提高开发效率并生成一些基础的内容；但是如果没有达到你的预期，你只能慢慢调试或者使用原生JavaScript去实现解决方案。 </p>
<div class="note">
<p><span style="font-size: 14px;"><strong>说明</strong></span>: 如果你对使用第三方游戏资源库开发2d网页游戏感兴趣，可以参考本系列教程的 <a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a>.</p>
</div>
<div class="note">
<p><span style="font-size: 14px;"><strong>说明</strong></span>: 本系列教程可以用作游戏开发工作室的素材资源。如果你想探讨普通的游戏开发，你可以利用<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/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">创建、绘制画布</a></p>
<p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} </p>
|
