Hướng dẫn làm game đuổi hình bắt chữ

Game “Đuổi hình bắt chữ” đã trở thành một trào lưu trên các chợ ứng dụng vì cách chơi đơn giản, dễ dàng mà ai cũng chơi được. Nó không những giúp cho người chơi có thể nhớ thêm các từ ngữ tiếng Việt mà còn đem lại những tiếng cười sảng khoái vì đã giải được một câu đố khó, một chữ khó trong game.

Mình đã viết gong một game giống thế và hôm nay sẽ chia sẽ cách làm để các bạn làm quen với việc làm game:

Download game chính

Hôm nay chúng ta sẽ viết một game đuổi hình bắt chữ với Xcode và engine Sprite Kit của Apple. Nói chung thì dùng engine viết game nên cũng không khó lắm.

1. Đầu tiên chúng ta cần hiểu rõ game cần gì?

– Phần hiển thị của game bao gồm:

+ Hình nền của game tạo cảm giác thân thiện cho người dùng

+ 1 hình ảnh hiển thị để người chơi nhìn vào và đoán chữ

+ Dãy đáp án dành cho game

+ Dãy chữ gợi ý để người chơi nhập vào khi tìm kiếm đáp án

– Phần ngầm của game chính là đáp án của game được chúng ta lưu trữ lại trong bộ nhớ để kiểm tra đáp án của game xem có chính xác không.

* Phần quan trọng không kém là những file hình ảnh đi kèm để làm game. Mình kèm theo cho các bạn để quá trình học tập nhanh chóng hơn:

https://drive.google.com/folderview?id=0B38uO5_VDZL4NFV4MDlpLTM4WG8&usp=sharing

* Ngoài ra đây là game đã hoàn chỉnh của mình trên AppStore, có gì các bạn download ủng hộ nhé ^.^

Download game Đuổi hình bắt chữ trên AppStore

2. Sau khi đã biết tất cả những thứ cần thiết dành cho game thì chúng ta có thể bắt đầu rồi:

– Đầu tiên là thêm hình nền vào trong chương trình

SKSpriteNode * lkBackground = [SKSpriteNode spriteNodeWithImageNamed:@”Background”];

lkBackground.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));

[self addChild:lkBackground];

– Thế là xong hình nền, giờ ta thêm vào hình gợi ý ở phía trên hình nền nữa:

* Giờ là lúc chuẩn bị chỗ để lưu câu trả lời dành cho game

Trong file MyScene.h ta để một biến NSString để lưu giữ câu trả lời:

@interface LKMyScene : SKScene

{

NSString * lkAnswer;

}

@end

=> Biến NSString để lưu trữ câu trả lời

3. Loading game:

Bây giờ bắt đầu nạp câu hỏi vào trong game với hàm loadGame

-(void)LoadGame{

SKSpriteNode * lkCurrentPicture = [SKSpriteNode spriteNodeWithImageNamed:@”HinhGoiY”];

lkCurrentPicture.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame) + 220);

[self addChild:lkCurrentPicture];

 

lkAnswer = @”MaNao”;

}

=> Thế là ta có hình ảnh gợi ý và câu trả lời đã được nạp vào game

* Đây là tác phẩm cho tới giờ này: bao gồm hình nền và hình gợi ý

Khởi đầu game

Game đã có hình nền và hình gợi ý

4. Sinh ra thêm các chữ không có trong câu trả lời để làm cho game trở nên khó khăn hơn:

a. Hàm sinh chữ cái ngẫu nhiên:

– Để làm được điều này, ta cần có thêm 1 hàm sinh ra chữ cái ngẫu nhiên và đây chính là nó:

-(NSString*)lkGenRandomChar{

NSMutableString* string = [NSMutableString stringWithCapacity:1];

[string appendFormat:@”%C”, (unichar)(‘a’ + arc4random_uniform(25))];

return string;

}

=> Hàm này sẽ trả về một kí tự ngẫu nhiên trong bảng chữ cái

b. Ta lấy câu trả lời và tuần tự thêm các chữ cái ngẫu nhiên sao cho có đủ 12 chữ cái thì ngừng:

NSMutableString * lkQuestion = [NSMutableString stringWithString:lkAnswer];

lkHintCharArray = [[NSMutableArray alloc] init];

while (lkQuestion.length < 12) {

NSString * charNew = [self lkGenRandomChar];

[lkHintCharArray addObject:charNew];

[lkQuestion appendString:charNew];

}

