孤独的游戏少年

本人是95前端菜鸟一枚，目前在广州打工混口饭吃。刚好换了工作，感觉生活节奏变得慢了下来，打了这么多年工总觉得想纪录些什么，怕以后自己老了忘记自己还有这么一些风流往事。书接上回。

楔子

又是一个闲暇的周末，正读一年级的我坐在床上，把象棋的旗子全部倒了出来，根据颜色分为红色和绿色阵营，旗子翻盖为建筑，正面为单位，被子和枕头作为地图障碍，双手不断的移动着双方阵营的象棋，脑海中演练着星级争霸的游戏画面，将两枚不同阵营的旗子进行碰撞后，通过我对两枚旗子主观的判断，一方阵营的旗子直接被销毁，进入回收，一方的单位对建筑物全部破坏取得游戏胜利。因为我的父亲酷爱玩这款游戏，年少的我也被其玩法、画面所深深吸引，不过最主要的还是父亲获胜或者玩累后，能幸运的奖励我玩上几把。星际争霸成了我第一个启蒙游戏，那时候怎么样都获胜不了，直到发现了show me the money。因为Blizzard这个英文单词一直在游戏的启动界面一闪一闪，那时候还以为这款游戏的名字叫Blizzard，最后才发现，其实Blizzard是魔鬼的意思。

纸笔乐趣

小学一二年级的时候家里管得严，电视也不给我看，电脑直接上锁，作为家里的独生子女，没有同龄人的陪伴，闲暇时间要不就看《格林童话》、《安徒生童话》、《伊索寓言》，要不就打开这副象棋在那里自娱自乐。

起源

在某一天的音乐课上，老师喉咙不舒服，在教室播放猫和老鼠给我们观看，正当我看的津津有味，前面的同学小张突然转过头来，问我“要不要跟我玩个游戏”。小孩子一般都比较贪玩，我直接拒绝了他，“我想看猫和老鼠”。小张满脸失落转了回去，因为我是个特别怕伤害别人情绪的人，所以不忍心又用铅笔的橡皮端戳了戳他，问他“什么游戏，好玩不”。他顿时也来了精神，滔滔不绝的介绍起了这款游戏。

“游戏的规则非常的简单~~在一张纸上中间画一条分割线，双方有各自的基地，每人基地都有5点血量，双方通过猜拳，获胜的一方可以在自己阵营画一个火柴人，火柴人可以攻击对面的火柴人和基地，基地被破坏则胜利。管你听没听懂，试一把就完了！”

我呆呆的看着他，“这么无聊，赢了又怎样？”。他沉默了一会，好像我说的的确有点道理，突然想到了一个好办法，“谁获得胜利扇对方一巴掌”。我顿时来了兴趣。随着游戏逐渐深入，我们的猜拳速度和行动力也越来越快，最后发现扇巴掌还是太狠，改为扇对方的手背，这节课以双方手背通红结束了。

游戏改良

这个《火柴人对战》小游戏在班里火了一会儿，但很快就又不火了，我玩着玩着也发现没啥意思，总是觉得缺少点什么，但毕竟我也只是个没有吃APTX4869的小学生，想不出什么好点子。时间一晃，受到九年义务教育的政策，我也成功成为了一名初中生。在一节音乐课上，老师想让我们放松放松，给我们班看猫和老鼠，隔壁同桌小王撕了一张笔记本的纸，问我有没有玩过《火柴人对战》游戏，只能说，熟悉的配方，熟悉的味道。

当天晚上回到家，闲来无事，我在想这个《火柴人游戏》是不是可以更有优化，这种形式的游戏是不是可以让玩家更有乐趣。有同学可能会问，你那个年代没东西玩的吗？既然你诚心诚意发问，那我就大发慈悲的告诉你。玩的东西的确很多，但是能光明正大摆在课桌上玩的基本没有，一般有一个比较新鲜的好玩的东西，都会有一群人围了过来，这时候老师会默默站在窗户旁的阴暗角落，见一个收一个。

