疯狂猜成语 蓝色小人头顶一个天字 答案是什么成语
互联网 & 09-21 20:17:09 & 作者：佚名 &
疯狂猜成语 蓝色小人头顶一个天字 答案是什么成语
疯狂猜成语游戏中有一个图片上面画了一个蓝色小人，头顶举一个天字，而且这个小人脚下踩一个地板，那么这个图片答案是什么呢?下面给大家讲解一下。
图片如下所示：
从图片上可以看出这个小人脚下踩的那块方砖代表大地，头上举得那块方砖上写着天字，就代表天，所以答案很好猜了呀，
疯狂猜成语蓝色小人头顶一个天字答案：顶天立地
大家感兴趣的内容
12345678910
最近更新的内容请问那个手机游戏有个黄色手柄的图标 是哪个游戏？_百度知道
请问那个手机游戏有个黄色手柄的图标 是哪个游戏？
今天玩剑魂之人卸载了 忘了是那个版本了 登陆时有黄色手柄的小图标
我有更好的答案
你直接在应用宝里面搜索这个游戏——剑魂之刃。就可以的在应用宝里面下载这个软件就是有那个黄色手柄图标的而且应用宝里面的软件功能和兼容都是比较好的，很实用在手机上打开应用宝软件搜索你所需要游戏，找到下载就可以了。&也可以通过手机连接电脑端的应用宝软件来下载的，打开PC端的应用宝软件——手机应用。可以通过搜索你所需要的游戏进行下载呢，都是很方便的。还望采纳
采纳率：81%
为您推荐：
其他类似问题
手机游戏的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。数码爱好者必备神器
中关村在线客户端
12概念产品
1102万226.4万319.6万418.8万517.2万610.9万710.7万89.5万97.8万105.9万
113.1万210.1万38.8万48.7万58.4万68.3万77.9万87.7万97万106.8万
1157万2139万3128万4116万5104万6101万792.8万889.5万980.1万1079.9万
关注公众号此内容是该系列 # 部分中的第 # 部分： HTML5 2D 游戏开发https://www.ibm.com/developerworks/cn/views/global/libraryview.jsp?series_title_by=html5+2d+游戏开发敬请期待该系列的后续内容。此内容是该系列的一部分：HTML5 2D 游戏开发敬请期待该系列的后续内容。
在系列文章的中，Snail Bait 已经具有可玩性，但还比较粗糙。在这最后一期文章中，我将向您介绍如何实现 Snail Bait
的最终版本，完善后的游戏如图 1 所示：
图 1. Snail Bait 的最终版在本文中，您将学习如何：
使用 CSS 渐变背景替换背景图像。调整游戏设置和图像。保留得分。监控帧速率，在游戏运行缓慢时显示一条警告。实现震动背景特效。追踪生命。生命之间的过渡。显示得分。在 Tweet
上发布得分。将游戏部署到服务器。参见部分，以获得最终的完整 Snail Bail 代码。使用 CSS 渐变背景替换背景图像在当前状态下，游戏启动时 Snail Bait
可加载三个图像：网站背景、游戏背景和游戏 sprite 表单。在最终版本中，在只保留了一个图像，除去了网站背景，并将游戏背景合并到 sprite 表单中。为了消除网站背景，我使用了 CSS3 线性渐变来创建图 2 中的背景：图 2. Snail Bait 的背景背景 CSS 如清单 1 中所示：
清单 1. Snail Bait 的背景（摘自 game.css） body {
/* Background from CSS3 Patterns Gallery by Anna Kassner */
background-color: #6d6
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px,
transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px,
transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%,
rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%,
rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120
...CSS3 Patterns Gallery 中保存了一些 CSS 片段，您可以复制它们来创建各种背景（参阅）。图 3 显示了一部分 Gallery 背景：
CSS3 Patterns Gallery我从 CSS3 Patterns Gallery 下载了中的 CSS，以便在 Snail Bait 中使用它。我选择了 Argyle 模式，并将背景颜色改成带阴影的蓝色。
调整游戏设置和图像在实现一个游戏时，游戏开发人员通常会不断调整动画设置和图像。对于 Snail Bait 的最后这轮调整，我将：
更改平台位置和大小。向所有红宝石和硬币添加弹跳行为。将蜗牛移动到游戏的结尾处。实现一个引爆按钮。替换硬币。显然，图 4 中展示了大多数这些更改，展示了游戏即将结束时蜗牛的射击炸弹：
图 4. 游戏即将结束时，游戏角色躲避蜗牛炸弹游戏进行到一半时，跑步小人会遇到图 5 中所示的僵局：蜜蜂位于跑步小人和下一个平台之间。要越过蜜蜂并通过这段，跑步小人必须引爆可以炸死蜜蜂的蓝色按钮。
图 5. 用来炸死守卫下一个平台的蜜蜂的蓝色按钮图 6 显示了按钮引爆和蜜蜂爆炸。但 sprite 也将被炸死，Snail Bait 取消了它们进行碰撞检测的资格。取消爆炸蜜蜂碰撞检测资格使得跑步小人可以直接越过蜜蜂跳到下一个平台。
图 6. 运作中的引爆按钮和所有 Snail Bait 动作一样，按钮引爆也是一种行为。清单 2 显示了按钮引爆行为的实现：
清单 2. 按钮引爆行为 var SnailBait = function () {
this.buttonDetonateBehavior= {
execute: function(sprite, now, fps, lastAnimationFrameTime) {
var BUTTON_REBOUND_DELAY = 1000;
if ( ! sprite.detonating) { // trigger
sprite.artist.cellIndex = 1; // flatten the button
snailBait.explode(snailBait.bees[5]);
setTimeout( function () {
sprite.artist.cellIndex = 0; // rebound
sprite.detonating = // reset trigger
}, BUTTON_REBOUND_DELAY);
清单 3 显示了 Snail Bai 如何将引爆行为添加到蓝色按钮上：
清单 3. 创建具有引爆行为的蓝色按钮 var SnailBait = function () {
SnailBait.prototype = {
createButtonSprites: function () {
var button,
blueButtonArtist = new SpriteSheetArtist(this.spritesheet,
this.blueButtonCells),
goldButtonArtist = new SpriteSheetArtist(this.spritesheet,
this.goldButtonCells);
for (var i = 0; i & this.buttonData. ++i) {
if (i === this.buttonData.length - 1) {
button = new Sprite('button',
goldButtonArtist,
[ this.paceBehavior ]);
button = new Sprite('button',
blueButtonArtist,
[ this.paceBehavior,
this.buttonDetonateBehavior]);
button.width = this.BUTTON_CELLS_WIDTH;
button.height = this.BUTTON_CELLS_HEIGHT;
this.buttons.push(button);
};回忆每一个动画帧，Snail Bait 在所有可见 sprite 上进行迭代。对于每个 sprite，Snail Bait 都将在 sprite
的行为数组上进行迭代，并调用每个行为的 execute() 方法。很多时候，按钮引爆行为的 execute() 方法什么都不做，因为按钮的 detonating 属性是 false 。在 Snail Bait 将蓝色按钮的 detonating 属性被设置为 true
时，如清单 4 所示，按钮引爆行为将：使按钮变平。使蜜蜂爆炸延迟一秒。重置按钮的原始图像。将按钮的 detonating 属性设置为 false 。从此时起，引爆行为将进入休眠状态，直至跑步小人下次跳落到该按钮上。清单 4.
暂停引爆行为 var SnailBait = function () {
// The collide behavior is attached to the runner
this.collideBehavior = {
detonateButton: function (otherSprite) {
otherSprite.detonating = // trigger
processCollision: function (sprite, otherSprite) {
if (otherSprite.value) {
this.adjustScore(otherSprite);
if ('button' === otherSprite.type && sprite.falling)) {
this.detonateButton(otherSprite);
};保留得分从本系列的开始，Snail Bait 一直有一个处于非工作状态的计分板。现在是时候让其发挥计分板的功效了。第一步是为某些类型的 sprite 分配一些值。例如，清单 5 显示了该游戏的 createRubySprites() 方法，为每个红宝石分配了一个 100 点的值：
清单 5. 分配 sprite 值 SnailBait.prototype = {
createRubySprites: function () {
rubyArtist = new SpriteSheetArtist(this.spritesheet, this.rubyCells);
for (var i = 0; i & this.rubyData. ++i) {
ruby = new Sprite('ruby', rubyArtist,
[ new CycleBehavior(this.RUBY_SPARKLE_DURATION,
this.RUBY_SPARKLE_INTERVAL),
new BounceBehavior(800, 600, 120) ]);
ruby.width = this.RUBY_CELLS_WIDTH;
ruby.height = this.RUBY_CELLS_HEIGHT;
ruby.value = 100;
this.rubies.push(ruby);
如所示，当跑步小人与其他具有某个值的 sprite 发生碰撞时，碰撞行为的 adjustScore() 方法就会调整游戏得分，并更新 HTML score 元素。清单 6 显示了 adjustScore() 方法：
清单 6. 碰撞后调整得分 var SnailBait = function () {
// The collide behavior is attached to the runner
this.collideBehavior = {
adjustScore: function (otherSprite) {
if (otherSprite.value) {
snailBait.score += otherSprite.
snailBait.score = snailBait.score & 0 ? 0 : snailBait.
snailBait.scoreElement.innerHTML = snailBait.
};监控帧速率，必要时显示一条警告和运行在严格控制环境中的控制台游戏不一样，HTML5 游戏运行比较混乱。视频播放器、OS 备份软件，甚至一些普通的东西（像带有半透明背景的终端窗口）都可能使得性能最佳的游戏大打折扣。因为您无法控制 HTML5 游戏的运行环境，因此，您必须监控帧速率，当游戏慢得难以承受时向玩家发出警告。图 7 显示了 Snail Bait 的警告：
图 7. 运行缓慢警告在警告玩家游戏运行太慢时，Snail Bait 会显示当前帧速率。Snail Bait
通过在运行时将帧速率插入其他静态文本中完成这一操作。清单 7 显示了此静态文本的 HTML：
清单 7. 运行缓慢警告的 HTML &html&
&div id='arena'&
&!-- Running slowly........................................--&
&div id='running-slowly'&
&h1&Snail Bait is running slowly&/h1&
&p id='slowly-warning'&&/p&
&p&High-performance applications, such as video players or
software that backs up your computer, can slow this game down.
For best results, hide all other windows on your desktop and
close CPU- or GPU- intensive apps when you play HTML5 games.
&p&You should also upgrade your browser to the latest version and make
sure that it has hardware accelerated HTML5 Canvas. Any version of Chrome
starting with version 18, for example, has hardware accelerated
Canvas. Here is a link where you can download the
&a href='http://www.google.com/chrome/'&latest version of Chrome&/a&.
&a id='slowly-okay' href='#'&
id='slowly-dont-show' href='#'&
Do not show this warning again
清单 8 显示了 Snail Bait 如何显示和隐藏运行缓慢警告：
清单 8. 显示和隐藏运行缓慢警告 SnailBait.prototype = {
revealRunningSlowlyWarning: function (now, averageSpeed) {
this.slowlyWarningElement.innerHTML =
"Snail Bait is running at " +
"&font color='red'& averageSpeed.toFixed(0)" + "&/font&" +
" frames/second (fps), but it needs more than " +
this.runningSlowlyThreshold + " fps for the game to work correctly."
this.runningSlowlyElement.style.display = 'block';
setTimeout( function () {
snailBait.runningSlowlyElement.style.opacity = 1.0;
}, this.SHORT_DELAY);
this.lastSlowWarningTime =
hideRunningSlowlyWarning: function () {
snailBait.runningSlowlyElement.style.display = 'none';
snailBait.runningSlowlyElement.style.opacity = 0;
};当 Snail Bait
显示运行缓慢警告时，它会创建警告文本，然后将该文本分配给 slowly-warning 段落元素。然后将该元素的 display 属性设置为 block ，以便让浏览器显示它。不过，该元素最初是透明的，因此会有一个短暂的延时，revealRunningSlowlyWarning() 方法将该元素的透明度设置为 1.0，使其变成不透明的。该设置触发了一个 CSS 转换，元素从透明逐渐变成不透明大约需要 1 秒钟的时间。清单 9 显示了 running-slowly 警告元素的 CSS：
清单 9. running-slowly 警告元素的 CSS #running-slowly {
width: 600
margin-top: 85
margin-left: 90
text-align:
background: rgba(255,255,255,0.85);
text-align:
padding: 0px 20px 20px 20
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
-webkit-box-shadow: rgba(0,0,0,0.5) 4px 4px 8
-moz-box-shadow: rgba(0,0,0,0.5) 4px 4px 8
-o-box-shadow: rgba(0,0,0,0.5) 4px 4px 8
box-shadow: rgba(0,0,0,0.5) 4px 4px 8
opacity: 0;
z-index: 2;
}当 Snail Bait 运行时，它会监控帧速率，如清单 10 所示：
清单 10. 监控帧速率 SnailBait.prototype = {
animate: function (now) {
if (snailBait.paused) {
setTimeout( function () {
requestNextAnimationFrame(snailBait.animate);
}, snailBait.PAUSED_CHECK_INTERVAL);
snailBait.fps = snailBait.calculateFps(now);
if (snailBait.windowHasFocus && !snailBait.paused &&
snailBait.showSlowWarning &&
now - snailBait.lastSlowWarningTime &
snailBait.FPS_SLOW_CHECK_INTERVAL) {
snailBait.checkFps(now);
snailBait.draw(now);
requestNextAnimationFrame(snailBait.animate);
checkFps: function (now) {
var averageS
this.updateSpeedSamples(snailBait.fps);
averageSpeed = this.calculateAverageSpeed();
if (averageSpeed & this.runningSlowlyThreshold) {
this.revealRunningSlowlyWarning(now, averageSpeed);
每隔 FPS_SLOW_CHECK_INTERVAL 秒（这里设置成 4 秒），Snail Bait 就会通过更新一组速度样本和计算平均速度来检查帧速率。如果平均速度小于游戏缓慢运行阈值，Snail Bait 就会显示运行缓慢警告。清单 11 显示了更新速度样本和计算平均速度的 Snail Bait 方法：
清单 11. 更新速度样本并计算平均速度 SnailBait.prototype = {
updateSpeedSamples: function (fps) {
this.speedSamples[this.speedSamplesIndex] =
if (this.speedSamplesIndex !== this.NUM_SPEED_SAMPLES-1) {
this.speedSamplesIndex++;
this.speedSamplesIndex = 0;
calculateAverageSpeed: function () {
total = 0;
for (i=0; i & this.NUM_SPEED_SAMPLES; i++) {
total += this.speedSamples[i];
return total/this.NUM_SPEED_SAMPLES;
};当玩家单击运行缓慢警告的 OK按钮时，Snail Bait 会隐藏警告并重置速度样本。当玩家单击 Do not show this warning again 按钮时，Snail Bait 会隐藏警告并设置一个标记，以便不再监控帧速率。这两个事件处理程序的代码如清单 12 所示：
清单 12. 运行缓慢事件处理程序 snailBait.slowlyDontShowElement.onclick = function (e) {
snailBait.hideRunningSlowlyWarning();
snailBait.showSlowWarning =
snailBait.slowlyOkayElement.onclick = function (e) {
snailBait.hideRunningSlowlyWarning();
snailBait.speedSamples = [60,60,60,60,60,60,60,60,60,60]; // reset
};添加特殊效果当跑步小人和其他 sprite 碰撞并发生爆炸时，Snail Bait 最终版本会震动游戏背景。清单 13 显示了跑步小人碰撞行为的一部分，发生这样的碰撞时，该行为调用了 Snail Bait 的 shake() 方法：
清单 13. 背景震动 var SnailBait = function () {
// The collide behavior is attached to the runner
this.collideBehavior = {
processCollision: function (sprite, otherSprite) {
if ('bat' === otherSprite.type || 'bee' === otherSprite.type
'snail' === otherSprite.type || 'snail bomb' === otherSprite.type) {
snailBait.explode(sprite);
snailBait.shake();
setTimeout( function () {
snailBait.loseLife();
snailBait.reset();
snailBait.fadeAndRestoreCanvas();
}, snailBait.EXPLOSION_DURATION);
Snail Bait 的 shake() 方法由一系列对 setTimeout() 的嵌套调用组成，如清单 14 所示：
清单 14. 实现 shake() 方法 SnailBait.prototype = function () {
shake: function () {
var SHAKE_INTERVAL = 90, // milliseconds
v = snailBait.BACKGROUND_VELOCITY,
ov = snailBait.bgV // ov means original velocity
this.bgVelocity = -this.BACKGROUND_VELOCITY;
setTimeout( function (e) {
snailBait.bgVelocity =
setTimeout( function (e) {
snailBait.bgVelocity = -v;
setTimeout( function (e) {
snailBait.bgVelocity =
setTimeout( function (e) {
snailBait.bgVelocity = -v;
setTimeout( function (e) {
snailBait.bgVelocity =
setTimeout( function (e) {
snailBait.bgVelocity = -v;
setTimeout( function (e) {
snailBait.bgVelocity =
setTimeout( function (e) {
snailBait.bgVelocity = -v;
setTimeout( function (e) {
snailBait.bgVelocity =
setTimeout( function (e) {
snailBait.bgVelocity = -v;
setTimeout( function (e) {
snailBait.bgVelocity =
setTimeout( function (e) {
snailBait.bgVelocity =
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
};Snail Bait 的 shake() 方法每隔 90 毫秒改变一次游戏背景速度方向，制造一种震动的错觉。
追踪生命Snail Bait 最终版在游戏开始时给玩家提供了 3 次生命。当跑步小人与怀有恶意的 sprite 相撞并发生爆炸时，玩家会失去一次生命，Snail Bait
会让跑步小人返回到游戏开始处。
Snail Bait 将在游戏画布上显示剩余生命数，每个跑步小人的微型图标代表一次生命。这些图像是在游戏的 HTML 中指定的，如清单 15 所示：
生命元素 &html&
&div id='arena'&
&div id='header'&
&div id='score'&0&/div&
&div id='lives'&
&img id='life-icon-left'
src='images/runner-small.png'/&
&img id='life-icon-middle' src='images/runner-small.png'/&
&img id='life-icon-right'
src='images/runner-small.png'/&
&/html&在运行时，Snail Bait 的 loseLife() 方法（在跑步小人与怀有恶意的 sprite 相撞时调用）会更新 lives 元素。清单 16 显示了 updateLivesElement 函数和 loseLife() 方法：
清单 16. 更新生命元素 SnailBait.prototype = {
updateLivesElement: function () {
if (this.lives === 3) {
this.lifeIconLeft.style.opacity
this.lifeIconMiddle.style.opacity = 1.0;
this.lifeIconRight.style.opacity
else if (this.lives === 2) {
this.lifeIconLeft.style.opacity
this.lifeIconMiddle.style.opacity = 1.0;
this.lifeIconRight.style.opacity
else if (this.lives === 1) {
this.lifeIconLeft.style.opacity
this.lifeIconMiddle.style.opacity = 0;
this.lifeIconRight.style.opacity
else if (this.lives === 0) {
this.lifeIconLeft.style.opacity
this.lifeIconMiddle.style.opacity = 0;
this.lifeIconRight.style.opacity
loseLife: function () {
this.lives--;
this.updateLivesElement();
if (this.lives === 1) {
snailBait.revealToast('Last chance!');
if (this.lives === 0) {
this.gameOver();
};生命间的过渡玩家失去一次生命后，除了减少生命图标数量之外，Snail Bait 还会让画布逐渐淡出，直至几乎透明，如图 8 所示。然后让画布逐渐淡入，直至完全不透明。Snail Bait 还会让跑步小人从第三个（最高的）跑道上掉下来，以强调新生命的开始。
图 8. 在发生两次生命之间的游戏过渡时，画布会显示淡出效果
清单 17 显示了 Snail Bait 的 reset() 方法，该方法将调用中跑步小人的碰撞行为：
清单 17. 画布淡出和恢复 SnailBait.prototype = {
fadeAndRestoreCanvas: function () {
snailBait.canvas.style.opacity = 0.2;
setTimeout( function () {
snailBait.canvas.style.opacity = 1.0;
resetRunner: function () {
snailBait.runner.exploding =
snailBait.runner.visible =
snailBait.runner.opacity = snailBait.OPAQUE;
snailBait.runner.artist.cells = snailBait.runnerCellsR
if (snailBait.runner.jumping) { snailBait.runner.stopJumping(); }
if (snailBait.runner.falling) { snailBait.runner.stopFalling(); }
reset: function () {
var CANVAS_TRANSITION_DURATION = 2000,
CONTINUE_RUNNING_DURATION = 1000;
this.resetRunner();
setTimeout( function () {
snailBait.backgroundOffset =
snailBait.INITIAL_BACKGROUND_OFFSET;
snailBait.spriteOffset = snailBait.INITIAL_BACKGROUND_OFFSET;
snailBait.bgVelocity = snailBait.INITIAL_BACKGROUND_VELOCITY;
snailBait.runner.track = 3;
snailBait.runner.top = snailBait.calculatePlatformTop(snailBait.runner.track) -
snailBait.runner.
for (var i=0; i & snailBait.sprites. ++i) {
snailBait.sprites[i].visible =
setTimeout( function () {
snailBait.runner.runAnimationRate = 0; // stop running
}, CONTINUE_RUNNING_DURATION);
}, CANVAS_TRANSITION_DURATION);
};reset() 方法将会重置画布，然后通过以下操作准备开始一次新生命：将 sprite 和背景偏移量重置为其初始值。将跑步小人重新放回第三条跑道。让所有游戏 sprite 可见。
调用 reset() 后，在下一个动画帧开始时，跑步小人开始降落，因为她在第三跑道上，下面没有平台。因此，她的 fall 行为启动了下降操作，她会不断下降，直至降落在第一个平台上。
显示得分游戏结束后，Snail Bait 将会显示得分，如图 9 所示：图 9. 在游戏结束时显示得分显示和隐藏得分的 Snail Bait 方法如清单 18 所示：
清单 18. 显示和隐藏得分 SnailBait.prototype = {
gameOver: function () {
snailBait.revealCredits();
restartGame: function () {
this.hideCredits();
this.lives = this.MAX_NUMBER_OF_LIVES;
this.updateLivesElement();
this.score = 0;
this.updateScoreElement();
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);
hideCredits: function () {
var CREDITS_REVEAL_DELAY = 2000;
this.creditsElement.style.opacity = this.TRANSPARENT;
setTimeout( function (e) {
snailBait.creditsElement.style.display = 'none';
}, this.CREDITS_REVEAL_DELAY);
Snail Bait 的 gameOver() 方法（由 loseLife() 方法调用，参见）将会显示得分，而 restartGame() 方法将会隐藏得分。restartGame() 方法是由（与得分的 “再玩一次” 链接相关的）事件处理程序调用。事件处理程序如清单 19 所示：
得分屏幕事件处理程序 snailBait.newGameLink.onclick = function (e) {
snailBait.restartGame();
};在 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 上发布得分 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 脚本 #!/bin/bash
for f in `find . -name "*.js"`
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 脚本 #!/bin/bash
rm -rf tmp
echo 'Compressing...'
./compress.sh
echo 'Deploying...'
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 游戏开发还涉及到我在本系列文章中没有讨论的其他许多方面，比如：
实现一个时间系统来修改整个游戏的时间流动。在服务器上保存最高得分和实时游戏指标。创建一个开发人员后门，为开发人员提供对特殊能力的访问。实现模拟烟火的实践系统。调整游戏，使之适用于移动设备。我鼓励您学习所有这些主题，然后开始开发您自己的 HTML5 2D 游戏。
下载资源 (wa-html5-game10-code.zip | 12.9MB)相关主题：（David Geary，Prentice Hall，2012 年）：David Geary 的书广泛介绍了 Canvas API 与游戏开发。您还可以查看。
：在任何支持 HTML5 的浏览器（最好是 Chrome V18 以上版本）上在线玩 Snail Bait。
：访问 Lea Verou 的库来下载或提交模式。
：了解 YUI Compressor。
：观看 David Geary 在 Strange Loop 2011 上的演讲。：观看 David Geary 在 Strange Loop 2011 上的演讲。
：在 Wikipedia 上阅读有关平台游戏的资料。
：在 Wikipedia 上阅读有关 side-scroller 视频游戏的资料。
：阅读关于 Strategy 设计模式的 Wikipedia 文章。
专区：找到涵盖各种基于
Web 解决方案的文章。访问，获取大量技术文章和技巧、教程、标准和 IBM 红皮书 ®。：您可以下载这个面向 Android 的流行开源平台视频游戏的资源。大多数 Snail Bait sprite 都来自 Replica Island（在得到许可的情况下使用）。
添加或订阅评论，请先或。
有新评论时提醒我
static.content.url=http://www.ibm.com/developerworks/js/artrating/SITE_ID=10Zone=Web developmentArticleID=942671ArticleTitle=HTML5 2D 游戏开发: 结束游戏publish-date=