=> Sử dụng một NSMutableString lưu trữ những kí tự để có thể sinh ra 12 chữ gợi ý cho game

c. Lúc này ta có 12 chữ cái vừa có câu trả lời vừa có những chữ cái thừa. Tuy nhiên câu trả lời lại nằm ngay đầu của chuỗi rất dễ đoán ra nên ta thay đổi vị trí nó một cách ngẫu nhiên bằng những dòng lệnh sau:

for (int i = 0; i < lkQuestion.length; i++) {

int randomNum = arc4random() % lkQuestion.length;

 

NSString * lkCharAtToPost = [lkQuestion substringWithRange:NSMakeRange(randomNum, 1)];

NSString * lkChar = [lkQuestion substringWithRange:NSMakeRange(i, 1)];

[lkQuestion replaceCharactersInRange:NSMakeRange(i, 1) withString:lkCharAtToPost];

[lkQuestion replaceCharactersInRange:NSMakeRange(randomNum, 1) withString:lkChar];

}

=> Thế là các chữ cái được trộn lẫn vào nhau và bây giờ không thể nhận ra được câu trả lời một cách dễ dàng nữa.

 

5. Sinh ra những ô chữ gơi ý trên giao diện:

– Để thể hiện các ô chữ trên giao diện chúng ta cần một đối tượng để có thể bắt hành động của người chơi.

a. Ô chữ gợi ý:

Tạo một đối tượng mới có template là SKSpriteNode và có tên là LKTileChar. Xcode sẽ sinh ra 2 file 1 header (.h) và file code (.m)

* Đây là những gì nên có trong file LKTileChar.h

#import <SpriteKit/SpriteKit.h>

@interface LKTileChar : SKSpriteNode

{

SKLabelNode * lkLabel;

}

-(instancetype) initWithCharacter:(NSString *)lkLetter;

@property NSString * lkCharacter;

@end

=> lkLabel để thể hiện chữ cái chứa trong ô còn lkCharacter là nội dung của nó.

 

* Đây là nội dung tong file LKTileChar.m:

#import “LKTileChar.h”

 

@implementation LKTileChar

-(instancetype) initWithCharacter:(NSString *)lkLetter{

LKTileChar * lkTitleChar = [LKTileChar spriteNodeWithImageNamed:@”Tile”];

lkLabel = [SKLabelNode labelNodeWithFontNamed:@”Arial-BoldItalicMT”];

lkLabel.fontSize = 39;

lkLabel.text = lkLetter;

lkLabel.verticalAlignmentMode = SKLabelVerticalAlignmentModeCenter;

lkLabel.position = CGPointMake(0,0);

 

lkTitleChar.lkCharacter = lkLetter;

[lkTitleChar addChild:lkLabel];

lkTitleChar.userInteractionEnabled = YES;

lkTitleChar.name = @”tileChar”;

return lkTitleChar;

}

@end

=> Chúng ta đã tạo ra mộ đối tượng có nền là hình ảnh của file “Tile.png” và có lkLabel để thể hiện chữ cái của nó.

(Chú ý: userInteractionEnabled cần được chuyển thành YES nếu không đối tượng sẽ không nhận được hành động của người dùng đâu, ngoài ra nó còn phải được nằm trên các đối tượng có enable = NO)

b. Thêm các ô gợi ý vào game:

– Thêm đoạn code sau đây vào phần LoadGame:

for (int j = 0; j < 2;j++) {

for (int i = 0;i < 6;i++) {

NSString* letter = [lkQuestion substringWithRange:NSMakeRange(j*6 + i, 1)];

LKTileChar * myChar = [[LKTileChar alloc] initWithCharacter:[letter uppercaseString]];

myChar.position = CGPointMake(CGRectGetMinX(self.frame) + (i + 1)*100 + 39, CGRectGetMidY(self.frame) – 280 – j*100);

[self addChild:myChar];

}

}

=> Chỉ việc cắt ra từng chữ của lkQuestion mà ta đã tạo và trộn ngẫu nhiên sau đó thể hiện trên màn hình là xong.

Bây giờ bạn đã có 12 chữ cái ngẫu nhiên nằm dưới đáy màn hình rồi đó.

* Đây là hình ảnh sau khi đã tới bước này

Hình được thêm vào các chữ cái gợi ý

Hình đã được thêm vào những chữ cái gợi ý

Hình game mỗi lần chạy đều có gợi ý khác nhau

Hình game được chạy lần 2

