如何使用SimpleGame构建动画。 js您的HTML5游戏 - 傻瓜

可以构建一个简化所有各种HTML5游戏引擎功能的库。考虑使用库：simpleGame。 JS。这个库很容易使用，完全有能力进行复杂的游戏开发。要开始，您只需要了解两个对象：

这个代码实际上比看上去更复杂。以下是它的作用：

它为页面添加一个画布。 灰色矩形实际上是一个已经自动添加到页面的画布标签。它开始一个游戏循环。
该程序的游戏循环已经以每秒20帧的速度运行。它包含一个精灵。 球图像是一个精灵，它可以在任何方向上移动任何速度，还可以内置碰撞检测等其他有趣的功能。
球正在移动。
当它离开一边时，会自动包裹到屏幕的另一侧。
以下是整个代码清单： redBall。 HTML //简单的游戏，带有单个移动球var场景; var球;函数init（）{scene = new Scene（）; ball = new Sprite（场景，“redBall.png”，50,50）;球。 setMoveAngle（180）;球。（3）setSpeed;现场。 start（）;} //结束init函数update（）{scene。明确（）;球。更新（）;} //结束更新

您从一个基本的HTML5页面开始，添加一些功能将其转换为游戏环境。

如何构建游戏页面

首先构建底层页面：

从HTML5页面开始。

您可以使用您用于其他Web开发的相同工具。像为其他HTML5文档一样构建一个基本的HTML5模板。

导入simpleGame。 js库。

这个图书馆在网站上免费提供。使用标签导入库。将src属性设置为库的名称（simpleGame.js）。
保持HTML简单。

你不需要太多。游戏引擎将创建一个包含场景的画布。您可以在页面上放置标题，说明或其他工具（如记分板），但游戏引擎将完成大部分工作。
当正文加载时调用init（）。

身体加载时调用函数是很常见的。将onload =“init（）”添加到body标签以调用init（）方法。
创建第二个脚本标签以包含您的代码。

您需要为自定义代码添加第二个脚本标记。将其放置在导入库的标签后面。
在脚本中放置两个函数。所有的simpleGame程序至少有两个函数：init（）在启动时发生，而update（）每帧发生一次。

如何初始化您的游戏
游戏的初始化部分在页面加载时发生。主要是设置精灵和其他资源。这是代码：

var scene; var球;函数init（）{scene = new Scene（）; ball = new Sprite（场景，“redBall.png”，50,50）;球。 setMoveAngle（180）;球。 setSpeed（3）;} // end init

定义一个变量来包含场景。

每个simpleGame游戏都至少有一个场景对象。定义任何功能之外的场景，所有这些功能都可以使用。你将会在init（）函数中创建场景。

为每个精灵定义一个变量。

游戏中的每个精灵都需要属于一个全局变量。您将在init（）函数中创建精灵，但是您需要将该变量提供给所有函数。

构建init（）函数。
这个函数被onload调用。它将在页面加载到内存后运行。

创建场景。
要构建场景，请创建场景类的实例。你真正说的是“让我成为一个场景对象，并调用这个特定的实例”场景。 '“现场不需要任何参数。

创建球精灵。
球是一个雪碧实例。为了制作一个精灵，你需要多一点的信息。你需要一个场景，一个图像的文件名，宽度和高度。

设定球的移动角度。
您可以改变球移动的角度。角度在地图上以度数度量。

设定球的移动速度。
你也可以确定球的速度。

启动场景。
完成所有设置后，告诉场景开始。

更新游戏动画
启动场景后，计时器将开始。每秒二十次，它会在您的页面上调用一个名为update（）的函数。所以，你需要有这样的功能，它需要有一些代码让你的游戏运行。 update（）函数也不是非常困难。功能更新（）{场景。明确（）;球。 update（）;} //结束更新

update（）函数通常做三件事：

业务的第一步是清理上一个屏幕造成的混乱。 Scene对象具有clear（）函数。

检查事件：

通常情况下，你检查事件，如用户输入，精灵彼此碰撞，精灵离开屏幕，或其他。对于这个简单的动画，唯一的事件是离开屏幕的精灵，并且与该动作相关的行为已经被自动化。

更新每个精灵：

屏幕更新的最后部分是更新精灵。当你更新一个精灵的时候，它会画出新的位置。 如果你不清除屏幕，会发生什么情况。所有的精灵动作都会画在画布上，看起来像是一个大的污点，而不是一个移动的球。