此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

使用纯 JavaScript 开发 2D 打砖块游戏

在这里我们完全将使用纯 JavaScript 语言和用于渲染的 HTML <canvas> 标签,一步一步的绘制一个 MDN 打砖块游戏。

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

为了更快速高效的学习本系列教程,你需要掌握 JavaScript 的一些基础知识。学习完本教程之后你就可以创建自己的 Web 游戏了。

MDN 打砖块游戏的游戏画面,你可以使用球拍击打小球以摧毁砖块阵列,同时屏幕上会显示得分和剩余生命次数

教程详情

全部教程——MDN 打砖块游戏 的各个版本我们正一起管理并托管到 GitHub 上:

  1. 创建、绘制画布
  2. 让球动起来
  3. 反弹的墙
  4. 键盘操作
  5. 游戏结束
  6. 创建砖块
  7. 撞击处理
  8. 统计得分、获得胜利
  9. 鼠标控制
  10. 完成

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

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

如果你对使用第三方游戏资源库开发 2d 网页游戏感兴趣,可以参考本系列教程的使用 Phaser 开发 2D 打砖块游戏

下一步

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