HTML5 2D 游戏开发 结束游戏（1）

look_w

图 1. Snail Bait 的最终版在本文中，您将学习如何：

• 使用 CSS 渐变背景替换背景图像。
• 调整游戏设置和图像。
• 保留得分。
• 监控帧速率，在游戏运行缓慢时显示一条警告。
• 实现震动背景特效。
• 追踪生命。
• 生命之间的过渡。
• 显示得分。
• 在 Tweet  上发布得分。
• 将游戏部署到服务器。

参见 部分，以获得最终的完整 Snail Bail 代码。
使用 CSS 渐变背景替换背景图像在当前状态下，游戏启动时 Snail Bait  可加载三个图像：网站背景、游戏背景和游戏 sprite 表单。在最终版本中，在只保留了一个图像，除去了网站背景，并将游戏背景合并到 sprite 表单中。为了消除网站背景，我使用了 CSS3 线性渐变来创建图 2 中的背景：
图 2. Snail Bait 的背景背景 CSS 如清单 1 中所示：
清单 1. Snail Bait 的背景（摘自 game.css）

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

body {   /* Background from CSS3 Patterns Gallery by Anna Kassner */   background-color: #6d6aff;   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 120px; } ...

CSS3 Patterns Gallery 中保存了一些 CSS 片段，您可以复制它们来创建各种背景（参阅 ）。图 3 显示了一部分 Gallery 背景：
图 3.  CSS3 Patterns Gallery我从 CSS3 Patterns Gallery 下载了 中的 CSS，以便在 Snail Bait 中使用它。我选择了 Argyle 模式，并将背景颜色改成带阴影的蓝色。