Tài liệu mô tả quá trình thiết kế giao diện cho game Doraemon Puzzle phiên bản 1.2, bao gồm các màn hình như màn hình chính, game, tùy chọn, tác giả và kết thúc. Mỗi màn hình có chức năng riêng, với các nút điều khiển cho phép người dùng trải nghiệm và tương tác với game, như thiết lập độ khó và âm thanh. Tài liệu cũng nêu các thông báo và quy định khi người dùng tham gia trò chơi, cùng với các chi tiết kỹ thuật về xử lý hình ảnh và hiệu ứng.

1. ĐẠ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

3. Game Doraemon Puzzle Phiên bản: 1.2
Thiế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 Trần Hồ Lê Nguyên
hình
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

4. Game Doraemon Puzzle Phiên bản: 1.2
Thiế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 3
2.2 Màn hình game 5
2.3 Màn hình tùy chọn 7
2.4 Màn hình tác giả 8
2.5 Màn hình kết thúc 9
2.6 Các phần khác 9
FIT-HCMUS Trang 2

5. Game Doraemon Puzzle Phiên bản: 1.2
Thiế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ác
2 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 game
3 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 thanh
4 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.1Mà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
FIT-HCMUS Trang 3

6. Game Doraemon Puzzle Phiên bản: 1.2
Thiết kế giao diện Ngày: 12/01/2010
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.
Nút play
Khi ấ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 Continue
Khi ấ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 Option
Khi 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 About
Khi 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 Exit
Khi người dùng ấn vào thì chương trình sẽ được tắt.
FIT-HCMUS Trang 4

7. Game Doraemon Puzzle Phiên bản: 1.2
Thiết kế giao diện Ngày: 12/01/2010
2.2Mà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ình
Cá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

8. Game Doraemon Puzzle Phiên bản: 1.2
Thiế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 Puzzle
Khi ấ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 Open
Khi ấ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 again
Khi ấ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 Count
Mỗ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

9. Game Doraemon Puzzle Phiên bản: 1.2
Thiết kế giao diện Ngày: 12/01/2010
Dòng Time
Tự độ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.3Mà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 3x3ô
o 4x4ô
o 5x5ô
o 6x6ô
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

10. Game Doraemon Puzzle Phiên bản: 1.2
Thiế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.4Mà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 game
Thô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 OK
Khi 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

11. Game Doraemon Puzzle Phiên bản: 1.2
Thiết kế giao diện Ngày: 12/01/2010
2.5Mà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.6Các phần khác
2.6.1Các thông báo
Có lưu game khi thoát không?
Phải xáo game trước khi chơi
FIT-HCMUS Trang 9

12. Game Doraemon Puzzle Phiên bản: 1.2
Thiết kế giao diện Ngày: 12/01/2010
Nếu chưa lưu mà ấn nút continue
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.2Cá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.
FIT-HCMUS Trang 10

13. Game Doraemon Puzzle Phiên bản: 1.2
Thiết kế giao diện Ngày: 12/01/2010
2.6.3Doraemon 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.4Khá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.
Ô rỗng của game. (dùng photoshop thiết kế để có hiệu ứng 2D cho các ô game)
FIT-HCMUS Trang 11