【canvas】复现nokia上的五子棋link5

序

不久前，我看到堂弟和别人在下五子棋，让我想起自己小时候我家里有一款蓝白色的诺基亚，也自带的五子棋游戏（link5），后来手机进水坏了。想着想着，突然我萌生一个念头：为什么自己不复现这个五子棋游戏呢？
于是我在网上搜索了一会儿，终于找到的这款手机的信息：

nokia 2100 96×65 单色屏

这个五子棋我在网上仅仅找到了两三张图片，也不清楚其AI采用什么算法实现，完全复现是不可能的。所以我仅凭个人记忆和这些图片，外加自己的一些修饰，去复现这款经典游戏。

实现方法

纯前端，没有React，没有Vue，啥框架的没有，就纯 $js+css$。

最终效果

目前这个游戏已经基本完成，还剩一些小细节有待缝缝补补，比如没有平局判断，那天有空再完善（摸了）。

游戏逻辑

为了让游戏AI的运算过程不影响到界面的绘制，需要引入新线程专门用于游戏AI运算，方法是使用Worker类。游戏逻辑如下：

背景

最终效果展示中，可以看到背景是nokia2100，这是我使用 Adobe XD 绘制，绘制好后导出为 SVG 格式，然后放到工程中使用的，起初logo是我从nokia官网上扣下来的，为了避免版权警告，后面改成了文字，字体为Arial-Black, Arial。

算法

刚开始，五子棋的AI我用的是极大极小值搜索（The Minimax Algorithm）。
之后，在此基础上做了alpha-beta剪枝（Alpha Beta Pruning）。
都是很经典的算法。这里不想写，展开篇幅过多。

结语

这里我仅仅是记录一下我自己做过的小项目，不想做太多展开。
如果你觉得我这个项目还行，给个star。
源码在这：https://fongzising.github.io/