HTML 5 2D 游戏开发:图形和动画 - 面向对象网,web开发,html,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Html > 正文

HTML 5 2D 游戏开发:图形和动画

来源: www.bianceng.cn 阅读:

图形和动画是任何视频游戏最根本的方面,所以在本文中,我将从 Canvas2D API 的简要介绍开始,对 Snail Bait 的中央动画的实现进行讨论。在本文中,您将学习如何:

将图像和图形基元绘制到画布上

创建流畅的、无闪烁的动画

实现游戏循环

以帧数每秒为单位监视动画的速度

滚动游戏的背景

使用视差来模拟三维效果

实现基于时间的运动

本文中所讨论的代码的最终结果如图 1 所示:

图 1. 滚动背景并监视帧速率

\

背景和平台水平 滚动。这些平台在前景中,所以它们的移动明显快于背景,这样会形成一个温和的视差效果。在游戏开始时, 背景由右至左滚动。在结束某个级别时,背景和平台开始逆转方向。

在开发的这个阶段,跑步者不动 。此外,游戏还没有经过碰撞检测,所以当跑步者的下面没有平台时,她会漂浮在半空中。

最后,游 戏画布的上方和左侧的图标会显示剩余生命的数量(如 本系列第一篇文章中的图 1 所示)。目前,该游戏会 在这个位置上显示当前动画速度(以帧数每秒为单位)。

即时模式图形

Canvas 是一 个即时模式 图形系统,这意味着它会即时绘制您指定的内容,然后即时忘记。可伸缩矢量图形 (Scalable Vector Graphics, SVG) 等其他图形系统实现了保留模式 图形,这意味着它们会保存一个将要绘制的对象的 列表。由于不会因保存显示列表而产生开销,所以 Canvas 的速度比 SVG 更快一些;但是,如果您想保存一 个用户可以操作的对象列表,则必须自己在 Canvas 中实现该功能。

在继续后面的操作之前,您可能 想尝试创建一个这类游戏,因为它就在 图 1 里;如果您创建了这样的游戏,就会更容易理解相关的代码。( 请参阅 下载,获得本期的 Snail Bait 实现。)

HTML5 Canvas 概述

Canvas 2D 上下文提供了 一个广泛的图形 API,让您可以在平台视频游戏中实现文本编辑器中的一切。在我撰写这篇文章的时候,该 API 包含了超过 30 个方法,但 Snail Bait 只使用了其中的极少数,如表 1 所示:

表 1. Snail Bait 使用的 Canvas 2D 上下文方法

\

Tags:
相关文章列表: