我想制作一个小的化学游戏，让它更像是在发现反应，而不是记住周期表的元素。基本的想法很简单：选择两个元素的卡片，将它们扔进一个arena中，然后看看会发生什么。

第一个困难的部分是保持卡片的视觉一致性。

我想代替每张卡片上放置一个大元素符号，希望每张卡片都与日常生活中的熟悉物体或场景相关联。希望玩家可以通过图像记住元素，而不是另一个块的文本。 我在HappySeeds中建立了这个项目。它首先为我生成了几种可能的卡片方向。 我选择了一种手绘漫画风格，然后用它作为参考生成了剩余的元素卡片作为一个集合。这节省了很多时间，但我仍然需要决定关于构成、视觉关联、可读性以及卡片是否看起来像它们属于同一个游戏的这些问题。

第二个问题是碰撞本身。

我的第一版只移动了两个静态的卡片向对方。技术上来说它是工作的，但它看起来更像是一个UI过渡而不是一个游戏。所以我将反应分为几个视觉家族，包括爆炸、火焰、闪光、烟雾、晶体和无反应。 我还添加了不同产物类型，如液体、气体、粉末、金属、酸和晶体。这些反应的Three.js效果被生成。卡片仍然是标准的React元素，而一个独立的Three.js层管理着粒子、光照、冲击波、烟雾和晶体生长。

那小小的改变使整个东西看起来更加生动。 我仍在努力解决的是游戏逻辑和真实化学学说之间的差异。有些组合需要特定的条件，而其他的组合根本不应该发生反应。 我不想呈现伪造的化学学说作为教育事实仅仅因为它能够产生更好的动画。

目前我在考虑两种方法：

  1. 只显示已验证的反应的完整效果，并让其他的东西弹回并解释。
  2. 保持一个单独的“战斗模式”并且使用简化规则，而在教育反应模式和战斗模式之间保持清晰的区分。

哪种方法更有意义？

可玩版本：https://app-7c914a40d8.happyseeds.space/

https://reddit.com/link/1ujnr17/video/5tkzsdp5yeah1/player