CSS 恐龙游戏

GenAI LIVE! | 2025年6月4日

你可能已经看过 Chrome 的一个“彩蛋”：一个恐龙跳跃游戏，它会弹出“无互联网连接”的错误页面。如果你还没看过，可以打开 Chrome，chrome://dino在地址栏里输入“无互联网连接”。

这个周末，我只使用 HTML 和 CSS 开发了该游戏的一个小版本，没有一行 JavaScript，也没有使用图像。

注意：游戏会在动画中更改 CSS 变量的值，并非所有浏览器都支持此功能。为了获得最佳效果，请使用 Chrome 浏览器测试游戏。如果您无法运行，请观看以下视频，了解游戏效果。

你可以在 Codepen 上看到一个演示（点击恐龙让它跳到仙人掌前）：

关于该游戏的一些有趣事实：

• 响应式设计：可适应大屏幕或小屏幕
• 它是可定制的：您可以更改速度、颜色、障碍物数量……
• 它对于练习 CSS 动画和相对单位很有用。
• 它仅适用于基于 Chromium 的浏览器（不是故意的😭）

最初，游戏中有不同的恐龙，它更大更圆，但我并不完全喜欢它的外观，所以我稍微改变了它，使它看起来更像 Chrome 的原始版本。

我将原始设计保留在复选框后面（全部再次使用 CSS 完成），但像素化绘图现在是默认设置……老实说，它们看起来好多了。

工作原理

游戏的目标是在不碰到任何仙人掌的情况下到达终点。你可以在恐龙到达障碍物之前点击它来跳过仙人掌……

那么，具体怎么做呢？主要分为三个部分：

• 恐龙
• 仙人掌
• 消息（开始、胜利和游戏结束）

恐龙其实并没有动，它是用阴影（或者圆形恐龙的渐变）绘制的，并且静止在屏幕的一侧。是世界在围绕它移动。

仙人掌位于一个 div 内，该 div 实际上是从右向左移动的。它们通过labels 来激活每个仙人掌的复选框。

最后，我们制作了一些屏幕来显示“开始游戏”、“游戏结束”或“你赢了”的消息。这些简单的div元素将根据仙人掌的复选框和下面解释的一些 CSS 变量进行显示。

为了避免一些“作弊”，我们隐藏了labels 并且只在需要点击时让它们在一小段时间内可用。

这才是有意思的地方。我们用复选框来追踪跳过的仙人掌数量，并用 CSS 变量来追踪应该跳过的仙人掌数量，并在动画中更新该变量（有些浏览器不支持动画）。

/* The percentages indicate the position of the cactus */
@keyframes cactusSkipped {
  0%, 8% {
    --wrong: 0;
  }
  8.5%, 13% {
    --wrong: 1;
  }
  13.5%, 20% {
    --wrong: 2;
  }
  20.5%, 25% {
    --wrong: 3;
  }
  25.5%, 30% {
    --wrong: 4;
  }
  30.5%, 36% {
    --wrong: 5;
  }
  36.5%, 41% {
    --wrong: 6;
  }
  41.5%, 45% {
    --wrong: 7;
  }
  45.5%, 50% {
    --wrong: 8;
  }
  50.5%, 55% {
    --wrong: 9;
  }
  55.5%, 63% {
    --wrong: 10;
  }
  63.5%, 70% {
    --wrong: 11;
  }
  70.5%, 75% {
    --wrong: 12;
  }
  75.5%, 81% {
    --wrong: 13;
  }
  81.5%, 86% {
    --wrong: 14;
  }
  86.5%, 92% {
    --wrong: 15;
  }
  92.5%, 97% {
    --wrong: 16;
  }
  97.5%, 100% {
    --wrong: 17;
  }
}

通过使用 CSS 函数calc，min我们可以计算跳过的仙人掌数量是否是应该跳过的仙人掌数量，并相应地显示游戏结束消息。

结论

在编写过程中，我意识到有些东西过于复杂了。例如，仙人掌的复选框比单选按钮更简洁。

此外，还可以通过添加更多背景元素来改进它，这也会使其速度变慢一些，但更接近原始速度（例如云）。

我可能会尝试制作第二个版本并进行一些改进，并尝试找出一种方法使其在所有浏览器中运行，而不仅仅是在 Chromium 中运行。

如果您喜欢这个 CSS 游戏，请查看这个包含更多 CSS 游戏的存储库。