Xây dựng ứng dụng trò chơi ghép hình swap it đatn

ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU ĐẠI HỌC ĐÀ NẴNG TẠI KON TUM o0o - ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG TRÒ CHƠI GHÉP HÌNH SWAP IT NGÀNH: CƠNG NGHỆ THƠNG TIN HỆ: VỪA LÀM VỪA HỌC SVTH: Bùi Hữu Bình MSSV: 144109001 SVTH: Nguyễn Ngọc Rin MSSV: 144109016 KON TUM, THÁNG 02/2017 ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU ĐẠI HỌC ĐÀ NẴNG TẠI KON TUM o0o - ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG TRÒ CHƠI GHÉP HÌNH SWAP IT NGÀNH: CƠNG NGHỆ THƠNG TIN HỆ: VỪA LÀM VỪA HỌC SVTH: Bùi Hữu Bình MSSV: 144109001 SVTH: Nguyễn Ngọc Rin MSSV: 144109016 GVHD: PGS.TS Nguyễn Thanh Bình KON TUM, THÁNG 02/2017 LỜI CẢM ƠN Trước tiên chúng em xin chân thành cảm ơn tất thầy cô trực tiếp dạy dỗ truyền đạt kiến thức môn học cho chúng em thời gian học trường Chúng em xin chân thành cám ơn thầy giáo PGS.TS Nguyễn Thanh Bình Cám ơn Thầy tận tình hướng dẫn góp ý cho chúng em trình thực đồ án Chúng em xin cám ơn người bạn lớp giúp đỡ chúng em suốt thời gian làm đồ án Mặc dù cố gắng, khả thời gian có hạn, đề tài nghiên cứu chắn có nhiều khiếm khuyết Vì chúng em mong Thầy Cô giáo bảo giúp đỡ thêm, mong đóng góp ý kiến bạn lớp để đề tài hoàn thiện i MỤC LỤC LỜI CẢM ƠN i MỤC LỤC ii DANH MỤC CÁC TỪ VIẾT TẮT iv DANH MỤC BẢNG BIỂU .v DANH MỤC CÁC HÌNH VẼ vi MỞ ĐẦU 1 Lý chọn đề tài .1 Mục đích ý nghĩa đề tài Phương pháp thực Bố cục luận văn CHƯƠNG 1: TỔNG QUAN 1.1 Cơ sở lý luận 1.1.1 Sự phát triển HTML .3 1.1.2 Các công nghệ .6 1.1.3 Khả kết hợp với công nghệ khác 16 1.2 Giới thiệu đề tài 26 1.2.1 Tên đề tài 26 1.2.2 Mục đích .26 1.2.3 Đối tượng, phạm vi .26 1.2.4 Môi trường, công cụ thực 26 1.3 Phân tích đặc tả yêu cầu .26 1.3.1 Mô tả toán .26 1.3.2 Phân tích đặc tả yêu cầu 27 CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .28 2.1 Phân tích .28 2.1.1 Các yêu cầu chức .28 2.1.2 Yêu cầu phi chức 28 ii 2.2 Các biểu đồ 28 2.2.1 Biểu đồ tổng quát 28 2.2.2 Use- case người chơi 29 2.2.3 Biểu đồ hoạt động .29 2.3 Thiết kế .31 2.3.1 Biểu đồ lớp 31 CHƯƠNG 3: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ 32 3.1 Công cụ môi trường phát triển 32 3.2 Các thành phần cài đặt .32 3.2.1 Yêu cầu tài nguyên 32 3.2.2 Hướng dẫn cài đặt triển khai .32 3.3 Đánh giá .32 3.4 Các giao diện - ảnh chụp hình 32 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 36 Kết đạt 36 Hạn chế 36 Hướng phát triển 36 TÀI LIỆU THAM KHẢO 37 iii DANH MỤC CÁC TỪ VIẾT TẮT Từ viết tắt 2D, 3D AJAX Ý nghĩa Two Dimension, Three Dimension: Hai chiều, ba chiều Asynchronous JavaScript and XML: JavaScript XML không đồng API Application Programming Interface: Giao diện lập trình ứng dụng CSS Cascading Style Sheets: Tập tin định kiểu theo tầng DOM Document Object Model: Mơ hình đối tượng tài liệu, giao diện lập trình ứng dụng (API) HTML HyperText Markup Language: Ngôn ngữ đánh dấu siêu văn HTTP HyperText Transfer Protocol: Giao thức truyền tải siêu văn JS JavaScript - ngôn ngữ lập trình kịch SVG Scalable Vector Graphic: Ngơn ngữ đánh dấu (định dạng) miêu tả hình ảnh đồ hoạ véc tơ chiều W3C World Wide Web Consortium: Tổ chức tiêu chuẩn thiết kế web WebGL Web-based Graphics Library XHTML Extensible Hypertext Markup Language: Ngôn ngữ siêu văn mở rộng XML eXtensible Markup Language: Ngôn ngữ đánh dấu mở rộng iv DANH MỤC BẢNG BIỂU STT Số hiệu bảng biểu Bảng 1.1 Một số giá trị màu Bảng 1.2 Các thành phần thuộc tính thẻ SVG Bảng 1.3 Sự hỗ trợ trình duyệt cho Canvas Bảng 1.4 Các thuộc tính phương thức thẻ Canvas Bảng 1.5 Các thành phần input Form 12 Bảng 1.6 Các thuộc tính thành phần Form 12 Bảng 1.7 Câu lệnh if JavaScript 18 Bảng 1.8 Các dạng biểu thức phổ biến JavaScript 21 Bảng 1.9 Các toán tử JavaScript 21 10 Bảng 1.10 Các thành phần CSS3 25 Tiêu đề bảng v Trang DANH MỤC CÁC HÌNH VẼ STT Số hiệu hình, Tiêu đề hình vẽ, ảnh Trang ảnh Hình 1.1 Các ảnh chụp hình trình duyệt web bị thiếu hỏng plugin Flash Hình 1.2 Mối quan hệ JavaScript, WebGL GPU 15 Hình 2.1 Biểu đồ tổng quát webgame 29 Hình 2.2 Biểu đồ Use - case người chơi 29 Hình 2.3 Biểu đồ hoạt động chức Chơi 30 Hình 2.4 Biểu đồ hoạt động chức Xem ảnh 30 Hình 2.5 Biểu đồ lớp 31 Hình 3.1 Thơng báo trang web 33 Hình 3.2 Giao diện trang web 33 10 Hình 3.3 Giao diện lựa chọn Số lượng mảnh ghép 33 11 Hình 3.4 Giao diện trò chơi nháy nút “Chơi!” 34 12 Hình 3.5 Ảnh chụp hình nháy nút “Xem ảnh!” 34 13 Hình 3.6 Giao diện trị chơi ghép lại mảnh ghép 35 14 Hình 3.7 Giao diện trò chơi ghép lại tranh 35 vi Mở đầu MỞ ĐẦU Lý chọn đề tài Trước đây, để chơi trò chơi máy tính, người dùng phải tìm, tải cài đặt game muốn để chơi Việc gây khó cho khơng người chơi, bước cài đặt Ngày nay, người chơi dần quen với webgame game chơi web, việc trở nên đơn giản nhiều, mà người chơi cần truy cập địa trang web trị chơi, đăng kí tài khoản chơi Chất lượng hình ảnh hiệu ứng đồ hoạ webgame khơng cạnh game cài đặt máy Qua tìm hiểu chơi số webgame vậy, cụ thể game 2048 địa https://gabrielecirulli.github.io/2048/, nhóm thực nhận thấy game hay có ý nghĩa với sinh viên cơng nghệ thơng tin nói chung Người chơi cần truy cập địa chơi phím mũi tên bàn phím mà khơng cần qua bước cài đặt phức tạp Với mong muốn tự làm webgame nhỏ, nhẹ ý nghĩa vậy, nhóm thực nghiên cứu qua ngôn ngữ HTML (HyperText Makeup Language - Ngôn ngữ đánh dấu siêu văn bản) JavaScript để ứng dụng xây dựng webgame Nhóm thực chúng em chọn đề tài: “Xây dựng ứng dụng trò chơi ghép hình Swap it” trị chơi ghép hình web cách sử dụng chuột máy tính Mục đích ý nghĩa đề tài Thuở bé, hẳn người có lần chơi ghép tranh từ mảnh ghép chia nhỏ Cảm giác hoàn thành tranh sau thời gian ghép mảnh lại với thật tuyệt Ngày mà máy tính Internet dường phần sống, trị chơi theo xuất máy tính, trị chơi ghép tranh vậy; có nhiều nhà phát triển sản xuất chúng dạng miễn phí trả phí với nhiều chức năng, tải máy tính cài đặt để chơi Với mong muốn tự viết ứng dụng thực tế web game ghép tranh để giải trí từ ngơn ngữ, cơng cụ lập trình với kiến thức học; người chơi trải qua bước cài đặt, thiết lập phức tạp, cần truy cập vào trang web chơi Đặc biệt với sống gia đình, cơng việc thành viên nhóm thực có liên quan đến cháu nhỏ, lứa tuổi bắt đầu tiếp xúc với máy tính thiết bị thơng minh, cháu ham thích trị chơi, nội dung giải trí thiết bị này, có số nội dung khơng phù hợp, nên nhóm thực mong muốn tạo trò chơi cho cháu, kiểm sốt nội dung cung cấp Trị chơi làm để giúp cháu có trị chơi giải đố, rèn luyện khả quan sát ghi nhớ và, thao tác với chuột máy tính Mở đầu Phương pháp thực - Tìm hiểu, xây dựng website với công nghệ HTML5, JavaScript CSS (Cascading Style Sheets - Tập tin định kiểu theo tầng) - Phân tích luật chơi, thiết kế hệ thống Thiết kế giao diện viết mã lệnh công cụ Notepad++, chạy thử nghiệm offline trình duyệt web Mozilla FireFox, Google Chrome, Cốc Cốc, Internet Explorer Bố cục luận văn MỞ ĐẦU Phần giới thiệu đề tài, lý chọn đề tài, mục đích ý nghĩa đề tài, chọn công nghệ, công cụ để cài đặt CHƯƠNG - TỔNG QUAN Chương nói sở lý luận để thực đề tài CHƯƠNG - PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG Chương phân tích chi tiết nội dung ứng dụng CHƯƠNG - TRIỂN KHAI VÀ ĐÁNH GIÁ Chương trình bày cài đặt đánh giá Chương 1: Tổng quan Trong cách sử dụng kể có hai cách sử dụng dùng nhiều Phần bên trình bày ví dụ minh hoạ cho hai cách sử dụng đầu tiên, nội dung ví dụ: Tạo nút bấm nội dung trang web (tệp HTML) có tên “Nhấn chuột đây”, mở tệp HTML với trình duyệt web đó, click chuột vào nút trình duyệt thông báo nội dung “Chào bạn!” Sử dụng External Script (Dùng file JavaScript bên ngoài): Viết hàm xử lý riêng, lưu lại thành file js, sau sử dụng thẻ tệp HTML Ví dụ minh hoạ: Chuẩn bị file JavaScript lưu với tên Script.js với mã lệnh sau: function Hello(){ alert("Chào bạn!"); } Sau viết tệp HTML minh hoạ: Vi du minh hoạ Sử dụng Internal Script (viết trực tiếp mã lệnh JavaScript tệp HTML, nội dung mã lệnh cặp thẻ ): Su dung Internal Script HTML function Hello(){ alert("Chào bạn!"); } 23 Chương 1: Tổng quan 1.1.3.2 Cascading Style Sheet (CSS) a) Giới thiệu Cascading Style Sheet (CSS) Cascading Style Sheets (CSS) file hỗ trợ trình duyệt web việc hiển thị trang HTML Các file CSS giúp cụ thể hóa thành phần trang HTML nên hiển thị nào, cho phép kiểm sốt phơng chữ, màu nền, kiểu nền, kích thước… Phiên tiêu chuẩn giới thiệu CSS1 vào ngày 17/12/1996 CSS3 bắt đầu vào năm 1998, phát triển nay, CSS3 phát triển nhằm tăng tương thích với HTML5 việc trình bày bố cục nội dung Giờ đây, tài liệu HTML có bố cục rõ ràng dễ hiểu, thuộc tính CSS thẻ HTML khơng cịn bị chồng lấn mà phân tách vùng chọn (selector),với “class” dấu # (theo sau dấu # tên class, sử dụng nhiều lần) “id” dấu chấm (.) (theo sau dấu chấm tên ID (Identification number: số định danh), sử dụng trang web, ID ưu tiên class) Ngoài việc hỗ trợ giao diện CSS3 cịn giúp loại bỏ đoạn code thừa HTML việc sử dụng thẻ thuộc tính HTML khơng cịn cần thiết Media Queries mắt CSS3 hỗ trợ tính tương thích với nhiều kích thước hình khác mà không cần chỉnh sửa nội dung hiển thị, làm tăng tính uyển chuyển ứng dụng Tập tin CSS lưu với phần mở rộng css Cấu trúc tập tin css: Có thể khai báo mã ký tự đầu file: @charset "utf-8"; Nội dung file css gồm phần chính: Vùngchọn{ ThuộcTính1: GiáTrị1; ThuộcTính2: GiáTrị2; … } 24 Chương 1: Tổng quan Trong đó: Vùngchọn: cách xác định thẻ HTML dựa cấu trúc phân cấp HTML Vùng chọn tạo nên dựa nhiều yếu tố định danh (id), tên lớp (class), quan hệ cha – – hậu duệ lớp, đối tượng… ThuộcTính: yếu tố muốn thay đổi thẻ HTML thuộc vùng chọn GiáTrị: thuộc tính yêu cầu giá trị khác Đó từ khóa định sẵn (none, block), tên màu hay mã màu (black, white, #000, #FFFFFF), hay giá trị kích thước tính px (pixel - điểm ảnh hình hiển thị), pt (point, inch = 72pt), em (đơn vị tham chiếu tỉ lệ với phần tử mẹ), rem (đơn vị tham chiếu tỉ lệ với phần tử gốc website), % Các thành phần CSS3: Bảng 1.10: Các thành phần CSS3 Thành phần Mô tả CSS3 Border Vẽ đường viền CSS3 Backgrounds Vẽ CSS3 Gradients Vẽ Gradient CSS3 Text Effects Làm hiệu ứng cho văn CSS3 Fonts Font (cho phép sử dụng font ngoài) CSS3 2D Transforms Các biến đổi 2D CSS3 3D Transforms Các biến đổi 3D CSS3 Transitions Các chuyển động CSS3 Animations Các ảnh động hoạt hình CSS3 Multiple Columns Chia cột bảng CSS3 User Interface Giao diện người dùng b) Sự kết hợp HTML5 CSS3 Có thể hình dung kết hợp HTML (HTML5) CSS3 là: HTML thể nội dung trang web qua thẻ, CSS3 tách riêng phần định dạng (style) khỏi nội dung trang HTML; trình bày cấu trúc bố cục trang web màu chữ, font chữ, quy định chiều dài rộng cho thẻ,… Nhúng CSS (CSS3) vào trang web (thẻ HTML) - Tạo riêng file CSS với nội dung trình bày, lưu lại thành file với tên phần mở rộng css Nhúng tệp css vào trang web thẻ với thuộc tính href đường dẫn đến file css tạo Ví dụ minh hoạ: - Chèn mã lệnh CSS3 vào cặp thẻ Ví dụ: 25 Chương 1: Tổng quan selector{ - Thuộc tính - Thuộc tính n } Ngồi cịn dùng nội dung định dạng style sau: - Chèn trực tiếp mã lệnh vào thẻ HTML với thuộc tính style, thuộc tính cách dấu chấm phẩy (;) bình thường Ví dụ minh hoạ:

