共计 3043 个字符，预计需要花费 8 分钟才能阅读完成。
几个大厂小伙，有产品策划、有设计师、有程序员，单干 发明 游戏，48 小时，能开发出什么游戏？
背景
上个周末，咱们几个人，从周五早晨到周日早晨，酣战了 48h，游戏策动、游戏美术、游戏开发全都从 0 开始！发明了一款全新玩法的游戏，并加入了一个较量 GMTK Game Jam 2022，当初较量已完结，参赛作品有 6217 个。
赛事介绍
The GMTK Game Jam is an annual game making marathon, where individuals and teams try to make a game that fits a theme, in just 48 hours.
人工翻译：GMTK Gam Jam 是一个年度的游戏制作马拉松流动，集体或团队须要在仅仅 48 小时内制作一款合乎主题的游戏。
本期主题
The theme is “Roll of the Dice”. That theme might immediately spark ideas of randomness and probability, or board games and casinos, but as always – you can interpret this theme however you like.
人工翻译：本期主题是摇骰子。这可能会让你想到随机，概率，或者桌游等等，当然你也能够依照你的形式来解读这个主题。
游戏体验地址
这是第一次参赛 GMTK game jam2022，但我也不拉票了，因为注册后评分 10 个作品能力给任意作品评分，比拟麻烦，
游戏如下，点开 Dice Crush’s itch.io page 就能够玩：https://itch.io/jam/gmtk-jam-2022/rate/1622181
我也部署到了我服务器上：https://game.hullqin.cn/dice
day1 凌晨：游戏思路
主题非常灵活，很容易利用到各种类型的游戏上。
思路一：只有想想现有的游戏类型，但但凡退出摇骰子随机因素，都能符合主题。例如：王者光荣摇骰子选英雄、射击游戏摇骰子选武器、超级玛丽摇骰子选关卡等等。
思路二：思考把骰子作为外围元素的游戏。例如大富翁、飞行棋等。引入很多随机事件，但这种状况很容易造成整个游戏都是随机的，用户没有参与感。所以须要用户能够做主观的抉择，影响游戏过程，取得可玩性。
下面这两种，应该是把骰子融入游戏的常见思路。但咱们认为游戏是须要翻新的，下面这两种思路，次要规定都是安分守己，没什么新意。而咱们心愿发明一种具备可玩性的玩法，所以下面两种思路都 pass 掉了。
最终咱们想到这种玩法：
灵感来源于俄罗斯方块，然而不同的玩法。设置 6 *10 的游戏区域，每个格子搁置一个骰子，每个骰子有个数字（1-6），如果横向骰子的数字加起来、或者竖向骰子的数字加起来，等于某一个数字，就能够打消掉。
大家统一认为这个玩法很不错，就朝这个方向搞了。这时候，咱们花了 8 个小时（凌晨 1 点出题，凌晨 3 点提出该想法，早上 9 点达成共识）
day1 上午：产品策划
咱们达成共识后，2 位策动同学立马一起写策划书，定了外围玩法：
这时候 10 点多了，程序员（我）起床了。真幸福啊，刚起床就有了策划案。
day1 下午：MVP 版本
作为程序员，是时候做技术选型了，明天要给大家一个 MVP 版本，让大家体验一下，看玩法是否要适当调整。与此同时其他同学就忙着去定美术格调、找音效、BGM 了～
技术选型
因为团队有另一个开发同学，但他是算法，对 JS 不太理解，须要新学，所以我论断是：不必 cocos creator 等游戏框架、也不必 React 等前端框架、不必 PixiJS 等渲染框架。争取用原生 JS 实现，用 dom 来展现各个游戏元素，不便他也能疾速看懂改代码。（因为他这周看了点原生 JS 做的游戏的代码）。
当然应用原生 JS，也是须要编译环节的，也是须要引入类型定义的，能够大幅度提高开发效率。所以我用 Vite 作为打包框架。
具体怎么做？用 Vite 以 React-ts 为模板，再把 React 相干依赖和配置删掉即可。就能够用 typescript 写原生 JS 的代码了～
开发
这是 commit 记录，右侧展现了最后 2 个 commit 的文件列表：
玩法细节探讨
开发的时候，还是有些小细节之前没思考到的，比方：
咱们论断是都要打消掉。
又比方打消两头某排后，呈现了空间，下面的骰子是否要落下来。作为程序员，为了给本人缩小工作量，找了这种借口压服产品：
如果着落，之前的数字布局变了，有人可能按法则摆的，就乱了。如果让玩家预判打消后的连锁，这个不像对对碰，连锁很直观。咱们骰子数独是不直观的。玩家这种连锁更容易靠运气、而不是实力。如果有靠实力的，那肯定是十分多数了
MVP 初体验
因为是 MVP，所以没有引入任何音效和图片。我优先实现了外围玩法，不便给产品测试游戏可玩性。成果如下：
day2 凌晨：真正的 MVP
这时候，素材也根本定下来了，我把外围玩法加上了骰子素材，给大家体验。还加了一些音效。
关上体验时，纷纷感觉很好玩，很上瘾。更动摇了咱们持续做的信心。
day2 白天：产品与开发的抵触
产品同学疯狂画素材，一个又一个素材发群里，产品曾经画了 5 - 6 个页面了：
然而我明天的工作量特地大，包含：
- 路由逻辑要从 0 开发（用原生的害处就是，没有 React Router 这种不便的工具了），我利用
window.history手写了一个 SPA。 - 很多素材，只是作为 background 放上去的，间隔须要手动调整。例如我须要实现一个固定比例的 button，保障 button 和图片的尺寸统一。
- Button 的点击态、Hover 态，也须要通过改 background 来实现。
- 让游戏屏幕适配各种宽度高度的设施，必须本人写款式。
- 音效播放、BGM 切换，须要手动实现，我没有用其它的库。
- 按键事件的响应，须要手动实现，我没有用其它的库。
产品同学十分 NICE，当我群里提前告知做不完的「危险」后，立马跟我电话沟通，我表白了具体起因，以及提出了本人的倡议：
产品交互越简略越好。我倡议是结尾一个首页，点击后间接选关卡，点击关卡后间接开始游戏，不再设置简单的两头页面了。
产品同学承受了，并且依照这个思路绘制了新的原型图，给出了设计稿。
有这样的团队，体验真棒！
day2 早晨：群策群力提交
提交前还是遇到了一些问题的，比如说我用 Vite 打包构建后，在他们的零碎上无奈运行。
通过排查，发现是零碎上的作品的所有资源会有前缀（https://v6p9d9t4.ssl.hwcdn.net/html/6180032/），然而我的打包构建都是绝对路径，很多资源都是 /xxx 门路，这样就导致 404 了。
解决方案
计划一：通过 Vite 的配置文件的 target.base 能够指定绝对路径前缀。然而发现每次打包后上传，资源前缀都数字都会扭转，这个数字是无奈预知的。只好放弃。
计划二：通过相对路径打包，调整所有动态资源的引入形式。
最终，花了半个多小时，我用计划二胜利的上传了动态资源～撒花～
欢送来玩噢：https://game.hullqin.cn/dice
我还加了贴心的性能：暂停、缓存。暗藏浏览器后，游戏暂停（并暂停 BGM）。敞开页面后，记录也会保留在 localStorage 中，下次玩同一关卡，能够持续刷分！
昨晚我用 Target=26，在飞机上玩到了 11170 分～你玩到多少分呢？快发游戏截图到评论区吧！
写在最初
我是 HullQin，独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，绝不免费，绝无广告。喜爱能够关注我噢～我有空了会分享做游戏的相干技术。
