HTML5 GAME TUTORIAL(一): Develop an HTML5 game译

使用HTML5和JavaScript创建自己的游戏。了解游戏循环，动画和精灵图、碰撞检测、物理和用户输入。跟着本教程系列学习，结束之后你将拥有属于自己的基本HTML5游戏。

什么是HTML5游戏？

HTML5 logo

本教程系列都是关于构建HTML5游戏的。但那到底是什么意思呢？好吧，当人们谈论HTLM5游戏时，他们大多将其当作流行语，因为您不能仅使用HTML5来真正创建一款体面的游戏。原因如下：

这意味着HTML5不适合编写创建游戏所需的逻辑。那么什么是HTML5游戏？它是一个名称，它是通过使用一系列新的网页技术（包括HTML5，CSS3和JavaScript）构建的游戏的统称。

实际上，大多数情况下，您将使用JavaScript。 JavaScript是一种真正意义上的编程语言，您可以使用它编写游戏逻辑。您将使用HTML5创建绘图板，并使用JavaScript在其上绘制游戏。

简而言之，每当人们谈论HTML5游戏时，他们实际上就是通过HTML5，CSS3，JavaScript所创建的游戏。

在本教程系列中，您将构建一个简单的HTML5游戏，该游戏可让您通过用户输入来控制播放器。本系列将带您完成以下步骤：

本教程系列的目的是让您熟悉HTML5中的游戏编程以及一般的游戏编程。如果您以前没有做过，则需要一种新的思维方式。您不仅可以运行一段代码，而且可以在游戏循环内每秒执行很多次，这需要一种全新的方法。

不要期待下一款Call of Duty游戏。这只是入门的基本系列教程。您将一无所有，然后从头开始构建游戏。

您将学习如何实现常见的游戏编程技术以及如何避免常见的错误。您将对游戏开发原理有基本的了解。

Adobe Flash logo

现在是时候上一节简短的历史课了，以便更好地了解HTML5在浏览器游戏世界中的作用。因为，HTML5并不总是存在。在HTML5发行之前，人们曾经使用Adobe Flash创建浏览器游戏。

Flash非常适合制作动画和游戏之类的东西，当时并没有其他选择可以为网络创建这样的内容。另外，作为开发人员，您在开发时不必考虑Web浏览器的兼容问题，Flash Player负责此工作。

但是，Flash的一大缺点是不支持移动端。苹果在这方面做了很多事情，因为它不想在其移动设备上支持Flash Player，声称Flash的性能和安全性很差。不管这些声明是否完全公平和真实，它确实成为Flash获得不良形象并失去人气的开始。

几年后，主流浏览器也越来越停止对Flash Player的支持。在2020年底Adobe将停止更新和分发Flash Player。这将是Flash游戏时代的最终终结。因此，现在是HTML5占据这一位置的时候了。

从2012年发布起，HTML5被大肆宣传为浏览器游戏的新圣杯。它的出现应该完全让Flash过时了。

说起来容易做起来难，因为当时用HTML5创建像样的游戏并不是那么容易。突然之间，作为开发人员，您必须考虑不同的浏览器和设备。在所有浏览器上简化和标准化所有HTML5功能之前，花了很长时间。看似简单的事情（例如播放声音）是一个大问题。过去使用Flash很容易实现。

幸运的是，这些年来，这种情况已大大改善。目前，HTML5具有强大的浏览器支持和多种支持开发的工具。准备取代Flash成为浏览器游戏之王。

甚至Adobe Flash也进行了更新，以创建HTML5动画和游戏，并被更名为Adobe Animate，以摆脱Flash臭名昭著的声誉。

HTML5与Flash相比具有的最大优势之一是可以在移动设备上运行内容。这并不意味着使用HTML5，每个游戏都会在每个设备上自动运行。尤其是声音和音阶等事情可能需要引起注意，但您可以使其工作。然后，您可以向拥有手机的所有人展示游戏。那是...每个人。

Run your HTML5 game on all devices

到目前为止，这已经足够了。现在，您对HTML5以及本教程系列的设置有了更多了解。现在该开始构建自己的HTML5游戏了！

单击“下一步”以采取本系列的第一步，并首先使用画布设置HTML5页面。您即将执行第一次绘图操作。

原文地址：https://www.cnblogs.com/xingguozhiming/p/13886456.html