您好，技术爱好者！作为一名热情的软件工程师，我一直在寻找令人兴奋的挑战。最近，我开始了一个引人入胜的方面项目。我决定将我们都知道并热爱的派对游戏的数字版本栩栩如生 - “反对人类的卡片”。本文揭示了这次迷人探险的高级旅程。
这一举措源于我对“反对人类的卡片”的个人喜爱。” 该游戏的点燃笑声和联系的独特能力是无与伦比的，我的目的是以可访问的数字格式来重现这种体验。但是，我觉得现有的在线版本没有捕获游戏的本质，所以我决定创建自己的。
在进行前进之前，让我们快速回顾一下我们心爱的游戏的一些数字克隆，每个克隆都有其独特的特殊性：
现在，这是一个无耻的自我促进时刻 - 我向您介绍我的数字婴儿Cyber Chaos Cards。随时检查它们，并确定哪一个带给您最多的乐趣！
我们可以继续吗？
这个项目的目标是双重的。首先，要丰富我对实时游戏/应用程序开发的理解。从头开始构建在线游戏的过程充满挑战，但有意义，我渴望吸收知识。其次，我想为我的投资组合创建一个出色的作品，这既展示了我的技术水平，又展示了我对融合创造力和编码的热情。
本文提供了这一发展之旅的高级概述 - 最初的概念，设计决策，技术选择和部署困境。对于那些对开发过程详细信息感兴趣的人，我将发表一篇详细的文章，以深入研究该项目的技术复杂性。您将能够访问该here。
设计戏剧：平衡想法和塑造简单性
我知道我想要的 - “反对人类卡片”的数字转世既直观又具有视觉吸引力。
我用这三个诫命刻有石头：
- 用户友好 - 游戏必须直观且易于浏览。体验应该感觉像是在维护良好的公园中平稳漫步。
- 快速开始 - 我想消除发现游戏的乐趣与玩耍的兴奋之间的障碍。我的目的是避免登录障碍，复杂的房间搜索和跳过名称选择细节。
- 响应式设计 - 包容性至关重要，无论屏幕尺寸如何，每个人都必须访问游戏。
有一天，在思考这个设计困境的同时，Garticphone的简单优雅引起了我的注意。这是极简主义和功能性的美丽融合，在所有设备上都易于理解和引人入胜的游戏。 Garticphone就像找到游戏设计的Konami代码一样。这是隐藏的宝藏，是设计一种具有用户友好，视觉上吸引人和有趣的游戏的诀窍。简单而优雅，在所有设备上都有响应，并且没有不必要的复杂性，例如登录屏幕或房间搜索。
该游戏每月访问超过2800万的访问是可以提供丰富体验的验证。
以这种灵感作为指导灯，我进入了素描阶段。 Figma帆布成为我的游乐场，灰色盒子开始扮演游戏组件的角色。像数字雕塑家一样，我开始塑造这些无形的盒子，逐渐向它们呼吸。一步一步，迭代后的迭代，我的愿景开始实现。布局曾经是一个巨大的空虚，现在开始随着游戏的生命力而溢出。
设计了游戏的界面后，难题中仍然缺少一个关键的作品 - 徽标。就像超级英雄标志一样，徽标会设定基调并为产品提供身份。因此，有了这种理解，我发现自己回到了无花果中，但是这一次，任务不同。
经过无数次迭代，我得出了结果，我会看着并想：“好吧，这已经足够了。”最终徽标可能不是杰作，但就像可靠的代码一样，它现在已经足够好，并且有效地完成了工作！
开发传奇：通过代码和技术导航
现在，我将有点切换齿轮，然后冒险进入技术选择领域。但是请放心，我不会用密集的技术术语轰炸您。更多地将其视为全景之旅，而不是深入潜水。让我们跳上虚拟解释巴士，停止各种技术，我将用类比介绍它们。对于那些喜欢在引擎盖下窥视并用代码弄脏的技术爱好者，请不要害怕！我正在准备一篇单独的文章，以深入研究开发过程的复杂性。但是目前，坐下来欣赏基于该项目的技术景观的全景。
技术选择：为工作选择正确的工具
决定适当的工具和技术是这一旅程的关键一步。我想要一个强大的堆栈，它可以使我有效地管理实时游戏的状态性质。那是next.js，typeScript，socket.io和node.js发挥作用的时候。
- next.js ：想象一下React中的编程就像将一个难题放在一起。您拥有所有的作品，但是组装它们以形成完整的图片可能很棘手。现在，Next.js就像一个拼图集，上面有提示，使整个过程更容易。那Vercel呢？好吧，Vercel就像那个超级乐于助人的朋友，在您完成难题之后，小心地将其贴在墙上（换句话说，在网上）供每个人享用。总而言之，Next.js使反应更容易组装，并且Vercel确保每个人都能以最小的努力看到您的作品。
- 打字稿：想象它是代码的防弹背心。它使您有一种安全感和自信心，知道它会以错误和汇编错误的形式保护您免受可能的“流浪子弹”。
- socket.io ：想象一个不懈的使者，无论发生什么情况，他都可以实时传递消息（数据）。它还为每个用户创建邮箱（房间）。那是我们有效的数据使者，socket.io！
- node.js ：这就像一辆坚固的越野车 - 不是最快或最优雅，但非常可靠并且能够处理任何地形（在这种情况下，满足不同的开发需求）。作为奖励，配备打字稿“升级套件”时会变得更好。
后端挑战：编排逻辑和功能
首先，有些人可能想知道为什么我不使用Next.js中的内置后端。由于我想使开发尽可能简单，并且不想在游戏中使用数据库，因此我选择将所有内容存储在内存中。好吧，这就像只为每顿饭设置一个临时餐桌，而无需保留代码运行的任何状态或信息。
现在，让我们谈谈这个是在线游戏的盛大派对。想象一下，您正在组织一个史诗般的聚会。为了确保一切顺利进行，您聘请了经验丰富的活动经理The Roommanager。当您接近房间经理并表达与朋友一起玩乐的愿望时，Roommanager迅速为您建立了一个舒适的房间。他们交给您多个邀请（房间链接），以便您可以分享他们并邀请您的朋友参加聚会。
当您的朋友收到邀请函时，他们到达聚会，并向房间管理人介绍自己，后者将他们引导到您保留的房间。在这个定制的派对室中，您可以制定规则，选择音乐播放列表，然后决定将提供哪些饮料。这就像拥有自己的独家空间来创造娱乐的理想氛围。
房间管理人还密切关注谁进入房间。如果作为主人，您碰巧离开了房间，则必须将领导责任通过其他人，以免党不停。当每个人都离开聚会时，房间管理人迅速清理并为下一个聚会做准备。
这是惊人的部分：每个房间都代表一个单独的游戏。想象一下，每个房间都像一个迷你宇宙，带有自己的纸牌，客人清单和独特的设置。这些房间是独立的，并且要照顾所有细节 - 从洗牌到宣布聚会的冠军。这就像在节日豪宅中举行多个聚会。只是壮观！
我们可靠的通信工具socket.io充当了房间的勤奋管家。始终存在，始终保持警惕。这个管家不仅在那里照顾房间的内部需求。不好了！它还具有与外界保持不间断的沟通线的任务。
所以，想象一下：聚会上的客人（前端）想向房间发送消息。他们写下便条（发送消息）并将其交给管家（socket.io）。管家是忠实的中介，立即将该信息带到相应的聚会室（后端）。
现在，还记得我们独立的房间吗？现在该采取行动了。消息到达后，房间（Gameroom）确切知道该怎么做。无论是打电话给服务员提供更多饮料，转到下一首歌还是宣布下一首游戏，房间都会根据消息的内容触发必要的方法。
这就是我们可靠的巴特勒，socket.io的方式，可确保房间（后端）迅速照顾来自客人（前端）的所有消息，从而确保为所有人提供无缝而有趣的聚会！
，亲爱的朋友们，我们是通过“反对人类卡片”的风格组织一个伟大的数字派对的方式！
前端的艺术：建立界面和经验
游戏不能“仅仅工作”，它必须很愉快，玩家需要有良好的体验。
创建游戏的前端是一个令人兴奋而复杂的挑战。第一个问题是确保界面在所有屏幕尺寸上都具有响应性和视觉吸引力。毕竟，无论他们使用什么设备，我们都希望玩家享受游戏体验。为了加快开发过程，我决定将CSS与Daisyui库一起使用。这些工具对于简化样式过程和确保具有凝聚力和吸引人的设计至关重要。
在应对反应中国家管理的复杂性时，上下文起着至关重要的作用。在项目中，我们拥有GameContext，这是一个特殊的上下文，可存储从服务器收到的所有信息，并在整个项目中可用。这意味着游戏中的任何地方，我们都可以访问和显示有关游戏当前状态的实时信息。
GameContext还包括各种重要功能，使我们能够与游戏互动。我们可以加入一个房间，离开它并进行动作。这些功能使玩家能够积极参与游戏，并确保在实时游戏状态中反映所有动作。
通过使用GameContext，组件可以查询此上下文以轻松有效地获取更新的游戏信息。如果组件需要显示特定的游戏数据或执行与游戏状态相关的操作，则可以简单地查询GameContext以获取必要的信息。这种方法简化了开发并有助于保持组件之间的一致同步。
使部署自动化
好吧，它在我的机器上起作用，但是现在出现了一个大问题：如何与世界分享这个项目？期待已久的部署的时候了。在这一刻，我们将工作从开发环境带到每个人都可以访问的服务器。是时候向世界展示我们的创作并允许每个人享受我们建立的经验了。
但是，部署过程可能是复杂且具有挑战性的。我们有许多问题要回答，正确配置服务并确保一切正常，都是成功启动的关键步骤。但是不用担心！我们准备正面面对这一挑战。
在决定我的项目的托管提供商时，权衡可用选项至关重要。尽管AWS和其他著名的托管提供商具有其优势和广泛的知名度，但我选择与Linode一起踏上旅程。为什么？首先，决定因素是财务方面。 Linode提供了更实惠的托管解决方案，非常适合像我这样的小型项目。此外，Linode界面在我的决定中也起着重要作用。我觉得它更有条理和直观，这促进了我的管理和部署经验。尽管托管选择可能会根据个人需求和偏好而有所不同，但Linode被证明是我项目的正确选择，提供了高效且可靠的托管。
太好了，我们有一个可以让游戏启动和运行的地方。我可以访问主机，下载该项目并运行它。但是，软件从未完成，如果我想进行一个小更改，我将不得不手动发送新文件并重新启动服务器，这是不切实际的，更不用说有趣的。
。
这里采取了一些新工具，Docker和GitHub动作。它们就像软件部署世界中超级英雄的动态二人组一样。他们已经简化并自动化了这一过程，为游戏带来了额外的便利和乐趣。
想象一下Docker是您为项目创建的特殊包装。这就像将食谱的所有成分打包到一个神奇的盒子中。在此框中，您拥有所需的一切 - 依赖关系，配置，甚至运行时环境。这就像有一个私人厨师为您准备所有成分，节省时间并确保一切顺利。
现在，让我们遇到github的动作。就像乐团的指挥一样。它协调部署过程的所有活动部分，以确保一切都在正确的时间和正确的顺序上发生。这就像有一个指挥家领导旋律，在需要时呼吁必要的动作。使用GitHub操作，您可以定义执行自动任务的自定义工作流，例如建筑，测试和部署，而无需举起手指。
随着党的英雄介绍，让我告诉您他们为该项目所做的工作，重点是GitHub行动。在第一个动作中，GitHub操作管道将您的后端代码直接推向Docker Hub将您的后端代码置于聚光灯下。这就像拥有一个快速有效的快递员，将您的代码带到安全的位置，准备部署在数字世界中。
但这仅仅是开始！第二个动作更加令人兴奋。该脚本在名为“ update.sh”的服务器上称为特殊字符。该脚本专为我们的项目开发。它的任务是停止执行当前服务器，删除游戏正在运行的容器，直接从Docker Hub下载更新的项目，最后运行了带有游戏的最新版本的Docker容器。
这种动作的组合就像是一个大师进行完美的交响曲。每个动作都是同步的，以确保游戏始终是最新的并准备好玩。这就像有一个私人助理照顾您的所有更新和部署，使您可以自由地专注于开发。
领域
执行必要的配置后，我将主要域“ cyberchaoscards.com”指向游戏的前端，为玩家在访问网站时提供独特的体验。此外，我创建了一个名为“ server.cyberchaoscards.com”的子域，专用于后端。
除了域外，我还需要添加SSL证书，以便在我的页面上显示HTTPS的精美锁图标。
在前端，这很容易，因为托管提供商Vercel会为我照顾所有工作。现在，在后端，我需要在列表中添加另一个超级英雄， nginx 。
首先，有必要设置一个反向代理以正确指导Web服务器流量。就像真正的仪式大师一样，Nginx进入了场景。它扮演了指导在执行该游戏的服务器的docker容器上的“ server.cyberchaoscards.com”域上收到的请求的角色。这就像有一个经验丰富的向导，将每位客人带到正确的派对室，确保每个人都到达所需的目的地。
使用NGINX配置，是时候添加SSL证书了。我找到了Certbot的工具，并遵循了有关如何与nginx一起使用的文档，瞧，一切都很好。
总之，
- 我想创建游戏“反对人类卡”的在线版本。
- 我找到了一款适合我游戏的设计成功的游戏。
- figma帮助我“复制”了设计并进行必要的改编。
- 使用React，Next.js，Node.js和Socket.io。 进行开发。
- 将前端部署在Vercel上。
- 后端部署在Linode上。
- Github的行动和Docker帮助弥合了发展和部署之间的差距。
- 我和朋友们一起玩最终结果很有趣。
没有什么比将自己的愿景栩栩如生的。通过将热情与技术技能融合在一起，您可以创造一个无限可能的世界。不要等待别人为您做这件事 - 成为您自己的创作的主人。
结果