Đây thẻ P, chữ xanh có gạch chân

1.2 Giới thiệu đề tài 1.2.1 Tên đề tài Xây dựng ứng dụng trị chơi ghép hình Swap it 1.2.2 Mục đích Xây dựng ứng dụng web game giải trí HTML5, có kết hợp JavaScript CSS Người chơi khơng phải qua bước tải cài đặt phần mềm ứng dụng khác, cần truy cập trang web chơi trực tiếp web 1.2.3 Đối tượng, phạm vi Ứng dụng webgame đáp ứng cho người chơi không giới hạn lứa tuổi, sử dụng trình duyệt web có hỗ trợ JavaScript chạy máy desktop, thích hợp cho đối tượng người chơi làm quen với việc sử dụng chuột máy tính 1.2.4 Môi trường, công cụ thực - Hệ điều hành Windows Ultimate 32bit Service Pack - Trình duyệt web Google Chrome 56.0.2924.87, Cốc Cốc 60.4.136, Mozilla FireFox 51.0.1 - Chương trình soạn thảo Notepad++ Color picker tool (https://developer.mozilla.org/enUS/docs/Web/CSS/CSS_Colors/Color_picker_tool) - CSS Button Generator (http://css3buttongenerator.com/) 1.3 Phân tích đặc tả u cầu 1.3.1 Mơ tả tốn Người chơi truy cập trang web chơi trực tiếp, không cần đăng kí hay tạo tài khoản 26 Chương 1: Tổng quan Người chơi lựa chọn mức độ chơi với nội dung trò chơi lựa chọn số lượng mảnh ghép tranh, có thơng báo người chơi hồn thành trị chơi Có đồng hồ tính thời gian cho trị chơi 1.3.2 Phân tích đặc tả yêu cầu 1.3.2.1 Yêu cầu chức Tải sẵn hình ảnh cho trị chơi để người chơi xem Người chơi nháy chuột để chọn số lượng mảnh ghép, khơng chọn trị chơi lấy giá trị mặc định, nháy nút “Chơi!” để chơi, trị chơi bắt đầu đồng hồ bắt đầu tính thời gian Người chơi dùng chuột để kéo thả mảnh ghép vị trí Trị chơi kết thúc người chơi giải đúng, đồng hồ dừng lại xuất thơng báo hồn thành 1.3.2.2 u cầu phi chức Website phải chạy nhanh, ổn định Website chạy, hiển thị với loại trình duyệt web phổ biến Google Chrome, Cốc Cốc, Mozilla FireFox… 27 Chương 2: Phân tích thiết kế hệ thống CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2.1 Phân tích 2.1.1 Các u cầu chức Hiển thị ảnh trị chơi: Hiển thị ảnh trị chơi hình, trị chơi thực hình Thực chọn lựa độ khó trị chơi qua số lượng mảnh ghép: Người dùng chọn số lượng mảnh ghép, khơng chọn chương trình tự động nhận giá trị mặc định Có chức xem ảnh gốc lời gợi ý Đồng hồ tính thời gian hồn thành trị chơi Thơng báo kết 2.1.1.1 Đặc tả yêu cầu chức Mục tiêu trò chơi ghép lại tranh hoàn chỉnh ban đầu từ mảnh ghép Người chơi tự chọn độ khó qua số lượng mảnh ghép (16, 25, 36, 64, 100) nháy nút “Chơi!” để bắt đầu chơi Nếu người chơi khơng chọn số lượng mảnh ghép trước trị chơi chọn số lượng mảnh ghép mặc định ban đầu 16 Người chơi sử dụng chuột để chọn mảnh ghép, kéo rê thả mảnh ghép chọn tới vị trí mảnh ghép thích hợp để ghép lại tranh hoàn chỉnh, mảnh ghép chọn mảnh ghép nơi mảnh ghép chọn thả xuống đổi vị trí cho Đây lý làm nên tên trò chơi Ngay người chơi nháy nút “Chơi!”, đồng hồ tính kích hoạt, đếm thời gian mà người chơi dùng để hồn thành trị chơi Người chơi nhấn nút chơi để chơi lại (đồng hồ tính lại thời gian), lúc không chọn lại số lượng mảnh ghép Người chơi chọn lại mảnh ghép hồn thành tranh load lại trị chơi Trò chơi kết thúc người chơi ghép lại mảnh ghép vị trí ban đầu, đồng hồ tính thời gian dừng lại, thơng báo hồn thành trị chơi xuất 2.1.2 u cầu phi chức Webgame có giao diện đơn giản, dễ thao tác Trang web hoạt động trình duyệt web phổ biến 2.2 Các biểu đồ 2.2.1 Biểu đồ tổng quát 28 Chương 2: Phân tích thiết kế hệ thống Swap it Chơi Người chơi Xem ảnh gốc Hình 2.1: Biểu đồ tổng quát webgame 2.2.2 Use- case người chơi Swap it Chơi Người chơi Xem ảnh gốc Hình 2.2: Biểu đồ Use - case người chơi 2.2.2.1 Đặc tả Use - case người chơi Use - case cho phép người chơi thực chức trị chơi Chơi Xem ảnh gốc Tác nhân chính: Người chơi 2.2.3 Biểu đồ hoạt động Chức Chơi 29 Chương 2: Phân tích thiết kế hệ thống Swap it Chức Chơi Nháy chọn số lượng mảnh ghép hộp “Số mảnh ghép” Vào trang web Nhấn nút “Chơi!” Người chơi xếp mảnh ghép Người chơi ghép sai Người chơi ghép Thơng báo hồn thành Hình 2.3: Biểu đồ hoạt động chức Chơi Chức Xem ảnh Swap it Chức Xem ảnh Vào trang web Nhấn nút “Xem ảnh” Hiển thị ảnh gốc Hình 2.4: Biểu đồ hoạt động 30 chức Xem ảnh Chương 2: Phân tích thiết kế hệ thống 2.3 Thiết kế 2.3.1 Biểu đồ lớp Gamearea: Các hàm xử lý trị chơi GamePlay: Các phản ứng trò chơi như: chọn số mảnh ghép, thời gian, bắt đầu kết thúc trò chơi GamePlay GameArea ChangeNum() stopClock() startClock() showtime() resetClock() shufflePuzzle() createTitle(msg) init() onImage(e) setCanvas() initPuzzle() buildPieces() shufflePuzzle() shuffleArray(o) onPuzzleClick(e) checkPieceClicked() updatePuzzle(e) pieceDropped(e) resetPuzzleAndCheckWin() gameOver() Hình 2.5: Biểu đồ lớp trị chơi 31 Kết luận hướng phát triển CHƯƠNG 3: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ 3.1 Công cụ môi trường phát triển Các công cụ môi trường phát triển: - Hệ điều hành Windows Ultimate 32bit Service Pack - Công cụ soạn thảo mã lệnh: Notepad ++ v7.3 Color picker tool (https://developer.mozilla.org/enUS/docs/Web/CSS/CSS_Colors/Color_picker_tool) - CSS Button Generator (http://css3buttongenerator.com/) Môi trường chạy thử nghiệm: - Hệ điều hành Windows Ultimate Service Pack - Bộ mã nguồn trang web đặt máy tính nhóm thực hiện, - Các trình duyệt web Mozilla FireFox 51.0.1 Internet Explorer 11.0.9600.17843, Google Chrome 56.0.2924.87 Cốc cốc 60.4.136 chạy mở file mã nguồn offline 3.2 Các thành phần cài đặt 3.2.1 u cầu tài ngun Trình duyệt web phải bật tính cho phép chạy bật sẵn JavaScript 3.2.2 Hướng dẫn cài đặt triển khai Các file thành phần trò chơi tổ chức sau: - Hai file html: file SwapIt.html file chính, trị chơi hiển thị file load, file XemAnh.html file hiển thị ảnh trị chơi (như lời gợi ý cho người chơi) - Thư mục js chứa file mã nguồn xử lý trò chơi - Thư mục css chứa file css - Thư mục pics chứa tập tin ảnh phục vụ trò chơi 3.3 Đánh giá Trò chơi Swap It hồn thành u cầu chức chính, trang web hoạt động máy tính để bàn chế độ offline trình duyệt web chạy thử Mozilla FireFox 51.0.1 Internet Explorer 11.0.9600.17843, Google Chrome 56.0.2924.87 Cốc cốc 60.4.136 3.4 Các giao diện - ảnh chụp hình Các giao diện, ảnh chụp hình trị chơi thực với trình duyệt web Mozilla FireFox 51.0.1 32 Kết luận hướng phát triển Thơng báo trang web Hình 3.1: Thông báo trang web Giao diện trang web tải xong Hình 3.2: Giao diện trang web Lựa chọn số lượng mảnh ghép Hình 3.3: Giao diện lựa chọn Số lượng mảnh ghép 33 Kết luận hướng phát triển Người chơi bắt đầu chơi cách nháy nút “Chơi!” Hình 3.4: Giao diện trị chơi sau nháy nút “Chơi!” Người chơi nháy nút “Xem ảnh!” Hình 3.5: Ảnh chụp hình nháy nút “Xem ảnh!” 34 Kết luận hướng phát triển Thực ghép lại mảnh ghép Hình 3.6: Giao diện trò chơi ghép lại mảnh ghép Khi người chơi ghép lại hồn chỉnh hình ban dầu Hình 3.7: Giao diện trò chơi ghép lại tranh 35 Kết luận hướng phát triển KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết đạt Thực tải trang web offline máy tính, trang web trị chơi hoạt động tốt trình duyệt thử nghiệm Các chức “Chơi!”, “Xem ảnh!” hoạt động tốt, đồng hồ tính cho trị chơi hoạt động tốt Hạn chế Bố cục hiển thị trang web chưa đẹp Chưa có tính chia sẻ kết hoàn thành Muốn thay đổi ảnh cho trị chơi phải thực thủ cơng mã nguồn Hướng phát triển Căn chỉnh bố cục trang cho đẹp Tăng độ khó cho trị chơi: Chơi theo màn, sau ảnh “khó” để ghép ảnh trước Thêm chức “Người chơi tự chọn ảnh”; thay dùng ảnh mặc định trị chơi cho phép người chơi up ảnh họ lên chơi với ảnh Thêm tính chia sẻ kết trò chơi qua mạng xã hội Facebook Thêm chức hiển thị trang web với ngơn ngữ nước ngồi Thiết kế, tối ưu mã lệnh để trang web hoạt động tốt thiết bị thông minh cầm tay khác 36 Tài liệu tham khảo TÀI LIỆU THAM KHẢO [1] Brian P Hogan (2011), HTML5 and CSS3: Develop with Tomorrow's Standards Today, Pragmatic Bookshelf, Texas [2] Jeremy Keith (2010), HTML5 for web designers, A Book Apart, New York [3] http://vietgamedev.net, http://yinyangit.wordpress.com (1/7/2012), HTML5 Canvas - Lập trình game 2D v1.0 [4] Nguyễn Trường Sinh (2011), Thiết kế Web động với JavaScript, NXB Lao động Xã hội, Hà Nội [5] W3schools, HTML5 Tutorial, http://www.w3schools.com/html/default.asp [6] W3schools, JavaScript Tutorial, http://www.w3schools.com/js/default.asp [7] Vietjack, Học Javascript nâng cao, Học lập trình Javascript miễn phí hay nhất, http://vietjack.com/javascript/ [8] Grace Walker (05/04/2013), Các quy tắc HTML5, Phần 1: Bắt đầu, https://www.ibm.com/developerworks/vn/library/wa-html5fundamentals/ [9] Nhiều tác giả (01/06/2016), HTML5, https://developer.mozilla.org/enUS/docs/Web/Guide/HTML/HTML5 [10] Webvn, Canvas HTML, https://webvn.com/canvas-trong-html5/ [11] Wikipedia, Web 2.0, http://en.wikipedia.org/wiki/Web_2.0 [12] Wikipedia, HTML5, http://en.wikipedia.org/wiki/HTML5 [13] Mozilla Developer Network, Color Picker tool, https://developer.mozilla.org/enUS/docs/Web/CSS/CSS_Colors/Color_picker_tool [14] CSS Button Generator, CSS Button Generator, http://css3buttongenerator.com 37 ... siêu văn bản) JavaScript để ứng dụng xây dựng webgame Nhóm thực chúng em chọn đề tài: ? ?Xây dựng ứng dụng trò chơi ghép hình Swap it? ?? trị chơi ghép hình web cách sử dụng chuột máy tính Mục đích... Tên đề tài Xây dựng ứng dụng trị chơi ghép hình Swap it 1.2.2 Mục đích Xây dựng ứng dụng web game giải trí HTML5, có kết hợp JavaScript CSS Người chơi qua bước tải cài đặt phần mềm ứng dụng khác,... kế hệ thống Swap it Chơi Người chơi Xem ảnh gốc Hình 2.1: Biểu đồ tổng quát webgame 2.2.2 Use- case người chơi Swap it Chơi Người chơi Xem ảnh gốc Hình 2.2: Biểu đồ Use - case người chơi 2.2.2.1