使用HTML5和JavaScript创建自己的游戏。 了解游戏循环，动画和精灵图、碰撞检测、物理和用户输入。 跟着本教程系列学习，结束之后你将拥有属于自己的基本HTML5游戏。
什么是HTML5游戏？
本教程系列都是关于构建HTML5游戏的。 但那到底是什么意思呢？ 好吧，当人们谈论HTLM5游戏时，他们大多将其当作流行语，因为您不能仅使用HTML5来真正创建一款体面的游戏。 原因如下：
- HTML5是一种标记语言（HTML代表超文本标记语言，最新的版本是5）
- 它仅描述网页的结构和内容，并将其链接到样式表
- 这不是一种真正意义上的编程语言
这意味着HTML5不适合编写创建游戏所需的逻辑。 那么什么是HTML5游戏？ 它是一个名称，它是通过使用一系列新的网页技术（包括HTML5，CSS3和JavaScript）构建的游戏的统称。
实际上，大多数情况下，您将使用JavaScript。 JavaScript是一种真正意义上的编程语言，您可以使用它编写游戏逻辑。 您将使用HTML5创建绘图板，并使用JavaScript在其上绘制游戏。
简而言之，每当人们谈论HTML5游戏时，他们实际上就是通过HTML5，CSS3，JavaScript所创建的游戏。
对本教程有什么期望？
在本教程系列中，您将构建一个简单的HTML5游戏，该游戏可让您通过用户输入来控制播放器。 本系列将带您完成以下步骤：
- 使用canvas构建HTML5文件
- 了解如何绘制形状和文字
- 创建游戏循环
- [动画对象和使用缓动](https://spicyyoghurt.com/tutorials/html5-javascript-game-development/create-a-smooth-canvas-animation
- 应用物理学检测碰撞
- 绘制图像和精灵动画
- 通过用户输入控制游戏对象
以下是您在制作过程中要进行的快速预览：
学习怎样创建你的游戏
本教程系列的目的是让您熟悉HTML5中的游戏编程以及一般的游戏编程。如果您以前没有做过，则需要一种新的思维方式。 您不仅可以运行一段代码，而且可以在游戏循环内每秒执行很多次，这需要一种全新的方法。
不要期待下一款Call of Duty游戏。 这只是入门的基本系列教程。 您将一无所有，然后从头开始构建游戏。
您将学习如何实现常见的游戏编程技术以及如何避免常见的错误。 您将对游戏开发原理有基本的了解。
Adobe Flash发生了什么？
现在是时候上一节简短的历史课了，以便更好地了解HTML5在浏览器游戏世界中的作用。 因为，HTML5并不总是存在。 在HTML5发行之前，人们曾经使用Adobe Flash创建浏览器游戏。
Flash非常适合制作动画和游戏之类的东西，当时并没有其他选择可以为网络创建这样的内容。 另外，作为开发人员，您在开发时不必考虑Web浏览器的兼容问题，Flash Player负责此工作。
但是，Flash的一大缺点是不支持移动端。 苹果在这方面做了很多事情，因为它不想在其移动设备上支持Flash Player，声称Flash的性能和安全性很差。 不管这些声明是否完全公平和真实，它确实成为Flash获得不良形象并失去人气的开始。
几年后，主流浏览器也越来越停止对Flash Player的支持。 在2020年底Adobe将停止更新和分发Flash Player。 这将是Flash游戏时代的最终终结。 因此，现在是HTML5占据这一位置的时候了。
HTML5的兴起
从2012年发布起，HTML5被大肆宣传为浏览器游戏的新圣杯。 它的出现应该完全让Flash过时了。
说起来容易做起来难，因为当时用HTML5创建像样的游戏并不是那么容易。 突然之间，作为开发人员，您必须考虑不同的浏览器和设备。 在所有浏览器上简化和标准化所有HTML5功能之前，花了很长时间。 看似简单的事情（例如播放声音）是一个大问题。 过去使用Flash很容易实现。
幸运的是，这些年来，这种情况已大大改善。 目前，HTML5具有强大的浏览器支持和多种支持开发的工具。 准备取代Flash成为浏览器游戏之王。
甚至Adobe Flash也进行了更新，以创建HTML5动画和游戏，并被更名为Adobe Animate，以摆脱Flash臭名昭著的声誉。
HTML5益处
HTML5与Flash相比具有的最大优势之一是可以在移动设备上运行内容。 这并不意味着使用HTML5，每个游戏都会在每个设备上自动运行。 尤其是声音和音阶等事情可能需要引起注意，但您可以使其工作。 然后，您可以向拥有手机的所有人展示游戏。 那是...每个人。
让我们开始吧！
到目前为止，这已经足够了。 现在，您对HTML5以及本教程系列的设置有了更多了解。 现在该开始构建自己的HTML5游戏了！
单击“下一步”以采取本系列的第一步，并首先使用画布设置HTML5页面。 您即将执行第一次绘图操作。