HTML 5 2D 游戏开发:Snail Bait 简介 - 面向对象网,web开发,html,学习,对象 - 面向对象技术开发

面向对象技术开发

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

HTML 5 2D 游戏开发:Snail Bait 简介

来源: www.bianceng.cn 阅读:

软件开发的优势在于:在合理的范围内让任何您能想象到的事物在屏幕上变成现实。不像其他领域受一些 物理条件的束缚,软件开发人长期以来一直使用图形化 API 和 UI 工具包来实现富有创造性和引人注目的应 用程序。最富有创造性的软件开发大概是游戏编程;比起让游戏景愿变成现实,优秀的创意就可使您通过少许 努力便可获得更多的收益。
平台视频游戏(Platform video games)

Donkey Kong、Mario Bros.、Sonic the Hedgehog 和 Braid 是众所周知的畅销游戏,它们都是平台游戏。平台游戏曾一度占据视 频游戏销售的三分之一。今天,它们的市场份额大幅下降,但仍有许多成功的平台游戏。

然而,有益 的并不意味着容易的;事实上,恰恰相反。实现游戏(特别是视频游戏)需要对编程有着非凡的理解,能够很 好地把握抓图和动画,还需要掌握大量数学知识、艺术和创造力的结合使用。而这仅仅只是一个开头,成功的 游戏开发人员需要花费大量时间来雕琢其游戏,改良游戏玩法和图像,除此之外,还要实现很多与游戏玩法无 关的方面,比如记分牌、指令、生命和级别之间的动画以及残局序列 (endgame sequences)。

本系列 旨在向您显示如何实现一个 HTML5 视频游戏,这样您就可以开始创建自己的游戏了。

游戏:Snail Bait

在本系列中,我首先会向您展示如何使用 HTML5 Canvas API 实现一个平台视频游戏。该游戏是 Snail Bait,如图 1 所示。您可以在线播放该游戏;请参阅 参考资料,以获取该游戏的链接。确保您的浏览 器中有 Canvas 硬件加速器(最近刚刚在大多数浏览器上实现,包括 Chrome V18 以上的版本);否则, Snail Bait 性能会大幅降低(参阅 HTML5 Canvas 性能 侧栏,获取有关的详细信息。)

图 1. Chorme 上运行的 Snail Bait

 Chorme 上运行的 Snail Bait 屏
幕截图  

Snail Bait 是一款经典的平台游戏,游戏的主人公,我通常将其简称为跑步小人,在水平移 动的浮动平台奔跑跳跃。跑步小人的最终目标是到达一个有规律地跳动的平台,并在该级别结束时获得一枚黄 金纽扣。图 1 中显示了跑步小人、有规律地跳动的平台和黄金纽扣。

玩家使用键盘控制跑步小人:d 向左移动,k 向右移动,j 或 f 跳起,p 暂停游戏。

游戏开始时,您有 3 条生命。游戏画布左上方 会显示代表剩余生命数的跑步小人图标,正如您在 图 1 中所看到的那样。在跑步小人达到该级别终点的过程 中,她必须避开一些坏家伙(蜜蜂、蝙蝠和蜗牛),同时试着抓住贵重物品,比如硬币、红宝石和蓝宝石。如 果跑步小人碰到坏家伙,就会流血并失去一条生命,并且您必须回到该级别的起点。当跑步小人碰到 “好人 ” 时,您的积分将会增加,并会听到一个令人愉悦的声音。
WASD?

按照惯例,计算机游戏通常 使用 w、a、s 和 d 键来控制游戏。该惯例的形成主要是为了让右手玩家同时使用鼠标和键盘。也可以让右手 自由地按下空格键和修饰键(比如 CTRL 或 ALT)。Snail Bait 没有使用 WASD,因为它无法从鼠标或修饰键 接收输入。但是您可以通过修改游戏代码来使用任意组合键,这个很容易。

坏家伙通常只是在附近徘 徊,等待跑步小人撞上它。但是,蜗牛会定期发射蜗牛炸弹(图 1 中心显示的银球),炸弹和其他坏家伙一 样,碰到跑步小人就时会炸毁她。

结束游戏的方法有两种:您失去 3 次生命,或者您到达有规律地跳 动的平台(击中黄金纽扣就会有奖励积分)。不管采用哪种方式,游戏结束积分均如图 2 所示:

图 2. 游戏积分

Snail Bait 残局序列的屏幕截图

您在 图 1 中无法看到的是:所有一切都在不停的滚动,除了跑步小人,她的运动由您来控制。因 为有滚动,所以将 Snail Bait 归类为 side-scroller 平台游戏。虽然这不是游戏中惟一的动作,但它引导 我发现了 sprite 及其行为。

Tags:
相关文章列表: