Tìm hiểu về lập trình game 2d trên nền tảng html5

TRƢỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN NGUYỄN VĂN CƯỜNG BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Tên đồ án: TÌM HIỂU VỀ LẬP TRÌNH GAME 2D TRÊN NỀN TẢNG HTML5 Nghệ An, tháng 05 năm 2016 TRƢỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Tên đồ án: TÌM HIỂU VỀ LẬP TRÌNH GAME 2D TRÊN NỀN TẢNG HTML5 Sinh viên thực hiện: Nguyễn Văn Cường - 1151070384 Lớp: 52K1 Giáo viên hướng dẫn: TS Trần Xuân Sang Nghệ An, tháng 05 năm 2016 Đồ án tốt nghiệp đại học LỜI CẢM ƠN Trong xu hƣớng phát triển công nghệ giới nay, xuất công nghệ mạnh mẽ thay công nghệ cũ Trƣớc đây, trò chơi giải trí Web sử dụng Flash, hiệu ,phổ biến cho phép ngƣời lập trình viên tạo game với hình ảnh, âm đặc sắc Những công nghệ tƣơng tự nhƣ Java Applet hay Silverlight không cạnh tranh đƣợc với Flash Tuy nhiên, Flash nặng nề, cần plugin để chạy đƣợc game Web , điểm yếu lớn Flash khả tƣơng tác Flash thành phần xung quang dƣờng nhƣ Chúng bị cô lập hoạt động độc lập với giới bên Giải pháp ban đầu quay lại sử dụng HTML,Javascript CSS, ta tạo game với hiệu ứng đặc biệt không bị giới hạn công nghệ Flash Tuy nhiên trở ngại lớn đủ API để tạo nhữg game tƣơng tự nhƣ Flash, tốc độ game HTML chậm hầu nhƣ chấm nhận đƣợc với game có u cầu cấu hình trung bình Nhƣng với đời HTML5 với thành phần hàm API , giới hạn bị phá bỏ bƣớc thay dần công nghệ cũ nhƣ Flash Không hỗ trợ cho việc thiết kế trang Web trực quan, HTML5 đƣợc áp dụng để tạo ứng dụng đồ thị,hiệu ứng chuyển động đặc biệt việc thiết kế game môi trƣờng 2D lẫn 3D Cùng với bảo tận tình Thầy Trần Xuân Sang em hoàn thành đề tài Trong q trình phân tích thiết kế khơng thể tránh khỏi sai sót mong cơ, thầy bạn đóng góp ý kiến để trang đề tài đƣợc hồn thiện Em xin chân thành cảm ơn! Sinh viên thực Nguyễn Văn Cường Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT Đồ án tốt nghiệp đại học MỤC LỤC Trang LỜI CẢM ƠN LỜI NÓI ĐẦU Error! Bookmark not defined Lý chọn đề tài Ý nghĩa thực tiễn đề tài CHƢƠNG TỔNG QUAN VỀ NỀN TẢNG HTML5 ,CSS VÀ JAVASCRIPT 1.1 Tìm hiểu HTML5 1.1.1 Khái niệm HTML lịch sử phát triển 1.1.2 HTML5 công nghệ tƣơng lai 1.2 Tìm hiểu CSS 1.2.1 Giới thiệu tổng quan CSS 1.2.2 Cách thức sử dụng 1.3 Tìm hiểu Javascript 1.3.1 Tổng quan Javascript 1.3.2 Cách khai báo sử dụng CHƢƠNG ĐỒ HỌA CANVAS TRÊN NỀN TẢNG HTML5 2.1 Các hàm API hỗ trợ lập trình game HTML5 2.1.1 Web Storage 2.1.2 Web SQL Database 10 2.1.3 Web Wroker 11 2.2 Đồ họa tảng HTML5 – Canvas 2D API 13 2.2.1 Khái niệm Canvas 13 2.2.2 Ứng dụng Canvas 14 2.2.3 Khai báo sử dụng Canvas 14 2.2.4 Bắt kiện trỏ chuột 18 2.2.5 Các công cụ vẽ đồ họa canvas 18 2.2.5.1.Các đƣờng vẽ 18 2.2.5.2 Vẽ hình chữ nhật 20 2.2.5.3 Vẽ đƣờng cong,hình trịn bán nguyệt 20 2.2.5.4 Các phép biến đổi tỉ lệ, tịnh tiến, quay tròn 21 2.2.5.5 Cắt ảnh 21 2.2.5.6 Viết chữ 22 CHƢƠNG XÂY DỰNG GAME DEMO ”KHÔNG CHIẾN” TRÊN NỀN TẢNG HTML5 24 3.1 Ý tƣởng game “Không Chiến” 24 Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT Đồ án tốt nghiệp đại học 3.2 Các đối tƣợng 2D – Phân vai nhân vật 24 3.3 Quá trình cài đặt xây dựng game 25 3.3 Cấu trúc chức hàm (function) game 26 3.3.1 WindowAnimationTiming API – Đồ họa chuyển động 26 3.3.3 initGame – Khởi tạo Game 27 3.3.4 MouseMovement – di chuyển 28 3.3.5 Gameupdate – hàm tính tốn xử lí va chạm 28 3.3.5.1 Va chạm Maichar Enemy 28 3.3.5.2 Va chạm Bullet Enemy 29 3.3.6 changeStater – reset khôi phục 30 3.3.7 gamePain – Vẽ đồ họa 31 3.3.8 gameloop - Vòng lặp game 31 3.3.9 Một số hình ảnh game “Khơng Chiến” 32 KẾT LUẬN Error! Bookmark not defined Kết đạt đƣợc 34 Những vấn đề hạn chế 34 TÀI LIỆU THAM KHẢO 35 Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT Đồ án tốt nghiệp đại học LỜI NÓI ĐẦU Lý chọn đề tài Nhƣ biết công nghệ HTML5 xu hƣớng tƣơng lai khơng việc thiết kế lập trình Web, mà việc xây dựng ứng dụng game với ƣu vƣợt trội, hỗ trợ mạnh mẽ đa tảng từ Web đến di động Để bắt kịp xu hƣớng phát triển công nghệ ,em định lựa chọn đề tài: “Tìm hiểu lập trình game 2D tảng HTML5” Ý nghĩa thực tiễn đề tài + Ý nghĩa ngƣời lập trình game ứng dụng: - HTML5 mạnh mẽ, hỗ trợ nhiều API mới,hỗ trợ nhiều tảng Các lập trình viên tạo đƣợc nhiều hiệu ứng đặc biệt mà không cần sử dụng đến plugin bên thứ ba - Đơn giản hóa code Website,game ứng dụng mà không làm giảm khả tƣơng tác vƣợt trội HTML5 + Ý nghĩa ngƣời dùng: - Ngƣời dùng tƣơng tác với Website (nhƣ xem video,nghe nhạc, chơi game,ứng dụng) cách nhanh chóng mà khơng cần cài đặt plugin nặng nề bên thứ ba nhƣ Flash - Hơn tốc độ phản hồi website nhanh khơng cần đến plugin khác - tính bảo mật đƣợc cải thiện nâng cấp, để bảo vệ tối đa thông tin ngƣời dùng duyệt web Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT Đồ án tốt nghiệp đại học CHƯƠNG TỔNG QUAN VỀ NỀN TẢNG HTML5 ,CSS VÀ JAVASCRIPT Tìm hiểu HTML5 1.1 Khái niệm HTML lịch sử phát triển HTML chữ viết tắt từ tiếng Anh: HyperText Markup Language – dịch sang tiếng Việt có nghĩa ngôn ngữ đánh dấu siêu văn Kỷ nguyên sơ khai web bắt đầu với HTML, sau đến CSS, đến ngơn ngữ lập trình web nhƣ Javascript, PHP, ASP.NET…Tất chúng nhiều thứ khác tạo thành giới web sống động nhƣ ngày Xuất lần vào năm 1989 nhà vật lý học Tim Berners-Lee muốn tìm cách thức giúp nhà khoa học trao đổi tài liệu nghiên cứu thơng qua Internet Ơng muốn khơng cách in văn trực tiếp Internet mà cách hiển thị đƣờng dẫn để đƣa ngƣời đọc đến phần khác tài liệu, chí dẫn đến tài liệu đƣợc đặt nơi khác mạng Internet Điều có nghĩa tạo nên hệ thống tài liệu đƣợc kết nối tồn cầu Ơng phát minh giao thức cho việc chuyển tải tài liệu lên mạng Internet, gọi Giao thức truyền siêu văn (HTTP) nhƣ phát minh đơn giản lệnh gọi Ngôn ngữ đánh dấu siêu văn (HTML) để mô tả cấu trúc tài liệu HTML đƣợc khai sinh nhanh chóng đƣợc ngƣời đón nhận Tháng 111994, trình duyệt Netscape đời mau chóng thành cơng Nó đƣa Web dễ tiếp cận với ngƣời, phổ biến nhiều ngƣời nghĩ Netscape tạo nên web Cùng năm, tổ chức W3C đƣợc thành lập với mục đích đặt tiêu chuẩn cho ngơn ngữ HTML Sau này, với phát triển Web, HTML nhanh chóng đƣợc nâng cấp, HTML 3.2 đƣợc đƣa vào năm 1997, sau mùa xuân năm 1998 HTML 4.0 Cùng với phát triển Internet, HTML 4.0 trở nên già cỗi, W3C tiếp tục đƣa phiên 4.1 4.2 đƣợc gọi XHTML (HTML + XML) Tuy nhiên chuyện chả dến đâu, lúc HTML trở nên khó hiểu so với ban đầu Lúc này, WHATWG( Web Hypertext Application Technology Working Group), nhóm nghiên cứu khác, tạo HTML5, đơn giản hơn, mạnh mẽ Sau W3C chọn HTML5 làm tiêu chuẩn cho Web 1.2 HTML5 công nghệ tương lai Tháng 1/2008, phiên nháp HTML5 đƣợc W3C công bố Tuy chƣa đƣợc hoàn thiện, nhƣng phiên thứ chứng tỏ đƣợc tầm quan trọng nhóm thẻ, thuộc tính, api mới,… Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT Đồ án tốt nghiệp đại học Với đời HTML5 phần cải thiện đƣợc trải nghiệm ngƣời dùng sử dụng website ứng dụng dùng HTML Ngồi ra, hỗ trợ cho lập trình viên nhà phát triển đỡ phải nhức đầu phải bị lệ thuộc nhiều vào phía thứ phải nhiều thời gian, công sức để tích hợp website, ứng dụng cho nhiều thiết bị khác nhƣ Desktop, Smartphone, Tablet, Tivi, Máy giặt,… Ƣu điểm vƣợt trội HTML5: - Làm giảm tầm quan trọng plugin - Hỗ trợ đồ họa tƣơng tác - Tăng tính bảo mật - Đơn giản hóa việc thiết kế code với CSS Javascript - Hoạt động xuyên suốt tảng 1.3 Tìm hiểu CSS 1.3.1 Giới thiệu tổng quan 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 đƣợc hiển thị nhƣ nào, cho phép bạn kiểm sốt phơng chữ, màu nền, kiểu CSS3 phiên CSS hỗ trợ nhiều tính mới, giúp cho việc thiết kế xây dựng trang web trờ lên dễ dàng hơn.Việc thay đổi trạng thái Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT Đồ án tốt nghiệp đại học trang web đơn giản bạn cần thay đổi file CSS thực thay đổi toàn trang web Phiên CSS3 Những ƣu điểm sử dụng CSS3: - Làm tăng sức mạnh cho HTML CSS kết hợp với HTML tạo nên trang web có kĩ thuật cao giao diện đẹp mắt Ngoài ra, sử dụng CSS giúp xếp thành phần HTML nhƣ: div, header, footer , body… cách khoa học - Giúp website có đồng tuyệt đối Dù website có trang bạn phải định dạng file CSS Khi bạn muốn phát triển giao diện website bạn phải thay đổi trang nhất, trang khác tự động thay đổi theo - CSS tƣơng thích với hầu hết trình duyệt Trong khn khổ đề tài, em sử dụng CSS để định dạng đồ họa Canvas cho game 2D 1.3.2 Cách thức sử dụng Có thể khai báo CSS nhiều cách khác Bạn đặt đoạn CSS bạn phía thẻ …, ghi file riêng với phần mở rộng “.css”, ngồi bạn cịn đặt chúng thẻ HTML riêng biệt Tuy nhiên tùy cách đặt khác mà độ ƣu tiên khác Mức độ ƣu tiên CSS theo thứ tự sau: Style đặt thẻ HTML riêng biệt, Style đặt phần , style đặt file mở rộng css , style mặc định trình duyệt Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT Đồ án tốt nghiệp đại học 1.4 Tìm hiểu Javascript 1.4.1 Tổng quan Javascript Lập trình game 2D tảng HTML đƣợc viết chủ yếu Javascript dựa tảng đồ họa HTML5 Sau ta tìm hiểu Javascrip Javascript (JS) ngơn ngữ lập trình kịch dự vào đối tƣợng phát triển có sẵn tự định nghĩa ra, javascript đƣợc sử dụng rộng rãi ứng dụng Website Javascript đƣợc hỗ trợ hầu nhƣ tất trình duyệt nhƣ Firefox, Chrome, chí trình duyệt thiết bị di động phải hỗ trợ JavaScript chứa thƣ viện tiêu chuẩn cho đối tƣợng, ví dụ nhƣ: Array, Date, Math, yếu tố cốt lõi ngơn ngữ lập trình nhƣ: toán tử (operators), cấu trúc điều khiển (control structures), câu lệnh JavaScript đƣợc mở rộng cho nhiều mục đích việc bổ sung thêm đối tƣợng 1.4.2 Cách khai báo sử dụng Javascript đƣợc tích hợp với HTML cách chứa cặp thẻ tài liệu HTML Javascript code Hoặc đƣợc viết file với phần mở rộng js (ví dụ: main.js) sau link vào tài liệu HTML thẻ Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT Đồ án tốt nghiệp đại học Để vẽ hình trịn phƣơng thức arc(), định nghĩa góc đầu góc cuối 2*PI, nhƣ đƣợc hiển thị dƣới context.arc(X, Y, radius, 0, * Math.PI, false); Để vẽ hình bán nguyệt phƣơng thức arc(), xác định góc cuối startingAngle + PI, nhƣ đƣợc hiển thị dƣới context.arc(X, Y, radius, startingAngle, startingAngle + Math.PI, false); 2.2.5.4 Các phép biến đổi tỉ lệ, tịnh tiến, quay tròn Các phƣơng thức translate(), scale(), rotate() tất sửa đổi ma trận Phƣơng thức translate(x, y) di chuyển mục canvas đến điểm khác lƣới Trong phƣơng thức translate(x,y), tọa độ (x,y) cho biết số điểm ảnh mà ảnh nên đƣợc di chuyển theo hƣớng -x số điểm ảnh mà ảnh phải đƣợc di chuyển theo hƣớng -y Nếu bạn vẽ ảnh (15,25) phƣơng thức drawImage(), bạn sử dụng phƣơng thức translate() có đối số (20,30), để đặt ảnh vị trí (15+20, 25+30) = (35, 55) Phƣơng thức scale(x,y) thay đổi kích thƣớc ảnh Đối số x xác định rõ hệ số tỷ lệ theo chiều ngang, đối số y xác định rõ hệ số tỷ lệ theo chiều dọc Ví dụ, scale(1.5, 75) tạo ảnh lớn 50% theo hƣớng x 75% kích thƣớc theo hƣớng y Phƣơng thức rotate(angle) chuyển đổi đối tƣợng dựa góc định 2.2.5.5 Cắt ảnh Có thể thay đổi ảnh cách cắt vùng chọn bên chúng Cắt canvas hàm chất tải lên phƣơng thức drawImage() Phƣơng thức drawImage() có ba tùy chọn sử dụng ba, năm, chín đối số - Cấu hình ba đối số : drawImage(image, dx, dy) - vẽ ảnh canvas tọa độ đích (dx, dy) Các tọa độ thiết lập góc bên trái hình ảnh - Cấu hình năm đối số : drawImage(image, dx, dy, dw, dh) - đƣa chiều rộng chiều cao ảnh đích Hình ảnh đƣợc điều chỉnh để phù hợp với chiều rộng chiều cao đích - Cấu hình chín đối sốdrawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) - lấy hình ảnh, cắt rời vùng hình chữ nhật bắt đầu tọa độ nguồn (sx,sy) với Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 21 Đồ án tốt nghiệp đại học chiều rộng chiều cao (sw,sh), điều chỉnh cho phù hợp với chiều rộng chiều cao (dw,dh) đích này, đặt canvas (dx,dy) 2.2.5.6 Viết chữ Một số thuộc tính quan trọng đƣợc sử dụng vẽ chữ canvas: - font: định font chữ - fillText(text, x, y): Vẽ chữ (text đƣợc đổ màu) vào canvas tọa độ (x,y).Mặc định màu đen - StrokeText(text, x, y) : Vẽ chữ (text không đổ màu) tọa độ ( x, y) - textBaseline: Thiết lập trả đƣờng sở chữ (top,…) - textAlign: Thiết lập trả vị trí lề nội dung Ví dụ: gameContext.font = "24px Arial"; gameContext.textBaseline = "top"; gameContext.textAlign = "center"; gameContext.fillStyle = "white"; gameContext.fillText("helloword!!!",300, 300); 3.2.5.7 Đổ bóng – Gradients Gradients (đổ bóng) đƣợc sử dụng để đổ màu cho hình chữ nhật, vịng trịn, đƣờng kẻ, chữ, có kiểu khác đổ bóng createLinearGradient createRadialGradient - createLinearGradient(x,y,x1,y1) - Tạo đổ bóng (tuyến tính) - createRadialGradient(x,y,r,x1,y1,r1) - Tạo đổ bóng xuyến/hình trịn Ví dụ dùng createLinearGradient đổ bóng c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var grd = ctx.createLinearGradient(0,0,200,0); // Tạo gradient grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); ctx.fillStyle = grd; // Đổ màu cho gradient ctx.fillRect(10,10,150,80); Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 22 Đồ án tốt nghiệp đại học Kết ta thu đƣợc : Ví dụ sử dụng createRadialGradient : var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Tạo gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Đổ màu cho gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); Kết ta thu đƣợc Trên số phƣơng thức để thực tạo lập đồ họa canvas HTML5 Tiếp theo Chƣơng em trình bày chi tiết trình tạo hiệu ứng chuyển động đối tƣợng đồ họa, nắm bắt xử lí kiện (event) javascrip Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 23 Đồ án tốt nghiệp đại học CHƯƠNG XÂY DỰNG GAME DEMO ”KHÔNG CHIẾN” TRÊN NỀN TẢNG HTML5 3.1 Ý tưởng game “Không Chiến” Game “không chiến” thuộc thể loại game bắn súng cổ điển Đối tƣợng đồ họa máy bay ngƣời chơi điều khiển gọi Mainchar Di chuyển theo trỏ chuột theo chiều ngang,dọc chéo tảng đồ họa Canvas Nhiệm vụ ngƣời chơi điều khiển Mainchar tránh máy bay địch, đƣợc gọi Enemy, dùng đạn tự động, gọi bullet, tiêu diệt máy bay địch Mục tiêu đạt điểm cao Các Enemy có tốc độ (speed) tăng nhanh dần theo điểm số ngƣời chơi nhằm gây phức tạp độ khó cho game Game kết thúc nhƣ ngƣời chơi điều khiển Mainchar va chạm với Enemy 3.2 Các đối tượng 2D – Phân vai nhân vật Ngoại trừ trị chơi,các hình ảnh game hình ảnh 2D ,Các hình ảnh 2D phần API Canvas, nhƣng chúng Đƣợc thực Canvas Các hình ảnh 2D nhân vật trò chơi bao gồm : - Mainchar : máy bay chính, ngƣời chơi điều khiển - Enemy: gồm máy bay địch, chuyển động ngƣợc hƣớng với Mainchar - Bullet: đạn tự động, Mainchar tự động bắn theo hƣớng ngƣợc với Enemy Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 24 Đồ án tốt nghiệp đại học Phân vai nhân vật: Các nhân vật 2D Hành vi - Di chuyển dựa vào trỏ chuột ngƣời chơi điều khiển Mainchar - Bắn đạn (bullet) - Va chạm nổ tung - Di chuyển theo hƣớng xuống Enemy - Tốc độ di chuyển dựa vào điểm số ngƣời chơi đạt đƣợc - Va chạm biến - Di chuyển theo hƣớng ngƣợc với Enemy Bullet - Tốc độ không đổi - va chạm biến 3.3 Quá trình cài đặt xây dựng game Trị chơi đƣợc viết ngơn ngữ HTML5, CSS Javascript trình soạn thảo code Notepad++ Tải từ https://notepad-plus-plus.org/ game chạy hầu hết trình duyệt nhƣ chrome, Firefox, opera phiên desktop,trừ Internet Explore, hỗ trợ HTML5 – Canvas hạn chế Tuy đƣợc viết từ HTML5, CSS Javascript, nhƣng hầu hết code dựa ngôn ngữ kịch Javascript thực chuyển động xử lí kiện HTML5 xây dựng tảng đồ họa Canvas để thực thi, CSS định dạng Canvas Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 25 Đồ án tốt nghiệp đại học Sau em xét cấu trúc file Javascript, cốt lõi game “không chiến” 3.4 Cấu trúc chức hàm (function) game 3.4.1 WindowAnimationTiming API – Đồ họa chuyển động Là API hỗ trợ hiệu ứng hình ảnh động canvas Với frame 60 (tốc độ 60 khung hình giây) window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); 3.4.2 LoadImages - Hàm tải trước tài nguyên hình ảnh Ta cần game chạy mƣợt mà,không bị độ trễ thời gian nạp hình ảnh (nếu game nhiều hình ảnh) Một giải pháp đơn giản đƣợc đƣa cho việc hình ảnh để sử dụng game đƣợc nạp vào trƣớc loadImage : đƣợc gọi trình duyệt thực onload, thƣờng việc đƣợc thực chạy game Nhiệm vụ tải tồn liệu(hình ảnh,âm thanh, ) lên sau tự động gọi đến hàm initGame() function loadImages(sources, callback) { var loadedImages = 0; var numImages = 0; for (var src in sources) { numImages++; } for (var src in sources) { images[src] = new Image(); images[src].onload = function(){ Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 26 Đồ án tốt nghiệp đại học if (++loadedImages >= numImages) { callback();} }; images[src].src = sources[src]; } } var sources = { mainChar : "imgs/mainchar.png", enemy: "imgs/Enemy.png", anhnen: "imgs/anhnen.png", mainmenu: "imgs/mainmenu.png", gameover: "imgs/gameover.png }; loadImages(sources, initGame); 3.4.3 initGame – Khởi tạo Game Hàm initGame có chức khởi tạo game Để khởi tạo giá trị ban đầu cần dùng sau.tìm kiếm so sánh điểm cao (mostTicksSurvived) phƣơng thức localStorage Lắng nghe kiện di chuyển chuột (mouseMovement) Cuối hàm gọi đến gameLoop() { gameCanvas = document.getElementById("gameCanvas"); gameContext = gameCanvas.getContext("2d"); currentState = gameStates.MAINMENU; if(localStorage.getItem("bestScore") != "undefined") {mostTicksSurvived = localStorage.getItem("bestScore"); } if (!mostTicksSurvived) { mostTicksSurvived = 0; } gameCanvas.addEventListener("mousemove", MouseMovement); gameLoop(); } Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 27 Đồ án tốt nghiệp đại học 3.4.4 MouseMovement – di chuyển Xác định tọa độ Mainchar cách lấy tọa độ trỏ chuột gắn vào Mainchar.mỗi lần trỏ chuột di chuyển Mainchar lại nhận tọa độ function MouseMovement(mouseEvent) { avatarX = mouseEvent.offsetX; avatarY = mouseEvent.offsetY; } 3.4.5 Gameupdate – hàm tính tốn xử lí va chạm Hàm gameUpdate có chức tính tốn xác định vị trí chuyển động Enemy, quan trọng kiểm tra va chạm đối tƣợng: Mainchar Enemy, Enemy Bullet 3.4.5.1 Va chạm Maichar Enemy Đối với toán kiểm tra va chạm, ta kiểm tra va chạm hình chữ nhật bao quanh hình ảnh Mainchar Enemy Va chạm xảy hình chữ nhật đè lên Ta thấy phép chiếu phƣơng X bị đè khi: maincharX < enemyX < (maincharX + width(mainchar)) hoặc: enemyX < maincharX < (enemyX + width(enemy)) Đối với phƣơng Y , bị đè khi: maincharY < enemyY < (maincharY + height(mainchar)) hoặc: enemyY < maincharY < (enemyY + height(enemy)) Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 28 Đồ án tốt nghiệp đại học Xét phƣơng x,y máy bay va chạm x y bị đè: maincharX < enemyX < (maincharX + width(mainchar)) hoặc: enemyX < maincharX < (enemyX + width(enemy)) và: maincharY < enemyY < (maincharY + height(mainchar)) hoặc: enemyY < maincharY < (enemyY + height(enemy)) Khi va chạm Mainchar Enemy xảy kết thúc game 4.3.5.2 Va chạm Bullet Enemy Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 29 Đồ án tốt nghiệp đại học Tƣơng tự nhƣ toán va chạm mainchar enemy Ta xét va chạm hai hình chữ nhật bao quanh bullet enemy: Ta thấy phép chiếu phƣơng X bị đè khi: bulletX < enemyX < (bulletX + width(bullet)) hoặc: enemyX < bulletX < (enemyX + width(enemy)) Đối với phƣơng Y , bị đè khi: bulletY < enemyY < (bulletY + height(bullet)) hoặc: enemyY < bulletY < (enemyY + height(enemy)) Xét phƣơng x,y máy bay va chạm x y bị đè: bulletX < enemyX < (bulletX + width(bullet)) hoặc: enemyX < bulletX < (enemyX + width(enemy)) và: bulletY < enemyY < (bulletY + height(bullet)) hoặc: enemyY < bulletY < (enemyY + height(enemy)) Khi va chạm bullet Enemy xảy ra, hai biến vị trí va chạm enemyYPositions.splice(currentEnemyNumber, 1); enemyXPositions.splice(currentEnemyNumber, 1); enemySpeed.splice(currentEnemyNumber, 1); bulletXPosition.splice(currentBulletNumber, 1); bulletYPosition.splice(currentBulletNumber, 1); 3.4.6 changeStater – reset khôi phục Đặt lại giá trị cho biến GAME OVER function changeState() { if (currentState == gameStates.MAINMENU) { currentState = gameStates.INGAME; Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 30 Đồ án tốt nghiệp đại học } else if (currentState == gameStates.GAMEOVER) { currentState = gameStates.INGAME; // reset enemyYPositions = []; enemyXPositions = []; enemySpeed = []; numberEnemyKilled = 0; bulletXPosition = []; bulletYPosition = []; ticksSurvived = 0; totalEnemy = 0; gameLevel = 4; } } 3.4.7 gamePain – Vẽ đồ họa Chức gamePain vẽ đối tƣợng đồ họa,hình ảnh,các context lên khung canvas cho trƣờng hợp MAINMENU, INGAME, GAMEOVER 3.4.8 gameloop - Vòng lặp game Phần cốt lõi game vịng lặp đƣợc dùng để cập nhật hiển thị trạng thái game Mơ tả hình ảnh : Vịng lặp gọi: gameUpdate(), gamePain(),window.requestAnimFrame lặp lại đến game ngừng Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 31 Đồ án tốt nghiệp đại học function gameLoop() { /*update*/ gameUpdate(); /* draw*/ gamePaint(); /* request*/ requestAnimFrame(function() { gameLoop(); }); } 3.4.9 Một số hình ảnh game “Khơng Chiến” MainMenu Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 32 Đồ án tốt nghiệp đại học InGame GAMEOVER Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 33 Đồ án tốt nghiệp đại học KẾT LUẬN Kết đạt Sau hoàn thành đồ án này, em học hỏi thu đƣợc nhiều kiến thức bổ ích cho thân, có ích cho sau trƣờng làm việc - Hiểu rõ mạnh HTML5, xu hƣớng công nghệ giới tƣơng lai Cách kết hợp HTML CSS, Javascript để tạo ý tƣởng hay - Hiểu rõ q trình phân tích vấn đề tính bất cập thực với lý thuyết - Rèn luyện khả phân tích tốn, tìm hiểu đọc tài liệu tiếng Việt nhƣ tiếng Anh - Biết cách thức trò chơi hoạt động cách tạo lập game đơn giản Những vấn đề hạn chế Bên cạnh kết đạt đƣợc em cịn hạn chế chƣa thực đƣợc đề tài - Giao diện cách thức chơi đơn giản - Còn tồn số bug,lỗi nhỏ chƣa khắc phục - Trải nghiệm ngƣời chơi chƣa cao Phương hướng khắc phục - Xây dựng hiệu ứng đồ họa đẹp mắt hơn,cách thức chơi thu hút - Tìm hiểu thêm API để mở rộng thêm chức sinh động - Kết hợp với tảng khác, hỗ trợ cho việc thiết kế game Qua thời gian nghiên cứu HTML5, tìm hiểu trình lập trình game, em xây dựng thành công ứng dụng game để thể đƣợc sức mạnh hỗ trợ HTML5 Trong q trình thực đề tài khơng thể tránh khỏi thiếu sót Kính mong thơng cảm, góp ý bổ sung thầy bạn để game ngày hoàn thiện Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 34 Đồ án tốt nghiệp đại học TÀI LIỆU THAM KHẢO [1] HTML5 Canvas - Lập trình Game 2D (yinyang) [2] Diễn đàn Cộng đồng web việt : www.webvn.com [3] forum cộng đồng lập trình: ntusts.com,vietgamedev.net,vnzoom.com [4] Wikipedia.com Nguyễn Văn Cường - Lớp 52K1 - Khoa CNTT 35 ... chọn đề tài: ? ?Tìm hiểu lập trình game 2D tảng HTML5? ?? Ý nghĩa thực tiễn đề tài + Ý nghĩa ngƣời lập trình game ứng dụng: - HTML5 mạnh mẽ, hỗ trợ nhiều API mới,hỗ trợ nhiều tảng Các lập trình viên... NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Tên đồ án: TÌM HIỂU VỀ LẬP TRÌNH GAME 2D TRÊN NỀN TẢNG HTML5 Sinh viên thực hiện: Nguyễn Văn Cường - 1151070384 Lớp: 52K1 Giáo viên... chơi thu hút - Tìm hiểu thêm API để mở rộng thêm chức sinh động - Kết hợp với tảng khác, hỗ trợ cho việc thiết kế game Qua thời gian nghiên cứu HTML5, tìm hiểu trình lập trình game, em xây dựng