坐在家里的椅子上，我整理了一下思绪，突然产生了灵感，将《魔兽争霸》和《游戏王》这两个游戏产生化学反应，游戏拥有着资源，单位，建筑，单位还有攻击力，生命值，效果，攻击次数。每个玩家每回合通过摇骰子的方式获得随机能源点，能源能够解锁建筑，建筑关联着高级建筑和单位，通过单位进行攻击，直至对方玩家生命值为0，那么如何在白纸上面显示呢？我想到比较好的解决方案，单位的画像虽然名字叫骷髅，但是在纸上面用代号A表示，建筑骷髅之地用代号1表示。我花了几天时间，弄了两个阵营，不死族和冰结界。立刻就拿去跟同桌试玩了一下，虽然游戏很丰富，但是有一个严重的弊端就是玩起来还挺耗费时间的，而且要人工计算单位之间的扣血量，玩家的剩余生命，在纸片上去完成这些操作，拿个橡皮擦来擦去，突然觉得有点蠢，有点尴尬，突然明白，一张白纸的承受能力是有限的。之后，我再也没有把游戏拿出来玩过，但我没有将他遗忘，而是深深埋藏在我的心里。

筑梦

直到大学期间《炉石传说》横空出世，直到《游戏王》上架网易，直到我的项目组完成1.0后迎来空窗期一个月，我再也蚌埠住了，之前一直都对微信小游戏很有兴趣，每天闲着也是闲着，所以我有了做一个微信小游戏的想法。而且，就做一款在十几年前，就已经被我设计好的游戏。

但是我不从来不是一个好学的人，领悟能力也很低，之前一直在看cocos和白鹭引擎学习文档，也很难学习下去，当然也因为工作期间没有这么多精力去学习，所以我什么框架也不会，不会框架，那就用原生。我初步的想法是，抛弃所有花里胡哨的动效，把基础的东西做出来，再作延伸。第一次做游戏，我也十分迷茫，最好的做法肯定是打飞机————研究这个微信项目如何用js原生，做出一个小游戏。

虽然微信小游戏刚出来的时候看过代码，但是也只是一扫而过，而这次带着目标进行细细品味，果然感觉不一样。微信小游戏打飞机这个项目是js原生使用纯gL的模式编写的，主要就是在canvas这个画布上面作展示和用户行为。

  // 触摸事件处理逻辑
  touchEventHandler(e) {
    e.preventDefault()

    const x = e.touches[0].clientX
    const y = e.touches[0].clientY

    const area = this.gameinfo.btnArea

    if (x >= area.startX
        && x <= area.endX
        && y >= area.startY
        && y <= area.endY) this.restart()
    }

点击事件我的理解就是用户点击到屏幕的坐标为(x, y)，如果想要一个按钮上面做处理逻辑，那么点击的范围就要落在这个按钮的范围内。当我知道如何在canvas上面做点击行为时，我感觉我已经成功了一半，接下来就是编写基础js代码。

首先这个游戏确定的元素分别为，场景，用户，单位，建筑，资源(后面改用能源替代)，我先将每个元素封装好一个类，一边慢慢的回忆着之前游戏是如何设计的，一边编程，身心完全沉浸进去，已经很久很久没有试过如此专注的去编写代码。用了大概三天的时间，我把基本类该有的逻辑写完了，大概长这个样子

上面为敌方的单位区域，下方为我方的单位区域，单位用ABCDEFG表示，右侧1/1/1 则是 攻击力/生命值/攻击次数，通过点击最下方的icon弹出创建建筑，然后创建单位，每次的用户操作，都是一个点击。

一开始我设想的游戏名为想象博弈，因为每个单位每个建筑都只有名称，单位长什么样子的就需要玩家自己去脑补了，我只给你一个英文字母，你可以想象成奥特曼，也可以想象成哥斯拉，只要不是妈妈生的就行。

湿了

游戏虽然基本逻辑都写好了，放到整个微信小游戏界别人一定会认为是依托答辩，但我还是觉得这是我的掌上明珠，虽然游戏没有自己的界面，但是它有自己的玩法。好像上天也认可我的努力，但是觉得这个游戏还能更上一层楼，在某个摸鱼的moment，我打开了微信准备和各位朋友畅谈人生理想，发现有位同学发了一幅图，上面有四个格子，是赛博朋克风格的一位篮球运动员。他说这个AI软件生成的图片很逼真，只要把你想要的图片告诉给这个AI软件，就能发你一幅你所描绘的图片。我打开了图片看了看，说实话，质感相当不错，在一系列追问下，我得知这个绘图AI软件名称叫做midjourney。

