美文网首页
iOS实现苏拉卡尔塔棋盘

iOS实现苏拉卡尔塔棋盘

作者: QYiZHong | 来源:发表于2018-04-21 09:58 被阅读66次

代码我开源在GitHub上了
GitHub
iOS实现苏拉卡尔塔吃子算法

棋盘构建

我在具体写代码之前一直觉得可以放一张棋盘的图片上去，这样就可以快速的构建一个棋盘，结果我发现这样没法算棋子的坐标，于是我琢磨了一下就决定用贝塞尔曲线做

于是我重写了

- (void)drawRect:(CGRect)rect

这个方法可以让你绘制曲线在layer层上

先放上我的棋盘轨道代码

- (void)drawRect:(CGRect)rect{
//绘制棋盘
UIBezierPath *bezierPath = UIBezierPath.bezierPath;
[bezierPath moveToPoint:CGPointMake(CENTERX-75, CENTERY-75)];
[bezierPath addLineToPoint:CGPointMake(CENTERX+75, CENTERY-75)];
[bezierPath addLineToPoint:CGPointMake(CENTERX+75, CENTERY+75)];
[bezierPath addLineToPoint:CGPointMake(CENTERX-75, CENTERY+75)];
[bezierPath addLineToPoint:CGPointMake(CENTERX-75, CENTERY-75)];
[UIColor.orangeColor setStroke];
bezierPath.lineWidth = 1;
[bezierPath stroke];

//横线-1,2,3,4
UIBezierPath *bezier2Path = UIBezierPath.bezierPath;
[bezier2Path moveToPoint:CGPointMake(CENTERX-75, CENTERY-45)];
[bezier2Path addLineToPoint:CGPointMake(CENTERX+75, CENTERY-45)];
[UIColor.purpleColor setStroke];
bezier2Path.lineWidth = 1;
[bezier2Path stroke];

UIBezierPath *bezier3Path = UIBezierPath.bezierPath;
[bezier3Path moveToPoint:CGPointMake(CENTERX-75, CENTERY-15)];
[bezier3Path addLineToPoint:CGPointMake(CENTERX+75, CENTERY-15)];
[RGB(0, 139, 69) setStroke];
bezier3Path.lineWidth = 1;
[bezier3Path stroke];

UIBezierPath *bezier4Path = UIBezierPath.bezierPath;
[bezier4Path moveToPoint:CGPointMake(CENTERX-75, CENTERY+15)];
[bezier4Path addLineToPoint:CGPointMake(CENTERX+75, CENTERY+15)];
[RGB(0, 139, 69) setStroke];
bezier4Path.lineWidth = 1;
[bezier4Path stroke];

UIBezierPath *bezier5Path = UIBezierPath.bezierPath;
[bezier5Path moveToPoint:CGPointMake(CENTERX-75, CENTERY+45)];
[bezier5Path addLineToPoint:CGPointMake(CENTERX+75, CENTERY+45)];
[UIColor.purpleColor setStroke];
bezier5Path.lineWidth = 1;
[bezier5Path stroke];

//竖线-1,2,3,4
UIBezierPath *bezier6Path = UIBezierPath.bezierPath;
[bezier6Path moveToPoint:CGPointMake(CENTERX-45, CENTERY-75)];
[bezier6Path addLineToPoint:CGPointMake(CENTERX-45, CENTERY+75)];
[UIColor.purpleColor setStroke];
bezier6Path.lineWidth = 1;
[bezier6Path stroke];

UIBezierPath *bezier7Path = UIBezierPath.bezierPath;
[bezier7Path moveToPoint:CGPointMake(CENTERX-15, CENTERY-75)];
[bezier7Path addLineToPoint:CGPointMake(CENTERX-15, CENTERY+75)];
[RGB(0, 139, 69) setStroke];
bezier7Path.lineWidth = 1;
[bezier7Path stroke];

UIBezierPath *bezier8Path = UIBezierPath.bezierPath;
[bezier8Path moveToPoint:CGPointMake(CENTERX+15, CENTERY-75)];
[bezier8Path addLineToPoint:CGPointMake(CENTERX+15, CENTERY+75)];
[RGB(0, 139, 69) setStroke];
bezier8Path.lineWidth = 1;
[bezier8Path stroke];

UIBezierPath *bezier9Path = UIBezierPath.bezierPath;
[bezier9Path moveToPoint:CGPointMake(CENTERX+45, CENTERY-75)];
[bezier9Path addLineToPoint:CGPointMake(CENTERX+45, CENTERY+75)];
[UIColor.purpleColor setStroke];
bezier9Path.lineWidth = 1;
[bezier9Path stroke];

//曲线-左上-大
UIBezierPath *circle1Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX-75, CENTERY-75) radius:60 startAngle:0 endAngle:-M_PI_2*3 clockwise:false];
[RGB(0, 139, 69) setStroke];
circle1Path.lineWidth = 1;
[circle1Path stroke];
//曲线-左上-小
UIBezierPath *circle2Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX-75, CENTERY-75) radius:30 startAngle:0 endAngle:-M_PI_2*3 clockwise:false];
[UIColor.purpleColor setStroke];
circle2Path.lineWidth = 1;
[circle2Path stroke];

//曲线-右上-大
UIBezierPath *circle3Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX+75, CENTERY-75) radius:60 startAngle:M_PI endAngle:M_PI_2 clockwise:true];
[RGB(0, 139, 69) setStroke];
circle3Path.lineWidth = 1;
[circle3Path stroke];
//曲线-右上-小
UIBezierPath *circle4Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX+75, CENTERY-75) radius:30 startAngle:M_PI endAngle:M_PI_2 clockwise:true];
[UIColor.purpleColor setStroke];
circle4Path.lineWidth = 1;
[circle4Path stroke];

//曲线-左下-大
UIBezierPath *circle5Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX-75, CENTERY+75) radius:60 startAngle:0 endAngle:M_PI_2*3 clockwise:true];
[RGB(0, 139, 69) setStroke];
circle5Path.lineWidth = 1;
[circle5Path stroke];
//曲线-左下-小
UIBezierPath *circle6Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX-75, CENTERY+75) radius:30 startAngle:0 endAngle:M_PI_2*3 clockwise:true];
[UIColor.purpleColor setStroke];
circle6Path.lineWidth = 1;
[circle6Path stroke];

//曲线-右下-大
UIBezierPath *circle7Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX+75, CENTERY+75) radius:60 startAngle:-M_PI_2 endAngle:M_PI clockwise:true];
[RGB(0, 139, 69) setStroke];
circle7Path.lineWidth = 1;
[circle7Path stroke];
//曲线-右下-小
UIBezierPath *circle8Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX+75, CENTERY+75) radius:30 startAngle:-M_PI_2 endAngle:M_PI clockwise:true];
[UIColor.purpleColor setStroke];
circle8Path.lineWidth = 1;
[circle8Path stroke];
}

看起来很长，没有办法。这都是我计算出来的点组成的棋盘

其中CENTERX和CENTERY的定义是这样的

#define CENTERX          [UIScreen mainScreen].bounds.size.width/2
#define CENTERY          [UIScreen mainScreen].bounds.size.height/2

棋子

接着就是放棋子了，我这个棋盘中间一个格子是30位移，根据计算放上棋子不是很难