6. Sinh ra những ô chữ đáp án trên game:

Các ô chữ đáp án cũng cần được quản lý theo những đối tượng riêng.

Tạo File mới LKTargetSlot là một Object

a. Nội dung file LKTargerSlot.h:

#import <SpriteKit/SpriteKit.h>

@interface LKTargetSlot : SKSpriteNode

{

SKLabelNode * lkLetterNode;

}

-(instancetype)initOnScreen;

@property NSString * lkContent;

@property int lkAnswerNumber;

-(void)lkSetContent:(NSString *)lkContentX;

@end

=> Tương tự lkLetterNode sẽ thể hiện còn lkContent là nội dung mà nó được nhận tuy nhiên còn có lkAnswerNumber để có thể biết được đây là ô chữ thứ bao nhiêu để xét tuần tự.

b. Nội dung file LKTargetSlot.m:

– Chúng ta sẽ đưa file .m như sau:

#import “LKTargetSlot.h”

@implementation LKTargetSlot

-(instancetype) initOnScreen{

LKTargetSlot * targetSlot = [LKTargetSlot spriteNodeWithImageNamed:@”Slot”];

 

targetSlot->lkLetterNode = [SKLabelNode labelNodeWithFontNamed:@”Arial-BoldItalicMT”];

targetSlot->lkLetterNode.fontColor = [UIColor whiteColor];

targetSlot->lkLetterNode.text = @””;

targetSlot->lkLetterNode.verticalAlignmentMode = SKLabelVerticalAlignmentModeCenter;

 

 

targetSlot.lkContent = @””;

targetSlot.userInteractionEnabled = YES;

targetSlot.name = @”targetChar”;

return targetSlot;

}

-(void)lkSetContent:(NSString *)lkContentX

{

[lkLetterNode removeFromParent];

self.lkContent = lkContentX;

lkLetterNode.text = lkContentX;

[self addChild:lkLetterNode];

}

@end

=> Với ô chữ đáp án cũng gần giống với ô chữ gợi ý tuy nhiên khác ở chỗ, ô chữ đáp án có thể hiện hoặc không chữ cái trong game nên chúng ta có thê 1 lệnh để thay đổi chữ cái.

=> Vậy là xong phần chuẩn bị cho việc thể hiện mọi đối tượng trong game

c. Thêm vào trong game các ô chữ đáp án:

– Hàm để thêm vào:

-(void)lkCreateTargetSlot:(int)lkNumber{

int lkNumberX = 0;

if(lkNumber % 2 == 1)

{

for (int i = 0; i < lkNumber; i++) {

LKTargetSlot * myChar = [[LKTargetSlot alloc] initOnScreen];

myChar.lkAnswerNumber = lkNumberX++;

myChar.name = @”targetChar”;

myChar.position = CGPointMake(i * (78 + 20) – (lkNumber/2 * 78 + (lkNumber-1)/2*20) + self.frame.size.width/2, CGRectGetMidY(self.frame) – 80);

[self addChild:myChar];

[lkTargetArray addObject:myChar];

}

} else {

for (int i = 0; i < lkNumber; i++) {

LKTargetSlot * myChar = [[LKTargetSlot alloc] initOnScreen];

myChar.lkAnswerNumber = lkNumberX++;

myChar.name = @”targetChar”;

myChar.position = CGPointMake(i * 100 – (((lkNumber +1)/2*70) + (lkNumber)/2*20) + self.frame.size.width/2 +45, CGRectGetMidY(self.frame) – 80);

[self addChild:myChar];

[lkTargetArray addObject:myChar];

}

}

}

=> Đây là lệnh để thêm các ô đáp án vào đúng vị trí của nó. Trong LoadGame ta thêm vào dòng này là xong:

[self lkCreateTargetSlot:(int)lkAnswer.length];

=> Thế là giao diện game đã hoàn chỉnh tuy nhiên các ô chữ vẫn chưa có phản ứng gì cả. Vậy hãy qua phần tiếp theo để hoàn tất cả game nào

* Bây giờ chúng ta có:

Giao diện game giờ đã hoàn chỉnh

Giao diện game hoàn chỉnh

7. Phản ứng dành cho các ô gợi ý:

Trước hết hãy làm cho các ô gợi ý có phản ứng.

a. Vào trong LKTileChar.m thêm vào dòng sau:

– Hàm sẽ chạy khi người dùng chạm vào đối tượng riêng. Đây là cách quản lý khá hay và đơn giản của Sprite Kit. Bạn có thể truy cập ngược từ cấp con sang các cấp cao hơn 1 cách dễ dàng trong khi bình thường phải dùng đến các delegate rất phức tạp.

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

[self -> lkLabel removeFromParent];

LKMyScene * myScene = (LKMyScene *)self.scene;

[myScene lkGetTouch:self];

}

=> Đoạn mã này sẽ tự loại bỏ nó ra khỏi màn hình và sau đó truyền chính nó vào trong LKMyScene để chương trình xử lý.

b. Thêm vào file LKMyScene.h function:

-(void)lkGetTouch:(LKTileChar *)lkTileChar;

– Sau đó vào trong LKMyScene.m để hoàn tất nó:

-(void)lkGetTouch:(LKTileChar *)lkTileChar{

BOOL getChar = NO;

for (int i = 0; i < lkTargetArray.count; i++) {

LKTargetSlot * myChar = [lkTargetArray objectAtIndex:i];

if([myChar.lkContent isEqualToString:@””] && (!getChar)){

[myChar lkSetContent:lkTileChar.lkCharacter];

getChar = YES;

}

}

 

if (getChar) {

[lkSelectedArray addObject:lkTileChar];

[lkTileChar removeFromParent];

}

 

[self lkCheckAnswer];

}

=> Thay nội dung vào trong ô chữ đáp án và xem ô chữ đã được giải xong chưa nếu xong rồi thì kết thúc game.

8. Phản ứng dành cho ô đáp án:

– Nếu người chơi lỡ tay nhấn nhầm hoặc đoán không đúng thì sẽ chuyển đáp án ra.

a. Thêm vào trong LKTargetSlot.m những dòng lệnh sau:

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

LKMyScene * myScene = (LKMyScene *)self.scene;

[myScene lkGetBackTileChar:self];

}

=> Gọi ngược về scene khi có chạm vào trong đáp án

b. Trong LKMyScene.h ta thêm interface:

-(void)lkGetBackTileChar:(LKTargetSlot *)lkTargetChar;

Trong file LKMyScene.m, hoàn thành nó:

-(void)lkGetBackTileChar:(LKTargetSlot *)lkTargetChar{

for (int i = 0; i < lkSelectedArray.count; i++) {

LKTileChar * lkTileChar = [lkSelectedArray objectAtIndex:i];

if ([lkTileChar.lkCharacter isEqualToString:lkTargetChar.lkContent]) {

[self addChild:lkTileChar];

[lkSelectedArray removeObject:lkTileChar];

[lkTargetChar lkSetContent:@””];

break;

}

}

}

=> Thế là xong phần phản ứng của game

9. Kiểm tra kết thúc:

Kiếm tra xem câu trả lời của người chơi đã đúng chưa nếu đúng rồi thì kết thúc trò chơi hiện câu thông báo Game đã hoàn thành.

-(BOOL)lkCheckAnswer{

NSMutableString * lkResult = [NSMutableString stringWithString:@””];

 

for (int i = 0; i < lkTargetArray.count; i++) {

LKTargetSlot * lkSlot = [lkTargetArray objectAtIndex:i];

if([lkSlot.lkContent isEqualToString:@””]){

return NO;

} else {

[lkResult appendString:lkSlot.lkContent];

}

}

 

if([[lkResult uppercaseString] isEqualToString:[lkAnswer uppercaseString]])

{

[self lkGameOver];

return YES;

} else

return NO;

}

-(void)lkGameOver{

SKLabelNode * lkGameOverLabel = [SKLabelNode labelNodeWithFontNamed:@”Arial-BoldItalicMT”];

lkGameOverLabel.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));

lkGameOverLabel.text = @”You got this string!! This game is over!!”;

[self addChild:lkGameOverLabel];

}

=> Hoàn tất game

* Hình game khi kết thúc:

Kết thúc game với thông báo

Kết thúc game

 

C. Những thứ cần thiết để phát triển game:

1. Những tài nguyên cần có:

– Mình kèm theo những hình ảnh mà mình sử dụng trong game để các bạn tiện sử dụng và làm cho nhanh.

https://drive.google.com/folderview?id=0B38uO5_VDZL4NFV4MDlpLTM4WG8&usp=sharing

=> Những file này được lưu trên google của mình nên các bạn cứ tự nhiên download về và thực hành nhé.

2. Chương trình mẫu cho những ai không làm được:

