2D breakout game using pure JavaScript

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/content/files/en-us/games/workflows/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md)

在这里我们将完全使用 JavaScript 语言基于 HTML5 的 canvas 标签，一步一步的绘制一个简单的 MDN 消除游戏。

过程中的每一步都会有例子可供体验，让你更清晰的了解他的制作过程。你将学习到如何使用 canvas 标签的基本语法去实现简单游戏的渲染、动画、碰撞、控制胜负。

为了更快速高效的学习本系列教程，你需要掌握 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. 创建、绘制画布
  2. 让球动起来
  3. 反弹的墙
  4. 键盘操作
  5. 游戏结束
  6. 创建砖块
  7. 撞击处理
  8. 统计得分、获得胜利
  9. 鼠标控制
  10. 完成

对于实现一个网页游戏而言，最好的方式是从纯 JavaScirpt 着手，那样可以让我们建立更坚实的基础。之后你可以在你的项目中选择你喜欢的框架。框架也只是用 JavaScript 语言实现的工具；如果你想要在项目中使用框架，你必须先了解语言本身。框架可以帮你提高开发效率并生成一些基础的内容；但是如果没有达到你的预期，你只能慢慢调试或者使用原生 JavaScript 去实现解决方案。

备注： 如果你对使用第三方游戏资源库开发 2d 网页游戏感兴趣，可以参考本系列教程的 2D breakout game using Phaser.

备注： 本系列教程可以用作游戏开发工作室的素材资源。如果你想探讨普通的游戏开发，你可以利用Gamedev Canvas Content Kit以及本教程的内容。

下一步

好，让我们开始吧。第一步 — 创建、绘制画布

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/content/files/en-us/games/workflows/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md)