13
ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHOA CÔNG NGHỆ THÔNG TIN CQ – HK1 – 2k9 – 2k10 Đồ án môn Phân tích và thiết kế phần mềm Lớp TH2006 + CNTN06 Thiết kế Giao diện Game Doraemon Puzzle Version 1.2 Sinh viên thực hiện: 0612292 – Trần Hồ Lê Nguyên 0612358 – Thái Ngân Phụng

Pttkpm 7 thiet kegiaodien done

Embed Size (px)

Citation preview

Page 1: Pttkpm 7 thiet kegiaodien done

ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHOA CÔNG NGHỆ THÔNG TIN

CQ – HK1 – 2k9 – 2k10

Đồ án môn Phân tích và thiết kế phần mềm

Lớp TH2006 + CNTN06

Thiết kế Giao diện Game Doraemon Puzzle

Version 1.2

Sinh viên thực hiện:0612292 – Trần Hồ Lê Nguyên0612358 – Thái Ngân Phụng

Page 2: Pttkpm 7 thiet kegiaodien done

Game Doraemon Puzzle Phiên bản: 1.2Thiết kế giao diện Ngày: 12/01/2010

Bảng ghi nhận thay đổi tài liệu

Ngày Phiên bản Mô tả Tác giả

11/01/2010 1.0 Thiết kế toàn bộ giao diện các màn hình

Trần Hồ Lê Nguyên

12/01/2010 1.1 Mô tả chi tiết các màn hình Trần Hồ Lê Nguyên

12/01/2010 1.2 Chỉnh sửa, bổ sung Thái Ngân Phụng

FIT-HCMUS Trang 1

Page 3: Pttkpm 7 thiet kegiaodien done

Game Doraemon Puzzle Phiên bản: 1.2Thiết kế giao diện Ngày: 12/01/2010

Mục lục

1. Danh sách các màn hình 3

2. Mô tả chi tiết mỗi màn hình 3

2.1 Màn hình chính 32.2 Màn hình game 52.3 Màn hình tùy chọn 72.4 Màn hình tác giả 82.5 Màn hình kết thúc 92.6 Các phần khác 9

FIT-HCMUS Trang 2

Page 4: Pttkpm 7 thiet kegiaodien done

Game Doraemon Puzzle Phiên bản: 1.2Thiết kế giao diện Ngày: 12/01/2010

1. Danh sách các màn hình

STT Tên màn hình Ý nghĩa/Ghi chú1 Màn hình chính Màn hình chính khi khởi động game, chứa các liên kết

đến các chức năng, màn hình khác2 Màn hình game Màn hình chơi game chính chứa các các chức năng

chính khi chơi game3 Màn hình tùy chọn Cho phép thiết lập các tùy chọn như mức độ khó dễ của

game, bật tắt âm thanh4 Màn hình tác giả Thông tin tác giả của game

5 Màn hình kết thúc Màn hình hiện lên khi người chơi chiến thắng trong game

2. Mô tả chi tiết mỗi màn hình

2.1 Màn hình chính

Màn hình chính gồm hình Doraemon chuyển động và gồm 5 nút sau: Play Continue Option About Exit

Hình Doraemon chuyển động được xử lý cắt từ một hình dài bao gồm nhiều trạng thái cảm xúc khác nhau của Doraemon như cười, khóc, buồn, vui, nhăn nhó,… Và tại một thời điểm nhất định thì sẽ hình nhỏ được cắt ra sẽ được thể hiện. Doraemon di chuyển từ bên trái màn hình qua bên phải màn hình và quay lại. Cứ như thế di chuyển qua lại.

FIT-HCMUS Trang 3

Page 5: Pttkpm 7 thiet kegiaodien done

Game Doraemon Puzzle Phiên bản: 1.2Thiết kế giao diện Ngày: 12/01/2010

Nút playKhi ấn vào sẽ được chuyển tới màn hình chơi game chính. Mặc định khi ấn vào

nút thì sẽ có một game mới được tạo ra với hình mặc định của game và số ô kích thước là 3x3.

Nút ContinueKhi ấn vào chương trình sẽ kiểm tra xem người dùng đã từng lưu game lần nào

chưa dựa vào file lưu game.Nếu có lưu chương trình sẽ chuyển vào màn hình chơi game chính nhưng game sẽ

được load lên tương ứng với lần chơi trước của người dùng như vị trí các ô, mức độ khó, hình mở trước đó do người dùng chọn nếu còn tồn tại sẽ được load lên tương ứng. (dữ liệu load được lấy từ file lưu game)

Nếu chưa lưu lần nào mà nhấn vào, chương trình sẽ hiện thông báo báo cho người dùng biết rằng game chưa được lưu lần nào.

Việc xử lý báo được dựa trên file lưu trữ game. Nếu file này bị người dùng xóa thì xem như game chưa lưu lần nào.

Nút OptionKhi người dùng ấn vào sẽ được chuyển tới màn hình thiết lập tương ứng. (độ khó

và có bật nhạc nền hay không)

Nút AboutKhi người dùng ấn vào sẽ được chuyển tới màn hình chứa thông tin tác giả của

chương trình.

Nút ExitKhi người dùng ấn vào thì chương trình sẽ được tắt.

FIT-HCMUS Trang 4

Page 6: Pttkpm 7 thiet kegiaodien done

Game Doraemon Puzzle Phiên bản: 1.2Thiết kế giao diện Ngày: 12/01/2010

2.2 Màn hình game

Gồm các thành phần chính sau: Khung hình chứa các ô hình Nút Puzzle Nút Open Nút Try again Nút exit Số đếm thể hiện số lần di chuyển ô Thời gian thể hiện khoảng thời gian người dùng đã chơi.

Khung hình chứa các ô hìnhCác ô hình được cắt ra và chừa 1 ô rỗng ở góc phải của của khung. Số ô hình

được cắt ra dựa vào thiết lập của người dùng trong màn hình Option. Nếu là 3x3 sẽ cắt thành 9 ô, 4x4 thì 16 ô…

Ô rỗng được thiết kế tạo hiệu ứng 2D, có chốt gài ra tạo cảm giác như những tấm hình được gài vào trong 1 cái khung thật sự. Viềng đen đậm xung quanh nhằm mục đích làm cho bức hình nổi lên như 1 ô thật sự chứ không đơn giản là một tấm hình nhỏ.

Vị trí các ô trên khung hình tùy thuộc vào việc xáo trộn hình và sẽ bị thay đổi khi người dùng ấn vào các ô xung quanh ô rỗng.

Nếu ấn vào một trong các ô nhưng chưa xáo hình thì chương trình sẽ hiện ra thông báo báo cho người dùng biết cần phải xáo hình.

Người dùng chỉ được ấn vào các ô xung quanh ô rỗng và ô đó và ô rỗng sẽ được hoán đổi vị trí cho nhau, cứ như vậy người dùng sẽ di chuyển cho đến khi kết thúc game tức bức hình được sắp xếp đúng như hình mẫu ban đầu.

Số ô được phép di chuyển dựa vào vị trí ô rỗng. Nếu ô rỗng ở các vị trí thì số ô có thể di chuyển được là 2 ô. Nếu năm ở cạnh của khung và không phải ở góc thì số ô có thể di chuyển được là 3 ô. Nếu ô rỗng ở vị trí vùng giữa thì số ô được phép di chuyển là 4 ô.

Mỗi lần di chuyển là di chuyển 1 ô và sẽ được cập nhật số lần di chuyển ở phần

FIT-HCMUS Trang 5

Page 7: Pttkpm 7 thiet kegiaodien done

Game Doraemon Puzzle Phiên bản: 1.2Thiết kế giao diện Ngày: 12/01/2010

Move Count bên dưới. Hình được load trên khung tùy thuộc vào việc người dùng chọn hình nào.Nếu người chơi di chuyển các ô trên khung đến khi kết thúc thì game sẽ dừng và

hiện ra màn hình báo chiến thắng.Việc di chuyển các ô có thể được thực hiện bằng cách nhấn chuột trực tiếp vào

các ô hình nhỏ hay dùng các phím mũi tên Lên – Xuống – Trái – Phải trên bàn phím để điều khiển. Khi ấn nút lên thì nếu có ô nằm dưới ô rỗng thì ô đó sẽ được di chuyển hoán đổi với ô rỗng, khi ấn phím mũi tên Phải thì thì ô bên trái ô rỗng (nếu có) sẽ di chuyển qua hoán đổi với ô rỗng,… và 2 phím còn lại cũng thao tác tương tự.

Nút PuzzleKhi ấn vào nút này, thì các ô trên khung hình sẽ được xáo trộn một cách ngẫu

nhiên. Người dùng bắt buộc phải ấn vào nút Puzzle để bắt đầu trò chơi. Nếu chưa ấn nút

puzzle mà ấn vào các ô trên khung thì sẽ hiện thông báo báo phải ấn.Khi ấn nút puzzle, bộ đếm số bước đi và thời gian chơi sẽ được kích hoạt. Cụ thể

mỗi lần di chuyển thì bộ đếm số bước đi sẽ tăng lên một. Thời gian được tính bằng phút và giây.

Nút OpenKhi ấn vào nút open, sẽ hiện lên dialog cho phép bạn truy xuất tới hình ảnh mà

người dùng muốn dùng để chơi trong game. Khi người dùng chọn thì game sẽ tự động reset lại coi như là một game mới. Và bạn phải ấn nút puzzle để có thể bắt đầu chơi lại.

Nút Try againKhi ấn vào nút này. Game sẽ được reset toàn bộ bao gồm số bước di chuyển, thời

gian chơi, cũng như các ô trên khung hình. Coi như bắt đầu một game mới. Và bạn phải ấn lại puzzle thì mới bắt đầu chơi game mới được.Nút Exit

Khi ấn nút này chương trình sẽ hiện lên thông báo bảo bạn có lưu game không.Nếu người dùng chọn có thì chương trình sẽ ghi nhận và lưu trạng thái số bước đi,

thời gian, trạng thái các ô trên khung ra file để bạn có thể tiếp tục bằng cách ấn continue khi vào game lần sau. Sau đó chương trình sẽ thoát khỏi màn hình game và trở về màn hình chính.

Nếu người dùng chọn không thì sẽ không xử lý lưu ra file và tiến hành thoát khỏi màn hình game, trở về màn hình chính.

Dòng Move CountMỗi khi người dùng chọn di chuyển một khối (chỉ được phép di chuyển sau khi ấn

nút puzzle) thì giá trị đếm bước đi sẽ được ghi nhận và tăng lên một (khi ấn puzzle nhiều lần vẫn được tính vào một lượt chơi nên giá trị này không bị reset về 0). Giới hạn của số bước đi là 9999 bước. Nếu vượt quá 9999 bước thì chương trình sẽ hiện thông báo lời khuyên nói người dùng nên dừng chơi. Sau đó giá trị này sẽ bị reset về 0. Nếu người dùng không muốn có thể tiếp tục chơi. Đây không phải là giá trị dùng để xét thắng hay thua.

FIT-HCMUS Trang 6

Page 8: Pttkpm 7 thiet kegiaodien done

Game Doraemon Puzzle Phiên bản: 1.2Thiết kế giao diện Ngày: 12/01/2010

Dòng TimeTự động tăng lên một sau mỗi giây kể từ khi người dùng ấn nút Puzzle lần đầu

tiên. (những lần ấn puzzle sau vẫn tính vào một lượt chơi nên không bị reset về 0) Và giới hạn là 99 phút 99 giây. Tương tự move count, đây không phải là giá trị thời gian xét thắng thua mà chỉ hiện lên khuyên người dùng dừng chơi nghỉ ngơi. Sau đó giá trị sẽ reset về 00:00. Và trạng thái game vẫn giữ nguyên ban đầu chứ không bắt phải chơi lại từ đầu.

2.3 Màn hình tùy chọn

Gồm 2 tùy chọn chính: Mức độ khó dễ (số ô) Bật tắt âm thanh

Mức độ khó dễGame có 5 tùy chọn về số ô được chi ra theo hàng dọc và hàng ngang. Khung

game là hình vuông nên số ô chia ra theo chiều ngang và chiều dọc là ngang nhau. Gồm các mức độ sau:

o 3 x 3 ôo 4 x 4 ôo 5 x 5 ôo 6 x 6 ôo 7 x 7 ô.

Khi người dùng nhấn vào chọn mức độ nào thì biểu tượng chọn sẽ hiển thị trên nhỏ bên cạnh mức độ đó. Giá trị tùy chọn tương đương radio button tức chỉ được phép chọn 1 trong 5 tùy chọn. Nếu chọn tùy chọn này sẽ mất đi tùy chọn cũ.

Âm thanh

FIT-HCMUS Trang 7

Page 9: Pttkpm 7 thiet kegiaodien done

Game Doraemon Puzzle Phiên bản: 1.2Thiết kế giao diện Ngày: 12/01/2010

Âm thanh có 2 trạng thái đó là bật và tắt. Khi người dùng nhấn chọn thì tương ứng biểu tượng chọn sẽ xuất hiện hay không. Nếu không xuất hiện mà nhấn vào thì biểu tượng sẽ hiện lên tức là bật âm thanh nhạc nền game và ngược lại nếu nhấn lần nữa thì âm thanh sẽ tắt đi và biểu tượng sẽ biến mất.

Giá trị tùy chọn tương đương check box Có thể có hoặc không.Nút OK

Khi người dùng ấn nút OK thì toàn bộ tùy chọn sẽ được lưu lại và chương trình sẽ thoát khỏi màn hình tùy chọn đưa người dùng về màn hình chính.

2.4 Màn hình tác giả

Gồm các thành phần chính: Thông tin tác giả của chương trình game Nút OK

Thông tin tác giả chương trình gameThông tin này chỉ được phép đọc và không được phép tùy chỉnh hay làm bất cứ

gì. Thông tin thể hiện tên của nhóm tác giả, thông tin nơi học tập / làm việc.

Nút OKKhi người dùng nhấn vào nút OK thì chương trình sẽ thoát khỏi màn hình tác giả

và chuyển về màn hình chính.

FIT-HCMUS Trang 8

Page 10: Pttkpm 7 thiet kegiaodien done

Game Doraemon Puzzle Phiên bản: 1.2Thiết kế giao diện Ngày: 12/01/2010

2.5 Màn hình kết thúc

Màn hình gồm dòng thông báo “You win” báo cho người dùng biết họ đã hoàn thành game và chiến thắng. Dòng thông báo hiện ra nhấp nháy nhấp nháy tạo cảm giác sống đống và vui tươi, mang lại cảm giác phấn khích cho người dùng.

Trên màn hình không có chức năng nào cả. Khi hiện ra màn hình trên, người dùng chỉ việc nhấn vào màn hình sẽ được chuyển ra lại màn hình chính.

2.6 Các phần khác

2.6.1 Các thông báo

Có lưu game khi thoát không?

Phải xáo game trước khi chơi

Nếu chưa lưu mà ấn nút continue

FIT-HCMUS Trang 9

Page 11: Pttkpm 7 thiet kegiaodien done

Game Doraemon Puzzle Phiên bản: 1.2Thiết kế giao diện Ngày: 12/01/2010

Nếu chơi game, thời gian trên màn hình chạy quá 99 phút hoặc di chuyển hơn 9999 bước thì sẽ hiện thông báo rằng bạn nên nghỉ chơi vì chơi nhiều quá là không tốt sau đó sẽ reset về 0. Chứ không phải là game over vì nhóm làm độ khó từ 3x3 tới 7x7 ô nên trong vòng 1, 2 tiếng chưa chắc đã giải được nếu chơi độ khó cao.

2.6.2 Các nút button

Các nút button đều được thiết kế ở 2 trạng thái là bình thường và khi nhấn vào.

Chỉ có button OK, No, Yes ở các bảng thông báo và trong màn hình Option thì chỉ có 1 hình.

2.6.3 Doraemon Sprite (UCSprite)

Xử lý cắt hình và tạo hiệu ứng cho doraemon thay đổi trạng thái biểu cảm và di chuyển qua lại trong màn hình.

2.6.4 Khác

Các con số, dấu check box đều là hình ảnh. Tiện cho việc về sau có thể mở rộng.

FIT-HCMUS Trang 10

Page 12: Pttkpm 7 thiet kegiaodien done

Game Doraemon Puzzle Phiên bản: 1.2Thiết kế giao diện Ngày: 12/01/2010

Ô rỗng của game. (dùng photoshop thiết kế để có hiệu ứng 2D cho các ô game)

FIT-HCMUS Trang 11