这估计是最后一篇了,终于是修复了部分bug——隔一个空格能够胜利的bug,并且添加了部分样式。
其他bug目前还没有找到,找到再说吧。
大部分代码请见:
用canvas实现五子棋小游戏https://blog.csdn.net/m0_54066656/article/details/140552576?spm=1001.2014.3001.5501
这里面最重要的,就是胜利代码的逻辑了。
别的样式都可以自定义,根据自己所学的知识进行自定义即可。
下面给出我自己的一些自定义设置以及完善:
首先就是,一进入到网页就提示你是否选择新游戏。
这个可有可无,看你喜不喜欢花里胡哨的东西。
然后就是提示,下棋子的提示,上图上层第二个黑点左侧有白色虚线圆框。
这个做起来还是蛮有难度的,喜欢的可以去挑战一下自己。
下面这个也是跟上面这个是一样的:
悄咪咪说一句,这个也是我看了B站大佬视频里面的样式,我才开始弄的。
我一开始以为后续会教你如何实现,但是没有,只教了模糊。
快乐啪一下没了,于是乎就花了亿点时间去实现了,整体还是蛮简单的。
最后就是游戏胜利的画面,我根据颜色来进行了深度定制。
比方说,黑方胜利了,那就使用黑色背景,如果是白方胜利了,那就采用白色背景。
这部分还是很简单的,建议自己动手尝试。
悄咪咪说一句,你可以使用第一张图里面提供的DOM元素进行~
这就是以上所有内容,感谢你的阅读,咱们下棋整活再见。
整活:
有能力的,可以加个AI对战。
有心情的,可以换个校对方法,压缩代码。