[教你做小游戏] 用177行代码写个体验超好的五子棋

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

1. 需求描述

• 支持本地双人对战的五子棋游戏。
• 对于刚下的一步棋，要有标记。
• 要有提示：五联珠后提示谁赢了。
• 支持重新开局。
• 适配多种分辨率的屏幕。

面对这样一个五子棋游戏的需求，你会怎么做呢？

2. 技术选型

参考掘金文章《H5小游戏技术选型分析，低代码?小游戏框架?canvas或SVG?还能用React？》，我们利用文章的决策树进行技术选型：

1. 我们不需要借助现有的游戏模板。
2. 我们不需要素材管理、不涉及物理引擎。
3. 我们不需要动画、不需要每帧渲染。

结论：手撸五子棋。

此外，因为要适配不同的分辨率，所以我们采用SVG绘制棋盘和棋子，不用canvas。

3. 绘制棋盘

背景

棋盘背景选个木头的棕色。

body {
   
   
  height: 100vh;
  margin: 0;
  background: bisque;
}

15*15的线条

我们先通过path绘制15条横线、15条竖线，每个格子设置为10的宽度，那么就是从-70绘制到70。

<svg id="svg" viewBox="-76,-76,152,152" xmlns="http://www.w3.org/2000/svg">
  <path stroke="brown" stroke-width="0.5" fill="none"
    d="m-70,-70h140v140h-140zm10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140" />
</svg>

此外，我们还需要适配多种分辨率，参考《2行代码，让你的UI适配移动端、PC端，快来收藏》，只需2行代码！

5个标记点

五子棋棋盘通常有5个标记点，我们再通过rect画5个黑色的矩形。因为可以复用，所以我们采用defs定义，这样以后可以通过use来复用。使用defs就好比我们封装了个可复用的标记组件。

<svg id="svg" viewBox="-76,-76,152,152" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <rect id="mark" x="-1" y="-1" width="2" height="2" />
  </defs>
  <path stroke="brown" stroke-width="0.5" fill="none"
    d="m-70,-70h140v140h-140zm10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140" />
  <use xlink:href="#mark" />
  <use xlink:href="#mark" x="40" y="40" />
  <use xlink:href="#mark" x="40" y="-40