HTML5 2D 游戏开发 结束游戏（9）在 Tweet 上发布得分

look_w

在 Tweet 上发布得分许多 HTML5 游戏都具有社交层面，比如在 Twitter 上发布得分，或者与游戏中的其他玩家进行交互。游戏结束后，Snail Bait  玩家可以通过单击得分显示（参见 ）中的 Tweet my score链接，将其得分发布在 Twitter 上。玩家浏览器在一个新的选项卡中打开 Twitter，Snail Bait 自动进入 compose-new-tweet 对话框中的某个准备发送的推文中。图 10 显示了一个示例：
图 10. 发布一个得分推文Snail Bait  通过构建一个 URL 字符串并将它分配给 “Tweet my score” 链接的 href 属性在 Tweet 上发布得分，如清单 20 所示：
清单 20. 在 Tweet 上发布得分

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

SnailBait = function () {   ...   this.TWEET_PREAMBLE = 'https://twitter.com/intent/tweet?text=I scored ';   this.TWEET_PROLOGUE = ' playing this HTML5 Canvas platformer: ' +                         'http://bit.ly/NDV761 &hashtags=html5';   ... }; SnailBait.prototype = {   ...       revealCredits: function () {      this.creditsElement.style.display = 'block';      this.revealLivesIcons();      this.tweetElement.href = TWEET_PREAMBLE + this.score + TWEET_PROLOGUE;      setTimeout( function () {         snailBait.creditsElement.style.opacity = 1.0;      }, snailBait.SHORT_DELAY);   },   ... };

部署到服务器将一个 HTML5 游戏部署到服务器会带来两个主要问题：游戏开始时必须将大量数据从客户端传输到服务器端，而且必须在客户端和服务器之间多次往返。理想情况下，应该传输尽可能少的数据，尽可能地少发送 HTTP 请求。为了实现这些目标，Snail Bait 将执行以下三个步骤：

• 压缩 JavaScript 文件。
• 将所有 JavaScript 文件复制到某个文件（all.js）中。
• 压缩 JavaScript、CSS 和 HTML。

首先，一个简单的 shell 脚本将会找到所有 Snail Bait JavaScript 文件，然后使用 YUI 压缩器对每个文件进行压缩（参阅 ，获取关于压缩器的更多信息），如清单 21 所示：
清单 21. 压缩 Snail Bait 的 JavaScript 文件的 Shell 脚本

1 2 3 4 5 6 7 8 9

#!/bin/bash mkdir tmp for f in `find . -name "*.js"`   do      echo 'Compressing ' $f         java -jar ~/Utilities/yuicompressor-2.4.7.jar $f >> tmp/all.js   done

压缩文件被串联成一个名为 all.js 的 JavaScript 文件，它包含在 Snail Bait 的 HTML 文件中。
如清单 22 所示，其他 shell 脚本可通过运行 中的压缩脚本并压缩游戏的 JavaScript、HTML 和 CSS 来部署游戏：
清单 22. 部署 Snail Bait 的 shell 脚本

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#!/bin/bash rm -rf tmp rm all.js rm *.gz echo 'Compressing...' echo ./compress.sh echo 'Deploying...' echo gzip < all.js > all.js.gz gzip < index.html > index.html.gz gzip < snailbait.css > snailbait.css.gz rm -rf tmp

您必须配置服务器来接受 ZIP 文件，让其使用压缩文件而不是原始文件。各个服务器中的配置细节可能各不相同。
结束语本文介绍了很多基础内容，整个系列中都有许多基础内容。您已经了解了整个 Snail Bait 开发过程，从 （仅显示了背景、跑步小人和平台）中的简单介绍，到一个经过完善的游戏。您还学习了如何使用 2D Canvas API 以及其他 HTML5 API（比如 requestAnimationFrame ）来实现滚动背景和视差。您已经实现了 sprite 和 sprite 行为。您还了解了如何让时间停滞来实现非线性运动，以及如何如何检测碰撞并为 sprite 制作动画效果。但是 2D 游戏开发还涉及到我在本系列文章中没有讨论的其他许多方面，比如：

• 实现一个时间系统来修改整个游戏的时间流动。
• 在服务器上保存最高得分和实时游戏指标。
• 创建一个开发人员后门，为开发人员提供对特殊能力的访问。
• 实现模拟烟火的实践系统。
• 调整游戏，使之适用于移动设备。