用原生JS开发编程游戏机器人流水线

　　作者：吴亮（月影）
　　记得之前玩过一个flash编程小游戏，印象深刻，叫机器人流水线（manufactoria），不知道有没有同学也玩过。可惜的是，现在falsh已经停止运行了，这个原版的小游戏无法体验到。
　　不过最近几天，我凭着之前的印象，复刻出了这个小游戏。
　　这个小游戏的规则是，将左侧的元件放置到右侧的面板上，然后点击运行，机器人会沿着元件指定的路径运行，并影响地步序列的状态，最终按照任务的要求完成，即可过关。
　　例如上面的截图是第五关，任务是队列里不能出现不同颜色的球，也就是说如果队列中只有红球或只有蓝球，要把机器人移动到处，否则将机器人移到任意其他空格。
　　我们能将元件放置到在任意白色空格处，机器人走到元件上会根据元件的类型来产生相应的动作。
　　manufactoria的元件非常简单，只有两种类型：传送器和比较器，但根据不同的作用一共分为7种：
　　其中传送器有五种，四种带颜色的，机器人通过的时候会将对应颜色的球添加到序列的末尾，还有最后一种黑色的，机器人通过，序列不变。
　　比较器有两种，分别是红蓝比较器和黄绿比较器。比较器的作用是，当机器人通过它时，判断序列头部的球颜色，若颜色是比较器允许的颜色，则机器人朝对应的加号方向前进，并将该序列头部的这个球取出，否则，机器人沿着弧形箭头方向前进，且序列保持不变。
　　神奇的是有了这些简单的元件，我们就可以让机器人完成复杂的任务了。而且这和编程思想是一致的，我们可以通过元件构建出顺序，选择和循环结构体！
　　如下图，在第22关，可以用绿色小球构建出循环体解决问题：
　　好了，前面说了规则，有兴趣的同学可以自行挑战，目前有20多个关卡，我会不定期更新新的关卡，等待大家的挑战。
　　接下来，我们看一下游戏是怎么实现的。
　　首先是面板的HTML结构，这个结构非常简单：span第selectidlevelPickeroption1optionselect关span说明：鼠标选择上方元件添加到右侧面板中，键盘上下左右旋转，空格翻转。buttonclassbtnidrunBtnbuttonbuttonclassbtnidstopBtnbutton序列iiii结果
　　在这里我就不多说了，元件是通过CSS样式绘制的，比如比较器：。comparator｛margin：10px20px；borderbottomrightradius：50；borderbottomleftradius：50；｝。comparator：：before｛content：；marginleft：10px；｝。comparator：：after｛content：；marginleft：10px；｝。comparator。red：：before｛color：red；｝。comparator。green：：before｛color：green；｝。comparator。blue：：after｛color：blue；｝。comparator。yellow：：after｛color：orange；｝
　　因为所有的元件结构都不复杂，所以用一个HTML标签，加上before和after伪元素，就完全可以绘制出来的。
　　右侧的网格是一个grid布局的棋盘：app｛width：520px；height：520px；borderbottom：solid1px0002；borderright：solid1px0002；backgroundimage：lineargradient（90deg，rgba（0，0，0，0。15）2。5，transparent2。5），lineargradient（rgba（0，0，0，0。15）2。5，transparent2。5）；backgroundsize：40px40px；backgroundrepeat：repeat；display：grid；gridtemplatecolumns：repeat（13，40px）；gridtemplaterows：repeat（13，40px）；｝appp｛textalign：center；fontsize：1。8rem；lineheight：48px；；｝
　　在网格中添加对应的元件，就只要找到对应的格子往里添加指定类型的元素就可以了。
　　机器人是绝对定位的元素，它移动的时候的动画效果可以通过transition给出：robot｛position：absolute；transition：alllinear。2s；｝robot：：after｛fontsize：1。8rem；content：；margin：5px；｝
　　这样，基本的HTML和CSS就实现完成了。实际上，大部分UI和交互效果都可以通过HTML和CSS指定，让JS只需要负责控制逻辑，这样就简单很多。
　　接下来我们看具体的逻辑。
　　首先我们实现一个点击左侧面板的元件，将元件用鼠标拾取的效果：unctionenablePicker（）｛constbuttonspanel。querySelector（。buttons）；buttons。addEventListener（mousedown，（｛target｝）｛if（main。className！runningtarget！buttonstarget。className）｛constnodetarget。cloneNode（true）；mousePick。innerHTML；mousePick。appendChild（node）；｝｝）；window。addEventListener（mousemove，（｛x，y｝）｛mousePick。style。left｛x25｝px；mousePick。style。top｛y25｝px；｝）；window。addEventListener（contextmenu，（e）｛e。preventDefault（）；returnfalse；｝）；window。addEventListener（mouseup，（｛target｝）｛if（target。parentNode！buttonstarget。className！normal）｛mousePick。innerHTML；｝｝）；window。addEventListener（keydown，（｛key｝）｛constelmousePick。children〔0〕；if（！elel。classNametrash）return；if（keyArrowRight）｛el。dataset。turn0；｝elseif（keyArrowDown）｛el。dataset。turn1；｝elseif（keyArrowLeft）｛el。dataset。turn2；｝elseif（keyArrowUp）｛el。dataset。turn3；｝elseif（key）｛letnNumber（el。dataset。flip）0；el。dataset。flipn2；｝if（key。startsWith（Arrow）el。classList。contains（comparator））｛el。dataset。turn（Number（el。dataset。turn）3）4；｝｝）；｝
　　这里，我们直接用cloneNode，将面板上的元素复制出来，做出一个透明效果，跟随鼠标移动。另外，我们还做了键盘控制，通过键盘控制元件的具体方向：
　　注意，我们用JS控制元素方向的时候，通过设置turn和flip来表示元素翻转，至于元素具体的展现，则通过CSS来定义：〔dataturn1〕｛transform：rotate（。25turn）；｝〔dataturn2〕｛transform：rotate（。5turn）；｝〔dataturn3〕｛transform：rotate（。75turn）；｝〔dataflip1〕｛transform：scale（1，1）；｝〔dataturn1〕〔dataflip1〕｛transform：rotate（。25turn）scale（1，1）；｝〔dataturn2〕〔dataflip1〕｛transform：rotate（。5turn）scale（1，1）；｝〔dataturn3〕〔dataflip1〕｛transform：rotate（。75turn）scale（1，1）；｝
　　接着是设置和移动机器人的函数：functionsetRobot（）｛conststartapp。querySelector（。start）；constrowNumber（start。dataset。x）；constcolNumber（start。dataset。y）；let｛x，y｝app。getBoundingClientRect（）；xxcol40；yyrow40；consteldocument。getElementById（robot）document。createElement（p）；el。idrobot；el。style。left｛x｝px；el。style。top｛y｝px；el。dataset。xx；el。dataset。yy；el。dataset。rowrow；el。dataset。colcol；el。dataset。fromDirection；document。body。appendChild（el）；｝functionmoveRobot（direction）｛letxNumber（robot。dataset。x）；letyNumber（robot。dataset。y）；letrowNumber（robot。dataset。row）；letcolNumber（robot。dataset。col）；letfromDirection；if（directionleft）｛x40；col；fromDirectionright；｝elseif（directionright）｛x40；col；fromDirectionleft；｝elseif（directionup）｛y40；row；fromDirectiondown；｝elseif（directiondown）｛y40；row；fromDirectionup；｝robot。style。left｛x｝px；robot。style。top｛y｝px；robot。dataset。xx；robot。dataset。yy；robot。dataset。rowrow；robot。dataset。colcol；robot。dataset。fromDirectionfromDirection；console。log（row，col，robot）；returnnewPromise（resolve｛robot。addEventListener（transitionend，（）｛console。log（row，col，robot。dataset。row，robot。dataset。col）；resolve（robot）；｝，｛once：true｝）；防止浏览器transitionend事件有时候不被触发setTimeout（（）resolve（robot），220）；｝）；｝
　　这里，setRobot将机器人设置到起始位置，起始位置在网格中是一个className包含start的p元素，这个元素的位置在后续调用loadLevel读取当前关卡的时候初始化。
　　moveRobot实际上是一个异步方法，它返回一个Promise，在机器人执行完动作之后resolve。不过这里有个细节要注意，我一开始使用transitionend来判断动画结束，但是浏览器不能保证transitionend每次都被触发，所以有时候机器人会不明原因停下来，后来我就加了一个setTimeout来防止这种情况。
　　接下来的一系列方法和底部序列有关，序列代表着输入输出，机器人就是通过移动来影响序列，从而达成指定任务。序列实际上是一个队列，操作比较简单。functionsetDataList（list〔〕）｛io。innerHTML序列；for（leti0；ilist。length；i）｛consteldocument。createElement（i）；el。innerHTMLlist〔i〕；io。appendChild（el）；｝｝functiongetTopData（）｛constitemio。querySelector（i）；if（item）returnitem。innerHTML；elsereturnnull；｝functionpopData（）｛constitemio。querySelector（i）；item。style。width0；returnnewPromise（resolve｛item。addEventListener（transitionend，（）｛item。remove（）；resolve（item）；｝，｛once：true｝）；防止浏览器transitionend事件有时候不被触发setTimeout（（）｛item。remove（）；resolve（item）；｝，220）；｝）；｝functionappendData（data）｛consteldocument。createElement（i）；el。innerHTMLdata；io。appendChild（el）；｝functiongetIOData（）｛constlistio。querySelectorAll（i）；letret；for（leti0；ilist。length；i）｛retlist〔i〕。innerHTML；｝returnret；｝
　　然后是一个辅助方法，用来获得机器人所在位置的棋盘元素。我们在初始化棋盘的时候，会给每个元素设置x和y坐标，在机器人走动的时候，也会更新对应的row和col坐标，所以我们通过选择器就可以快速找到机器人所在位置的棋盘格子，从而判断其中的元件。functiongetRobotCell（）｛letxNumber（robot。dataset。row）；letyNumber（robot。dataset。col）；constcelldocument。querySelector（appp〔datax｛x｝〕〔datay｛y｝〕）；returncell；｝
　　接下来就是代码最核心的部分了。functioncheckCell（cell，fromDirection）｛constret｛direction：null，effect：null，type：null，data：false，｝；constchildrencell。children；if（children。length）｛for（leti0；ichildren。length；i）｛constelchildren〔i〕；constflipel。dataset。flip；constturnel。dataset。turn；if（el。classList。contains（pass））｛ret。typepass；通道if（children。length1）｛交叉通道if（fromDirectionupfromDirectiondown）｛if（turn0turn2）continue；｝if（fromDirectionleftfromDirectionright）｛if（turn1turn3）continue；｝｝if（turn0）ret。directionright；if（turn1）ret。directiondown；if（turn2）ret。directionleft；if（turn3）ret。directionup；if（el。classList。contains（red））ret。effect；if（el。classList。contains（green））ret。effect；if（el。classList。contains（yellow））ret。effect；if（el。classList。contains（blue））ret。effect；｝elseif（el。classList。contains（comparator））｛比较器ret。typecomparator；constdatagetTopData（）；if（datael。classList。contains（red））｛if（turn0）ret。directionleft；if（turn1）ret。directionup；if（turn2）ret。directionright；if（turn3）ret。directiondown；ret。datatrue；｝elseif（datael。classList。contains（green））｛if（turn0）ret。directionleft；if（turn1）ret。directionup；if（turn2）ret。directionright；if（turn3）ret。directiondown；ret。datatrue；｝elseif（datael。classList。contains（blue））｛if（turn0）ret。directionright；if（turn1）ret。directiondown；if（turn2）ret。directionleft；if（turn3）ret。directionup；ret。datatrue；｝elseif（datael。classList。contains（yellow））｛if（turn0）ret。directionright；if（turn1）ret。directiondown；if（turn2）ret。directionleft；if（turn3）ret。directionup；ret。datatrue；｝else｛if（turn0）ret。directiondown；if（turn1）ret。directionleft；if（turn2）ret。directionup；if（turn3）ret。directionright；｝｝if（flip1）｛翻转交换if（turn0turn2）｛if（ret。directionleft）ret。directionright；elseif（ret。directionright）ret。directionleft；｝else｛if（ret。directionup）ret。directiondown；elseif（ret。directiondown）ret。directionup；｝｝｝｝console。log（ret）；returnret；｝functioncheckState（）｛constcellgetRobotCell（）；constfromDirectionrobot。dataset。fromDirection；letstate｛direction：null，effect：null，accepted：false，fromDirection，｝；if（cell。classNameflag）｛state。acceptedtrue；｝elseif（cell。className！start）｛state｛。。。state，。。。checkCell（cell，fromDirection），｝；｝returnstate；｝
　　当机器人移动到一个格子的时候，我们通过checkState判断他的状态，状态包括四个信息，direction：机器人当前可以移动的方向，effect：机器人操作序列的动作，accepted：机器人是否移动到，fromDirection：机器人上一步从哪里移动过来的。
　　checkCell则是具体的判断逻辑，我们通过格子中的元件来具体判断机器人的这些状态，这部分逻辑虽然较繁琐，但其实也不太复杂，唯一需要注意的是，一个网格中可以放两个相互垂直的传送器，当机器人经过的时候，如果有两个方向，会默认选择直行的方向，这也是为什么我们需要fromDirection来判断机器人从哪个方向过来。
　　接下来是展示结果，运行、停止按钮状态，sleep等细节，就不一一赘述了。functioninitResult（）｛result。innerHTML结果；｝functionappendResult（successfalse）｛constrsuccess？A：E；consteldocument。createElement（span）；el。innerHTMLr；if（success）el。classNameaccept；result。appendChild（el）；｝functionsleep（ms10）｛returnnewPromise（resolve｛setTimeout（resolve，ms）；｝）；｝runBtn。addEventListener（mousedown，async（）｛mousePick。innerHTML；runBtn。classNamebtntap；runBtn。disabledtrue；main。classNamerunning；awaitrun（）；｝）；stopBtn。addEventListener（mousedown，（）｛mousePick。innerHTML；stopBtn。classNamebtntap；main。className；setRobot（）；｝）；window。addEventListener（mouseup，（）｛if（stopBtn。classNamebtntap）｛stopBtn。classNamebtn；runBtn。disabledfalse；runBtn。classNamebtn；｝｝）；
　　然后，我们根据关卡数据，读取和初始化对应的关卡：letcurrentLevel；functionloadLevel（level）｛constdatalevels〔level〕；currentLevel｛。。。data，level，｝；taskInfo。innerHTMLp任务：｛data。task｝p提示：｛data。hint｝；constitemsdocument。querySelectorAll（。buttonsp）；for（leti0；iitems。length；i）｛if（！data。units。includes（i））｛items〔i〕。classList。add（hide）；｝else｛items〔i〕。classList。remove（hide）；｝｝setDataList（〔。。。data。tests〔0〕。data〕）；constboardnewArray（169）；board。fill（1）；constsizedata。size13；constv（13size）2；constrange〔v，v，vsize，vsize，〕；const〔a，b，c，d〕range；for（letia；ic；i）｛for（letjb；jd；j）｛constidxi13j；board〔idx〕0；｝｝constsvMath。floor（size2）；conststartv13s；constend（vsize1）13s；board〔start〕1；board〔end〕2；init（board）；constsavedDatalocalStorage。getItem（manufactorialevel｛level｝）；if（savedData）｛constdataJSON。parse（savedData）；for（leti0；idata。cells。length；i）｛constcelldata。cells〔i〕；consteldocument。createElement（p）；el。classNamecell。state；el。dataset。turncell。turn；el。dataset。flipcell。flip；app。children〔cell。idx〕。appendChild（el）；｝｝setRobot（）；returncurrentLevel；｝
　　初始化之后，当放置好元件，点击运行时，让机器人运行起来：asyncfunctionrun（）｛levelPicker。disabledtrue；consttestscurrentLevel。tests；initResult（）；for（leti0；itests。length；i）｛const｛data，accept｝tests〔i〕；setDataList（〔。。。data〕）；setRobot（）；awaitsleep（）；awaitmoveRobot（down）；while（true）｛if（main。className！running）break；conststatecheckState（）；if（state。direction）｛if（state。typecomparatorstate。data）｛awaitPromise。all（〔moveRobot（state。direction），popData（），〕）；｝else｛awaitmoveRobot（state。direction）；if（state。effect）｛appendData（state。effect）；｝｝｝else｛break；｝｝if（main。className！running）break；constcellgetRobotCell（）；if（accepttrue）｛appendResult（cell。classNameflag）；｝elseif（typeofacceptstring）｛if（cell。className！flag）｛appendResult（false）；｝else｛appendResult（acceptgetIOData（））；｝｝else｛appendResult（cell。className！flag）；｝awaitsleep（500）；｝runBtn。classNamebtn；runBtn。disabledfalse；if（main。classNamerunning）｛constsuccess！result。textContent。includes（E）；consteldocument。createElement（span）；el。innerHTMLsuccess？：成功：：失败；if（success）el。classNameaccept；result。appendChild（el）；setDataList（〔〕）；｝main。className；levelPicker。disabledfalse；setRobot（）；｝
　　因为有的关卡比较复杂，玩家也不希望好不容易通关的结果，下一次进游戏又没有了，所以我们做一个localStorage的本地保存机制：把数据保存到本地functionsaveLevel（）｛const｛level｝currentLevel；constdata｛level，cells：〔〕｝；constcellsapp。children；for（leti0；i169；i）｛constcellcells〔i〕；if（cell。children。length）｛for（letj0；jcell。children。length；j）｛constitemcell。children〔j〕；constd｛state：item。className，turn：item。dataset。turn，flip：item。dataset。flip，idx：Number（cell。dataset。x）13Number（cell。dataset。y），｝；data。cells。push（d）；｝｝｝localStorage。setItem（manufactorialevel｛level｝，JSON。stringify（data））；｝
　　最后的最后，我们做一个下拉列表来选择对应的关卡：functioninitLevelPicker（）｛constlenlevels。length；levelPicker。innerHTML；for（leti0；ilen；i）｛constoptionnewOption（i1，i）；levelPicker。appendChild（option）；｝levelPicker。addEventListener（change，（）｛loadLevel（levelPicker。value）；｝）；loadLevel（levelPicker。value）；｝initLevelPicker（）；
　　这样，我们的游戏就开发完成了。实际上这个游戏本身开发的难度并不高，但是玩法却很丰富，关卡也很有挑战性。这就是编程游戏的乐趣。
　　有同学玩通关的话，欢迎戳下方链接，在代码评论区交流玩法心得
　　manufactoria码上掘金manufactoria码上掘金
　　关注字节前端ByteFE公众号，追更不迷路！