iOS小游戏--贪食蛇

前言

闲着没事干,想起多年前学java时,笔者撸过的俄罗斯方块,坦克大战,贪食蛇,现如今已抛弃java多年,投入iOS的怀抱,既然如此,何不用OC来撸个贪食蛇玩玩?于是,就有了下面这幅图


界面很丑,确实,毕竟笔者不是学设计的,功能到位就行了,这里说一下笔者的实现思路

贪食蛇的简单实现

首先我们确定一下要用到的类

1.Node:节点类,蛇的身体就是由每一个节点组成的,只需要一个CGPoint属性用来记录坐标就Ok了
2.Snake:蛇类,既然蛇是由很多节点组成的,那肯定需要一个节点数组了,蛇移动是有方向的,所以还得有一个属性来记录移动的方向
3.GameView:游戏视图,蛇可以移动的范围,即图中灰色方框内部,用来绘制游戏界面

主要用到的就是上面三个类,其他的事就交给控制器来做

蛇的绘制

笔者最初是考虑每一个节点用一个UIView,然后将UIView添加到GameView上,但是考虑到蛇越来越长,UIView就会越来越多,因此笔者采用Quartz2D的方式来绘制蛇



如图所示,图中黑色的点就表示每个节点的坐标,然后以这个坐标为中心,画圆或者矩形就可以了(头部可以用其他形状来区分)

//NODEWH是每一个节点的宽高,值为10
for (int i = 0; i < _snake.nodes.count; i++) {
    CGPoint center = _snake.nodes[i].coordinate;
    CGRect rectangle = CGRectMake(center.x - NODEWH * 0.5, center.y - NODEWH * 0.5, NODEWH, NODEWH);
    UIBezierPath bezierPath = [UIBezierPath bezierPathWithOvalInRect:rectangle];
    [[UIColor redColor] set];
    [bezierPath fill];
}
蛇的移动

蛇的移动其实非常简单,只要改变头部节点的坐标就可以了,因为后面每个节点移动后的坐标都是它前面一个节点移动前的坐标。最简单的做法就是把最后一个节点放到最前面去,这样就实现了蛇的移动。这里所说的最前面,不是把它放到数组第一个元素就可以了,同时也要将坐标修改到最前面。代码如下

//取出数组的最后一个元素(蛇尾)
Node *node = _nodes.lastObject;
//获取当前蛇头的坐标
CGPoint center = _nodes.firstObject.coordinate;
switch (_direction) {
    case MoveDirectionUp:
        center.y -= 10;
        break;
    case MoveDirectionLeft:
        center.x -= 10;
        break;
    case MoveDirectionDown:
        center.y += 10;
        break;
    case MoveDirectionRight:
        center.x += 10;
        break;
}
//修改蛇头的坐标并赋值给蛇尾,这样一来,之前的蛇头就变成了第二个节点,蛇尾就变成了蛇头
node.coordinate = center;
//将蛇尾移到数组最前面
[_nodes removeObject:node];
[_nodes insertObject:node atIndex:0];
食物的创建

食物用一个UIView就可以了,并且食物只需要创建一次,当食物被吃,改变蛇的长度,重新随机食物的坐标就好了
食物的坐标采用随机的方式,但是不得超过GameView的范围,并且食物不能出现在蛇的身上

- (void)createFood {
    //demo中GameView的宽度为200,高度为300,前面有说到节点的宽高为10,所以x值范围为5-195,y值范围为5-295
    int x = (arc4random() % 20) * NODEWH + NODEWH * 0.5;
    int y = (arc4random() % 30) * NODEWH + NODEWH * 0.5;
    CGPoint center = CGPointMake(x, y);
    //判断随机出来的坐标有没有出现在蛇身上,如果重叠了则重新随机
    for (Node *node in _snake.nodes) {
        if (CGPointEqualToPoint(center, node.coordinate)) {
            [self createFood];
            return;
        }
    }
    self.food.center = center;
}
食物是否被吃

判断食物是否被吃也非常简单,每次移动完成后,判断蛇头与食物有没有重叠就OK了,由于后面的节点都是跟着蛇头走的,因此只需要判断蛇头就OK了,如果蛇吃到了食物,就增加蛇的长度,并改变食物的位置