– Mình kèm theo chương trình đã được viết hoàn chỉnh để các bạn sử dụng tham khảo luôn

<Các bạn chịu khó vào blog huygamer.wordpress.com để tải nhé>

https://drive.google.com/file/d/0B38uO5_VDZL4RlRPQjBZdGtlNVE/edit?usp=sharing

3. Chương trình hoàn chỉnh trên AppStore:

– Chương trình hoàn chỉnh có quá nhiều thứ nên mình không thể hướng dẫn chi tiết như chương trình mẫu được. Tuy nhiên nếu các lập trình viên IOS Việt Nam muốn có để tham khảo thì có thể liên hệ. Mã nguồn của game này cũng không quá quý giá đến mức mình không chia sẽ được, nên thấy ai hợp thì cùng nhau chia sẽ thôi.

Đây là link để download game trên AppStore, nếu được các bạn úng hộ download cho game Việt nhé. Viết hướng dẫn này mất cả 7 h (nguyên 1 ngày chủ nhật đoá).

Download game on App Store

4. Lời nhắn:

– Đây chỉ là một game nhỏ của mình và mình muốn đưa ra cho mọi người tham khảo, việc viết một hướng dẫn như thế này rất tốn công sức vì vậy, nếu muốn đăng trên các website của các bạn thì làm ơn để lại đường link tới website của mình và để lại 1 dòng comment trên blog huygamer.wordpress.com này để mình biết cái. Mình không muốn giấu những kiến thức này nhưng cũng không muốn những người chỉ đi copy và paste để ra bài chẳng ra 1 cái gì hết chỉ toàn chữ từ trên xuống dưới lại không có bold hay quote nào cả thật là mất thẩm mỹ vô cùng.

– Vì viết quá nhiều có những khúc mình quên mất một số dòng code và vị trí nó ở đâu thì các bạn có thể để lại comment để mình chỉnh sửa lại cũng được. Mình cũng sẽ để lại source code dành cho các bạn, nếu muốn sử dụng cứ pm. Những nước khác đang phát triển game cực thịnh và sẵn sàng chia sẽ kiến thức để phát triển ngành game của họ nhanh hơn còn Việt Nam có được tí code hay kiến thức thì cố gắng giấu vì sợ mọi người biết sẽ giành chén cơm củ mình. Thế thì muôn đời Việt Nam cũng chả bao giờ phát triển nổi.

 

 

 

Tagged: , , , , , , , , , , , , , , , , , , , , , , ,

7 thoughts on “Hướng dẫn làm game đuổi hình bắt chữ

  1. Chu Gia September 1, 2014 at 5:25 am Reply

    Bài viết rất hay. Bạn Huy có thể nói rõ hơn vế sprite kit không. Cách sử dụng nó như thế nào trong xcode.
    Cón vấn đề là làm sao lưu điểm số và lever của ngưới chơi khi người chơi mở lại ứng dụng.
    Mình mới học ios nên mong bạn giải thích 2 thắc mắc trên. Cám ơn

    • huygamer September 1, 2014 at 11:42 am Reply

      Sprite Kit là engine có sẵn trong Xcode và được Apple phát triển cho mọi game trong hệ sinh thái (Mac, iOS), bạn có thể tạo project Sprite Kit ngay trong Xcode mà không cần cài đặt thêm bất cứ thứ gì cả. Game này có thể lập trình cực kì nhanh chóng theo từng bước còn muốn lưu điểm số với lever thì có thể dùng NSUserDefault nằm ngay trong blog này nè

      https://huygamer.wordpress.com/lap-trinh-di-dong-ios/luu-tru-du-lieu-voi-nsuserdefault/

  2. Chu Gia September 1, 2014 at 12:27 pm Reply

    Cám ơn bạn Huy mặc dù chưa biết gì về Sprite Kit ^_^. Đón chờ những bài tiếp theo của bạn.

  3. Gia Chu September 25, 2014 at 11:02 am Reply

    tuyệt vời, bài viết quá hay cho những người đang học code, 1 ứng dụng tưởng chừng đơn giản nhưng khi code mới thấy có rất nhiều thứ phải quan tâm.

  4. Khánh November 14, 2014 at 6:10 am Reply

    Bạn ơi vào blog của bạn mà ko thấy code mẫu đâu, mình làm theo hướng dẫn mà toàn lỗi thôi

  5. Nghia Nguyen April 24, 2015 at 10:29 pm Reply

    Bạn post lên github đi. Down cho tiện. Ha ha.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: