作者Vanco Stojkov凭借其出色的蜜蜂主题开放式网络游戏——Honey Pursuit: Yet Another Love Saga，赢得了竞争激烈的无 JavaScript 挑战赛。令人惊奇的是，Honey Pursuit 没有使用一行 JavaScript 代码，而是利用 HTML 和 CSS 的强大功能来管理所有内容，从记分到碰撞检测。
我最近有机会通过电子邮件与 Vanco 进行了一次简短的访谈。在我们的通信中，我了解了更多关于他的背景、他开发 Honey Pursuit 的经验以及他对 Web 开发未来的看法。
访谈内容
您是如何对 Web 开发产生兴趣的？
从高中起我就对计算机和编程感兴趣，但直到大学最后一年我才开始对 Web 编程感兴趣。我被分配了一个 Web 项目作为其中一门课程的作业，并且对它感到非常兴奋，于是决定完全专注于 Web 开发。
请您谈谈开发 Honey Pursuit 的过程。在开发过程中，有什么特别令人兴奋、具有挑战性或有成就感的事情吗？
起初，我严重怀疑是否能够以我想要的方式完成游戏，而不使用 JavaScript。但事实证明，Web 技术，特别是 CSS，已经发展到可以实现远超我预期的功能。来自无 JavaScript 挑战赛和之前 Derbies 的现有演示非常有帮助——有许多令人惊叹的展示和技术，从中可以学到很多东西，并且在开发过程中确实令人鼓舞。
管理标记和 CSS 代码一直是最具挑战性的部分，特别是 CSS 动画的管理——代码变得相当长，并且所有动画都相互依赖，因此它们的同步是一个很大的问题。幸运的是，PHP 编码非常方便，通过使用 PHP 控制变量和循环来动态生成 CSS 代码和 HTML 标记，开发过程变得更加易于管理和快速。
您能否告诉我们 Honey Pursuit 的工作原理？
为了使游戏正常运行，需要三种主要的用户交互——控制游戏流程（开始/暂停/继续游戏）、控制蜜蜂英雄（在屏幕上移动它）以及收集罐子（一种碰撞检测）。
- 使用“:checked”伪类可以实现开始/暂停游戏。有一个隐藏的复选框和两个可见的标签（开始/暂停按钮，一次可见一个）与该复选框相关联，它们启用两种状态（开/关）。当复选框未选中时，负责主要游戏流程的动画将停止——“animation-play-state”设置为“paused”，否则“animation-play-state”设置为“running”。使用“~”组合器，通过使用“:checked ~ .class”选择器，这两个状态用于相应元素的 CSS。
- 移动功能通过使用“~”组合器和覆盖整个屏幕的不可见 div 网格来实现。因此，当这些 div 处于“:hover”状态时，蜜蜂会通过“#div_id:hover ~ #bee”选择器移动到与相应 div 关联的位置。蜜蜂本身也应用了 CSS 过渡，以便能够平滑地从一个位置移动到另一个位置。
- 罐子收集也通过使用“:hover”伪类来实现——在“:hover”状态下，罐子会被移除，并且罐子计数器的暂停动画通过将“animation-play-state”更改为“running”向前移动一步。
其他所有内容都只是一系列同步的 CSS 动画：介绍动画在最后一个幻灯片结束，该幻灯片显示一个按钮，点击该按钮即可开始游戏；“开始”按钮触发隐藏的复选框，从而启动主要游戏动画；主要游戏动画结束后，结束动画开始，显示结束幻灯片序列。
一个不错的细节是，应用于每个蜜蜂的两个重复 CSS 动画分别模拟蜜蜂飞行（平滑地上升和下降）和翅膀拍打。我还认为蜜蜂的外观和感觉对整体体验具有巨大的（视觉）影响，为此，我要感谢@kosturanov在设计方面提供的所有帮助和指导。
是什么让 Web 成为一个令您兴奋的平台？
开放性、可访问性和平台独立性——这三点是我喜欢 Web 的原因。开放性不仅体现在能够自由开发且不受任何限制，还体现在能够为社区和标准做出贡献，并使其成为一个更好的平台。可访问性和平台独立性则体现在能够从任何地方和几乎任何设备访问 Web 应用程序，而无需任何特殊要求。
您最期待哪些即将出现的 Web 技术？
我真的很期待在 HTML 中使用移动设备的功能。通过 JavaScript 实现 5 个应用程序，这些应用程序到目前为止仅适用于原生应用程序：相机、联系人列表、传感器等。这将为移动 Web 应用程序带来强大的功能。
如果您能改变 Web 的一件事，那会是什么？
我爱 Web 本身，以及它不断发展的方式。但我认为，如果 Web 浏览器能够更快地以更加统一的方式实现标准，那就太好了。在过去的几年里，在开发过程中，由于新 CSS3 功能的实现而产生了诸多挫折。即使实现了这些功能，也需要为每个特定浏览器使用 CSS 前缀。
您会给有抱负的 Web 开发人员提供什么建议？
与其他任何职业一样，Web 开发人员也面临一些职业风险，其中大部分与长时间坐在电脑前有关 :)，但除此之外，这是一个非常有趣和有创造力的职业。Web 的不断发展特性要求开发人员不断改进和尝试新事物。因此，我的建议是永远不要停止实验，永远不要停止学习——从标准中学习，也从其他开发人员那里学习。哦，还要学习如何使用和重用其他开发人员的技术，这可以节省大量时间和精力——很有可能您需要的东西已经由其他人完成了。
您还有什么想分享的吗？
我要感谢 Mozilla 提供了多年来我一直在使用的产品和服务，当然还要感谢他们组织了 Dev Derby 挑战赛，因为这些以及类似的活动确实在推动 Web 的发展。
一条评论