for (int i=0; i<12; i++) {
    if (i<6) {
        UIButton *redBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [redBtn setImage:[UIImage imageNamed:@"red"] forState:UIControlStateNormal];
        redBtn.frame = CGRectMake(0, 0, 25, 25);
        redBtn.center = CGPointMake(CENTERX-75+i*30, CENTERY-75);
        redBtn.tag = i + 1;
        redBtn.userInteractionEnabled = false;
        [redBtn addTarget:self action:@selector(pressChessBtn:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:redBtn];
        
        UIButton *blueBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [blueBtn setImage:[UIImage imageNamed:@"blue"] forState:UIControlStateNormal];
        blueBtn.frame = CGRectMake(0, 0, 25, 25);
        blueBtn.center = CGPointMake(CENTERX-75+i*30, CENTERY+75);
        blueBtn.tag = i + 19;
        blueBtn.userInteractionEnabled = false;
        [blueBtn addTarget:self action:@selector(pressChessBtn:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:blueBtn];
    }else{
        UIButton *redBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [redBtn setImage:[UIImage imageNamed:@"red"] forState:UIControlStateNormal];
        redBtn.frame = CGRectMake(0, 0, 25, 25);
        redBtn.center = CGPointMake(CENTERX-75+(i-6)*30, CENTERY-45);
        redBtn.tag = i + 1;
        redBtn.userInteractionEnabled = false;
        [redBtn addTarget:self action:@selector(pressChessBtn:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:redBtn];
        
        UIButton *blueBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [blueBtn setImage:[UIImage imageNamed:@"blue"] forState:UIControlStateNormal];
        blueBtn.frame = CGRectMake(0, 0, 25, 25);
        blueBtn.center = CGPointMake(CENTERX-75+(i-6)*30, CENTERY+45);
        blueBtn.tag = i + 7;
        blueBtn.userInteractionEnabled = false;
        [blueBtn addTarget:self action:@selector(pressChessBtn:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:blueBtn];
    }

这里分为红蓝双方，红方在上面，蓝方在下面

这就是构建棋盘的全部思路了，实际上在构建棋盘之前应该先想清楚这个棋盘的数据结构是什么样的

这里提供一下我这个工程中的数据结构思路

@property(assign,nonatomic)NSInteger camp;
@property(assign,nonatomic)NSInteger tag;
@property(assign,nonatomic)NSInteger x;
@property(assign,nonatomic)NSInteger y;
@property(assign,nonatomic)CGFloat frameX;
@property(assign,nonatomic)CGFloat frameY;

可以看到这里是6个属性，稍微解释一下

第一个是阵营，取值是-1、0和1，这三个数足够表示棋盘上双方棋子之间的关系了

第二个是标签，很简单，1-24，用来标识UIButton的

第三个和第四个是这个数据结构二维数组中的坐标

第五个和第六个就是每个坐标对应的在视图上的frame值，能方便的让我知道UIButton移动到哪里

后面我还会详细说明一下棋子是如何实现吃子的，以及动画是如何做的

最后

欢迎访问我的博客 Qi的博客

相关文章

  • iOS实现苏拉卡尔塔棋盘

    代码我开源在GitHub上了GitHubiOS实现苏拉卡尔塔吃子算法 棋盘构建 我在具体写代码之前一直觉得可以放一...

  • iOS实现苏拉卡尔塔吃子算法

    代码我开源在GitHub上了GitHubiOS实现苏拉卡尔塔棋盘 在查阅资料以及参考了别人的吃子算法后，我写出了自...

  • 摄影作品《甜品时间》

    《甜品时间》 摄影：阿诺 造型服装协助：阿诺 / 塔米 设计排版： 卡尔 图文编辑： 优拉 模特：小牟 / 丽娟 ...

  • 棋盘实现

    canvas用于绘制图像（通过javascript) html5中canvas元素仅仅是图像的容器，要通过getC...

  • Java基于分治算法实现的棋盘覆盖问题示例

    Java基于分治算法实现的棋盘覆盖问题示例 本文主要介绍了ava基于分治算法实现的棋盘覆盖问题,简单描述了棋盘覆盖...

  • 塔拉语录

    妈妈:我的塔拉乖不乖 塔拉:乖 妈妈:你是谁的塔拉 塔拉:妈妈的 妈妈:妈妈是谁的 塔拉:我的

  • 五子棋程序UML类图解释

    棋盘类继承于窗口类，实现了窗口类的函数。定义棋盘类绘制棋盘，与棋盘类为组合关系。使用棋子绘制棋盘属于依赖关系。棋子...

  • iOS 拉流实现

    Demo 比较丑还没有完善，凑合着看吧,要是觉得代码也（我靠什么鬼，根本看不懂。写的是什么鸟东西），那么请点击左上...

  • 摄影作品《一枝花一生情》

    《一枝花一生情》 摄影：阿诺 造型服装协助：阿诺/ 塔米 设计排版： 卡尔 图文编辑： 优拉 模特：小牟 / 丽娟...

  • 书信4（写给文友）

    卡尔塔拉: 文章是由字组织的。 我能从文章里听出作者的心音。心音，有冷与热，但也有麻木，更有随波逐流。因此，无论在...

网友评论

      本文标题：iOS实现苏拉卡尔塔棋盘

      本文链接：https://www.haomeiwen.com/subject/aagtlftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|iOS实现苏拉卡尔塔棋盘|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！