iOS小游戲--貪食蛇

前言

閑著沒事干,想起多年前學(xué)java時,筆者擼過的俄羅斯方塊,坦克大戰(zhàn),貪食蛇,現(xiàn)如今已拋棄java多年,投入iOS的懷抱,既然如此,何不用OC來擼個貪食蛇玩玩?于是,就有了下面這幅圖


界面很丑,確實(shí),畢竟筆者不是學(xué)設(shè)計(jì)的,功能到位就行了,這里說一下筆者的實(shí)現(xiàn)思路

貪食蛇的簡單實(shí)現(xiàn)

首先我們確定一下要用到的類

1.Node:節(jié)點(diǎn)類,蛇的身體就是由每一個節(jié)點(diǎn)組成的,只需要一個CGPoint屬性用來記錄坐標(biāo)就Ok了
2.Snake:蛇類,既然蛇是由很多節(jié)點(diǎn)組成的,那肯定需要一個節(jié)點(diǎn)數(shù)組了,蛇移動是有方向的,所以還得有一個屬性來記錄移動的方向
3.GameView:游戲視圖,蛇可以移動的范圍,即圖中灰色方框內(nèi)部,用來繪制游戲界面

主要用到的就是上面三個類,其他的事就交給控制器來做

蛇的繪制

筆者最初是考慮每一個節(jié)點(diǎn)用一個UIView,然后將UIView添加到GameView上,但是考慮到蛇越來越長,UIView就會越來越多,因此筆者采用Quartz2D的方式來繪制蛇



如圖所示,圖中黑色的點(diǎn)就表示每個節(jié)點(diǎn)的坐標(biāo),然后以這個坐標(biāo)為中心,畫圓或者矩形就可以了(頭部可以用其他形狀來區(qū)分)

//NODEWH是每一個節(jié)點(diǎn)的寬高,值為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];
}
蛇的移動

蛇的移動其實(shí)非常簡單,只要改變頭部節(jié)點(diǎn)的坐標(biāo)就可以了,因?yàn)楹竺婷總€節(jié)點(diǎn)移動后的坐標(biāo)都是它前面一個節(jié)點(diǎn)移動前的坐標(biāo)。最簡單的做法就是把最后一個節(jié)點(diǎn)放到最前面去,這樣就實(shí)現(xiàn)了蛇的移動。這里所說的最前面,不是把它放到數(shù)組第一個元素就可以了,同時也要將坐標(biāo)修改到最前面。代碼如下

//取出數(shù)組的最后一個元素(蛇尾)
Node *node = _nodes.lastObject;
//獲取當(dāng)前蛇頭的坐標(biāo)
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;
}
//修改蛇頭的坐標(biāo)并賦值給蛇尾,這樣一來,之前的蛇頭就變成了第二個節(jié)點(diǎn),蛇尾就變成了蛇頭
node.coordinate = center;
//將蛇尾移到數(shù)組最前面
[_nodes removeObject:node];
[_nodes insertObject:node atIndex:0];
食物的創(chuàng)建

食物用一個UIView就可以了,并且食物只需要創(chuàng)建一次,當(dāng)食物被吃,改變蛇的長度,重新隨機(jī)食物的坐標(biāo)就好了
食物的坐標(biāo)采用隨機(jī)的方式,但是不得超過GameView的范圍,并且食物不能出現(xiàn)在蛇的身上

- (void)createFood {
    //demo中GameView的寬度為200,高度為300,前面有說到節(jié)點(diǎn)的寬高為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);
    //判斷隨機(jī)出來的坐標(biāo)有沒有出現(xiàn)在蛇身上,如果重疊了則重新隨機(jī)
    for (Node *node in _snake.nodes) {
        if (CGPointEqualToPoint(center, node.coordinate)) {
            [self createFood];
            return;
        }
    }
    self.food.center = center;
}
食物是否被吃

判斷食物是否被吃也非常簡單,每次移動完成后,判斷蛇頭與食物有沒有重疊就OK了,由于后面的節(jié)點(diǎn)都是跟著蛇頭走的,因此只需要判斷蛇頭就OK了,如果蛇吃到了食物,就增加蛇的長度,并改變食物的位置

難點(diǎn)在于增加蛇的長度,這個節(jié)點(diǎn)應(yīng)該加在哪里?加在蛇尾的左邊?右邊?還是上邊?下邊?可能有人會覺得根據(jù)蛇的移動方向來判斷,向上移就加在下邊,向右移就加在左邊,其實(shí)不是這樣的,加在哪是根據(jù)最后兩個節(jié)點(diǎn)來確定的

這里我們分為四種情況,假設(shè)蛇尾為A節(jié)點(diǎn),倒數(shù)第二個節(jié)點(diǎn)為B節(jié)點(diǎn)

  1. AB兩個節(jié)點(diǎn)在同一水平線上
    a. A在B的左邊,加在左邊
    b. A在B的右邊,加在右邊
  1. AB兩個節(jié)點(diǎn)在同一豎直線上
    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];
      }

如圖所示,雖然蛇是向左移動的,但是當(dāng)它吃到食物時,增加的節(jié)點(diǎn)應(yīng)該在蛇尾的上邊,這就是上面提到的第2a種情況


有小伙伴提供思路說,加在蛇即將吃食物之前最后一個節(jié)點(diǎn)的位置,這個思路很不錯,上面這些繁瑣的判斷都不需要了,只需在每次移動前記錄最后一個節(jié)點(diǎn)的位置就OK了

游戲結(jié)束

玩過貪食蛇的都知道,當(dāng)蛇頭撞上墻壁,或者撞到自己的身體時,游戲結(jié)束,與吃食物一樣,每次移動完都要判斷

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];
    }
}
//判斷是否撞到墻壁(超出視圖區(qū)域)
if (head.coordinate.x < 5 || head.coordinate.x > 195) {
    [self gameOver];
}
if (head.coordinate.y < 5 || head.coordinate.y > 295) {
    [self gameOver];
}

結(jié)束語

筆者這里只是實(shí)現(xiàn)了一些簡單的功能,有興趣的可以擴(kuò)展,比如增加障礙物等,需要詳細(xì)代碼的可以到筆者的github下載,別忘了動動你的小手,star一下。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前天犯賤登錄了騙子的蘋果ID, 結(jié)果自己的ipad被騙子遠(yuǎn)程鎖定了, 如今變磚頭, 心情很down, 故參考網(wǎng)友的...
    imbaWales閱讀 1,402評論 3 11
  • 很久很久以前,差不多大半年前吧,筆者發(fā)布了一篇關(guān)于OC版貪食蛇開發(fā)的文章,時隔多月,微信小程序橫空出世,于是閑來無...
    codingZero閱讀 6,025評論 9 36
  • 關(guān)于于小程序筆者就不做介紹了,官方有詳細(xì)文檔,我們還是先來看張圖吧 就是這個樣子的,游戲界面跟之前的OC版是差不多...
    Programmer客棧閱讀 3,078評論 0 0
  • 接上文 http://www.itdecent.cn/p/ee2851d8cc7d 本節(jié)是這個系列的最后一節(jié)了。本...
    littlersmall閱讀 2,705評論 2 49
  • 今天這里霧蒙蒙的,早上很冷,晚上也很冷,我這一天都過得很忙,東跑跑西逛逛的,直到現(xiàn)在才停下來。什么都想告訴你,比如...
    Dawnkerwin閱讀 336評論 0 0

友情鏈接更多精彩內(nèi)容