JS实现五子棋(一)目标分析

最近很久不写js了,突然决定做一个五子棋的小游戏重温一下js的魅力,做完之后觉得有必要在这里做个记录,分享一下,重点记录一下实现的思路,设计过程。

先剧透一下,计划分几个阶段进行更新

  • 目标分析
  • 外观分析及绘制
  • 内部数据结构-控制及判定
  • 人机对战分析及实现

废话不多说,代码先上为敬

https://github.com/a74946443/chess

一、目标分析与构成设计

js内一切皆对象,虽然不像其他那些面向对象语言有专门的对象机制,比如抽象、继承,但是用js却可以完全实现我们熟悉的面向对象开发方式和方法,本次的五子棋就采用面向对象的方式进行分析、开发。

在实际的设计之前,首先要考虑做的是什么,明确目标,然后试着想象或者画出预期效果,有了一个大致的构思之后再开始设计分析。

我计划初期做web版单机双人对战五子棋,再考虑人机对战,预期效果实现单台电脑上运行,两人轮流落子,先在一条直线上连续摆出5颗相同颜色的棋子的一方获胜(不考虑复杂规则,如禁手等)。

强势输出脑中的效果草图,就像这个样子

嗯~ -_-!!,大概是这个样子,意思传达到了就好

对象分析

最直观的,一定要有对战双方的玩家,那么玩家具有哪些属性呢,比如玩家的名称,所执棋子(黑方、白方),玩家类型(人、机器,如果考虑实现人机对战则可以加入这个类型),落子步数等等。

除了玩家,还必须有棋子棋盘,棋子就会有颜色属性,每局开始时会确定所属玩家这一属性;棋盘则具有棋盘尺寸,格子的数量等等,我在这里假设棋盘是一个智能的有生命的棋盘,可以清空棋盘中的棋子、可以在棋盘中绘制一颗棋子等动作等。那么到这里可能有老铁想问,玩家不是也有动作嘛,比如下棋落子,悔棋、认输等,这样分析和设计完全没有问题,只是有不同的目标和设计实现方法。

目前已经大致定义了三类实体对象玩家棋子棋盘,但是仅仅有实体对象还不足以完成一次完整的五子棋对战,还缺少了很重要的一项,就是游戏规则,这里就不描述详细的术语定义和规则了,只列举游戏的基本规则,双方轮流落子,实质就是每落一子后立即变更当前回合的控制权至对手方。输赢判定,即当前棋子落下后,如果棋盘上存在一条直线上连续5个相同颜色的棋子,即判定执此颜色棋子的一方胜利。

逻辑分析

从这里分析,为了方便实现轮流落子,引入一个虚拟的逻辑对象“控制者”,控制者像是一个中介,代替玩家下棋,每下一步棋,就换一个颜色继续下棋,于是我把落子和控制切换的动作赋予了控制者。

那么规则要如何判定呢,是通过事件绑定,下棋落子即为一个事件,事件触发布局检测,判定胜负,布局检测没有必要检测过多的位置,能够取胜的棋子摆法只有垂直、水平,左上至右下,右下至左上共4条线路。

当棋子落在图中圆圈的位置时,触发落子事件,检测A,B,C,D四个方向的布局是否达到胜利的条件。每一条线路又被落子分为两份A1、A2,B1、B2,C1、C2,D1、D2,检测时分别向两个方向检测最多4个单元,算上落子刚好5个单元。

至此对目标有了一个相对细致的分析和逻辑了。

这里为了更加方便的展示,使用思维导图软件将对象以及对象的成员属性/方法大致描绘出来,方便对想法做修改/更正。

到这里基本的分析就完成了,按这个思路,下一步将根据分析的情况,就可以将实体对象的图形或信息在页面上绘制出来了。

预知后事如何,且听下回分解!

本文分享自微信公众号 - 可回收BUG(way-of-full-stack)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券