一款开源的类三国杀卡牌生成器（ HTML+CSS+Node+PhantomJS）

[CosmoX]

类三国杀卡牌生成器

• GitHub 网址 <--- 戳戳

项目介绍

这是一款类三国杀人物卡牌生成器。和使用 Photoshop 制作相比，有这些优点：

• 可以读取 JSON 批量生成卡牌，也方便批量修改（不需要在 Photoshop 一张张修改哈）
• 可以自行用 HTML+CSS 设计保存不同卡牌 template （类似修改 Theme ？）
• 自动输出一副完整的扑克牌（前提是放入至少 52 个人物信息）
• 可以输出 html 、 png 、 pdf 等多种各种
• 可以方便地调节卡牌大小和分辨率
• 随机分配技能 （技能取自三国杀，若进行商业开发，请注意版权）
• 开源免费！！！支持开源社区！！！ MIT license ！！！

设计初衷

去年夏天参加了多次太阁社区的程序员线下活动，认识很多很棒的小伙伴。那时便有了用大家头像制作一副三国杀以作纪念的想法。可惜自己画图太差， Photoshop 也不熟，只好暂时把想法放一边。

后来通过一个开源项目，偶然习得了使用PhantomJS输出网页图片的方法，灵光一闪，觉得可以制作一款基于 HMTL+CSS+Node.js+PhantomJS 的卡牌制作器。经过一周折腾，便有了这个项目。（例子）

添加卡牌

在./data/中放入 zhangsanfeng.json 和 zhangsanfeng.jpg 。其中 JSON 文件的内容如下：

{
  "id": "zhangsanfeng",
  "clan": "武当",
  "blood_number": "4",
  "nickname": "一代宗师",
  "name": "张三丰",
  "skills_group": [
    {
      "title": "突袭",
      "description": "摸牌阶段，可以放弃摸牌，然后从至多两名（至少一名）角色的手牌里各抽取一张牌。"
    },
    {
      "title": "铁骑",
      "description": "当使用 [杀] 指定一名角色为目标后，可以进行判定，若结果为红色，此 [杀] 不可被闪避。"
    }
  ]
}

如何制作真实的扑克牌？

网上有很多扑克牌制作网站，我就不给他们打广告了，大家自行搜索就好。

下面秀一下这个项目的成果！！要不要给你们的团队也来一副？

[shoaly]

赞一个, 想法真不错 对应企业文化 也可以植入.
自己的相册也不是不可以

[shoaly]

很早之前类似的 胸牌, 我用的是 indesign sdk....批量导出 200 多个吧.... 没想到扑克牌也是一个优良的载体

[CosmoX]

@shoaly 一直想做个性化的三国杀卡牌，可惜画图技术差，最后反而逼出这个方案。

[CosmoX]

@shoaly 扑克牌至少平时还可以拿出来玩玩，我的胸牌几乎都是用一次就扔了（泪奔）

[50vip]

顶~

[50vip]

原理难道是使用 html 模版，然后用 PhantomJS 把 html 弄成图片？

那为啥不使用 一些图片处理的模块来直接生成图片？

[mahone3297]

@50vip 问的好，同问

[siknet]

这个必须 star ！

[siknet]

@CosmoX node 下要安装哪些支持？抱歉，之前没玩过 node ，说明里面好像漏了安装 PhantomJS 这个环节？

[CosmoX]

@50vip

一开始选用这个 stack 纯属巧合，当时在给一个叫做[node-html-pdf]( https://github.com/marcbachmann/node-html-pdf)的模块发 PR ，碰巧对方用到这个技术。

后来发现，用 HTML+CSS 有个好处就是 data 和 view 分离，可以通过切换不同 template 来换主题，而且可以通过 zoom 来调节大小和 resolution 。其实还有个好处就是我可以使用很多现成的模块，不需要自己画~

[CosmoX]

@siknet 我已经把 phantomjs-prebuilt 列为 dependency ，应该不需要另外安装吧：）跑 npm install 时候会自己安装上。

[Jackeriss]

页脚链接挂了

[CosmoX]

@Jackeriss 上一个回复的链接吗？ V2EX 的回复原来不支持 markdown 。再贴一次：

https://github.com/marcbachmann/node-html-pdf

[WildCat]

用不着 phantom 的， canvas 直接能把 HTML 保存为图片

[CosmoX]

@WildCat 方法有很多嘛。你那种方法应该需要一个 browser 来 render 吧？

[Jackeriss]

@CosmoX 不是， http://hackjutsu.com/HeroCardGenerator/ 这个页面最下面 footer 里跳回 Github 的地址错了。

[CosmoX]

@Jackeriss 哦哦 明白了。我之前有个项目专门给太阁程序员社区做了一款《太阁杀》，这是当时的 demo 。因为原来 repo 的 commit 历史里包含了不少人的个人信息，所以我把它设为 private 。然后把里面个人信息删除后重新建立了这个新 repo 。那个 demo 页面是原来 repo 的，转跳地址也指向原来 repo ，因为设为 private 了，所以看不到。

新 repo ： https://github.com/hackjutsu/HeroCards

[CosmoX]

@Jackeriss 因为懒得重新搞个 demo 了，所以用原来的。

[WildCat]

对啊 所以挂到静态网页都可以做在线版： https://www.v2ex.com/t/337100#reply9

[CosmoX]

@WildCat

当时并没有打算做成在线版的，所以选用 PhantomJS ，这样只需要在 commandline 里跑就行，连 GUI 都不需要。如果要做成在线版，最大的问题不是打印，而是选用的几个中文字库体积太大了...