我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。
1. 需求描述
- 支持本地双人对战的五子棋游戏。
- 对于刚下的一步棋,要有标记。
- 要有提示:五联珠后提示谁赢了。
- 支持重新开局。
- 适配多种分辨率的屏幕。
面对这样一个五子棋游戏的需求,你会怎么做呢?
2. 技术选型
参考掘金文章《H5小游戏技术选型分析,低代码?小游戏框架?canvas或SVG?还能用React?》,我们利用文章的决策树进行技术选型:
- 我们不需要借助现有的游戏模板。
- 我们不需要素材管理、不涉及物理引擎。
- 我们不需要动画、不需要每帧渲染。
结论:手撸五子棋。
此外,因为要适配不同的分辨率,所以我们采用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