midjourney

我迫不及待的登录上去，询问朋友如何使用后，我用我蹩脚的英格力士迫不及待的试了试，让midjourney帮我画一个能源的icon，不试不要紧，一试便湿了，眼睛留下了感动地泪水，就像一个阴暗的房间打开了一扇窗，一束光猛地照射了进来。

对比我之前在iconfont下载的免费图标，midjourney提供这些图片简直就是我的救世主，我很快便将一开始的免费次数用完，然后氪了一个30美刀的会员，虽然有点肉痛，但是为了儿时的梦想，这点痛算什么。

虽然我查找了一下攻略，别人说可以使用gpt和midjourney配合起来，我也试了一下，效果一般，可能姿势没有对，继续用我的有道翻译将重点词汇翻译后丢给midjourney。midjourney不仅可以四选一，还可以对图片不断优化，还有比例选择，各种参数，但是我也不需要用到那么多额外的功能，总之一个字，就是棒。

但当时的我突然意识到，这个AI如此厉害，那么会不会对现在行业某些打工人造成一定影响呢，结果最近已经出了篇报道，某公司因为AI绘图工具辞退了众多插画师，事实不一定真实，但是也不是空穴来风，结合众多外界名人齐心协力抵制gpt5.0的研发，在担心数据安全之余，是否也在担心着AI对人类未来生活的各种冲击。焦虑时时刻刻都有，但解决焦虑的办法，我有一个妙招，仍然还是奖励自己。

门槛

当我把整个小游戏焕然一新后，便兴冲冲的跑去微信开放平台上传我的伟大的杰作。但微信突然泼了我一盆冷水，上传微信小游戏前的流程有点出乎意外，要写游戏背景、介绍角色、NPC、介绍模块等等，还要上传不同的图片。我的小游戏一共就三个界面，有六个大板块要填写，每个板块还要两张不同的图片，我当时人就麻了。我只能创建一个单位截一次图，确保每张图片不一样。做完这道工序，还要写一份自审自查报告。

就算做完了这些前戏，我感觉我的小游戏还是难登大雅之堂，突然，我又想到了这个东西其实是不是也能运行在web端呢，随后我便立刻付诸行动，创建一个带有canvas的html，之前微信小游戏是通过weapp-adapter这个文件把canvas暴露到全局，所以在web端使用canvas的时候，只需要使用document.getElementById('canvas')暴露到全局即可。然后通过http-server对应用进行启动，这个小游戏便以web端的形式运行到浏览器上了，终于也能理解之前为啥微信小游戏火起来的时候，很多企业都用h5游戏稍微改下代码进行搬运，原来两者之间是有异曲同工之妙之处的。

关于游戏

上面两张便是两个种族对应的生产链，龙族是我第一个创建的，因为我自幼对龙产生好感和兴趣，何况我是龙的传人/doge。魔法学院则是稍微致敬一下《游戏王》中黑魔导卡组吧。

其实开发难度最难的莫过于是AI，也就是人机，如何让人机在有限的资源做出合理的选择，是一大难题，也是我后续要慢慢优化的，一开始我是让人机按照创建一个建筑，然后创建一个单位这种形式去做运营展开，但后来我想到一个好的点子，我应该可以根据每个种族的特点，走一条该特点的独有运营，于是人机龙族便有了龙蛋和破坏龙两种流派，强度提升了一个档次。

其实是否能上架到微信小游戏已经不重要了，重要的是这个过程带给我的乐趣，一步一步看着这个游戏被创建出来的成就感，就算这个行业受到什么冲击，我需要被迫转行，我也不曾后悔，毕竟是web前端让我跨越了十几年的时光，找到了儿时埋下的种子，浇水，给予阳光，让它在我的心中成长为一棵充实的参天大树。

h5地址:hslastudio.com/game/

github地址: github.com/FEA-Dven/wa…