难点在于增加蛇的长度,这个节点应该加在哪里?加在蛇尾的左边?右边?还是上边?下边?可能有人会觉得根据蛇的移动方向来判断,向上移就加在下边,向右移就加在左边,其实不是这样的,加在哪是根据最后两个节点来确定的

这里我们分为四种情况,假设蛇尾为A节点,倒数第二个节点为B节点

  1. AB两个节点在同一水平线上
    a. A在B的左边,加在左边
    b. A在B的右边,加在右边
  1. AB两个节点在同一竖直线上
    a. A在B的上边,加在上边
    b. A在B的下边,加在下边

    • (void)growUp {
      Node *node1 = _nodes.lastObject;
      Node *node2 = _nodes[_nodes.count - 2];
      CGPoint center;
      //在同一竖直线上
      if (node1.coordinate.x == node2.coordinate.x) {
      if (node1.coordinate.y < node2.coordinate.y) {
      center = CGPointMake(node1.coordinate.x, node1.coordinate.y - 10);
      } else {
      center = CGPointMake(node1.coordinate.x, node1.coordinate.y + 10);
      }
      //在同一水平线上
      } else if (node1.coordinate.y == node2.coordinate.y) {
      if (node1.coordinate.x < node2.coordinate.x) {
      center = CGPointMake(node1.coordinate.x - 10, node1.coordinate.y);
      } else {
      center = CGPointMake(node1.coordinate.x + 10, node1.coordinate.y);
      }
      }
      Node *node = [Node nodeWithCoordinate:center];
      [_nodes addObject:node];
      }

如图所示,虽然蛇是向左移动的,但是当它吃到食物时,增加的节点应该在蛇尾的上边,这就是上面提到的第2a种情况


有小伙伴提供思路说,加在蛇即将吃食物之前最后一个节点的位置,这个思路很不错,上面这些繁琐的判断都不需要了,只需在每次移动前记录最后一个节点的位置就OK了

游戏结束

玩过贪食蛇的都知道,当蛇头撞上墙壁,或者撞到自己的身体时,游戏结束,与吃食物一样,每次移动完都要判断

Node *head = _snake.nodes.firstObject;
//判断是否撞到自己身体
for (int i = 1; i < _snake.nodes.count; i++) {
    Node *node = _snake.nodes[i];
    if (CGPointEqualToPoint(head.coordinate, node.coordinate)) {
        [self gameOver];
    }
}
//判断是否撞到墙壁(超出视图区域)
if (head.coordinate.x < 5 || head.coordinate.x > 195) {
    [self gameOver];
}
if (head.coordinate.y < 5 || head.coordinate.y > 295) {
    [self gameOver];
}

结束语

笔者这里只是实现了一些简单的功能,有兴趣的可以扩展,比如增加障碍物等,需要详细代码的可以到笔者的github下载,别忘了动动你的小手,star一下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,026评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,655评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,726评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,204评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,558评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,731评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,944评论 2 314
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,698评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,438评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2 247
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,444评论 3 255
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,137评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2 271

推荐阅读更多精彩内容

  • 前天犯贱登录了骗子的苹果ID, 结果自己的ipad被骗子远程锁定了, 如今变砖头, 心情很down, 故参考网友的...
    imbaWales阅读 1,285评论 3 11
  • 很久很久以前,差不多大半年前吧,笔者发布了一篇关于OC版贪食蛇开发的文章,时隔多月,微信小程序横空出世,于是闲来无...
    codingZero阅读 5,731评论 9 36
  • 关于于小程序笔者就不做介绍了,官方有详细文档,我们还是先来看张图吧 就是这个样子的,游戏界面跟之前的OC版是差不多...
    Programmer客栈阅读 2,483评论 0 0
  • 接上文 http://www.jianshu.com/p/ee2851d8cc7d 本节是这个系列的最后一节了。本...
    littlersmall阅读 2,386评论 2 49
  • 今天这里雾蒙蒙的,早上很冷,晚上也很冷,我这一天都过得很忙,东跑跑西逛逛的,直到现在才停下来。什么都想告诉你,比如...
    Dawnkerwin阅读 297评论 0 0