Chương 1: CƠ SỞ LÝ THUYẾT 1. Cơ bản về HTML HTML là ngôn ngữ đánh dấu siêu văn bản, nó chỉ rõ một trang Web sẽ được hiển thị như thế nào trong một trình duyệt. HTML không phải là ngôn ngữ lập trình, nó là ngôn ngữ trình bày. Tài liệu HTML tạo thành mã nguồn của trang Web.
Trình duyệt đọc các file có đuôi .html và hiển thị trang Web đó theo các lệnh có trong đó. Ví dụ, theo cú pháp HTML dưới đây sẽ hiển thị thông điệp: “Chào mừng các bạn đến với mô phỏng Game "Cuộc chiến không trung" xây dựng trên nền HTML5 - Đề tài khóa luận tốt nghiệp của sinh viên: Nguyễn Tất Thuận - Lớp: DT12CTT01 - Trường Đại học Quảng Nam. Chúc các bạn có những trải nghiệm mới!“ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Anh hùng không trung</title> <script src=".js"></script> <script src=".js"></script> <link rel="stylesheet" href=".css"> </head> <body> <marquee onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="5"> Chào mừng các bạn đến với mô phỏng Game "Cuộc chiến không trung" xây dựng trên nền HTML5 – Đề tài khóa luận tốt nghiệp của sinh viên: Nguyễn Tất Thuận - Lớp: DT12CTT01 - Trường Đại học Quảng Nam. Chúc các bạn có những trải nghiệm mới ! </marquee> </body> Sinh viên thực hiện: Nguyễn Tất Thuận Trang 4 Khóa luận tốt nghiệp: Mô phỏng game bắn máy bay trên Web </html> Một tài liệu HTML gồm 3 phần cơ bản: Phần html: <html>…</html> là cặp thẻ ngoài cùng, chứa hết các thẻ còn lại.
Phần tiêu đề: <head>…</head>. Tiêu đề nằm trong thẻ title, bắt đầu bằng thẻ <title> và kết thúc là thẻ </title>. Phần thân: Phần thân bắt đầu bằng thẻ <body> và kết thúc bằng thẻ </body>. Thuộc tính thẻ: Là những đặc tính, tính chất mang theo để trình duyệt định dạng và hiển thị thẻ đó.
Mỗi thẻ có thể có một hoặc nhiều thuộc tính. Mỗi thuộc tính có tên thuộc tính và giá trị của thuộc tính, giá trị được đặt trong dấu "". Cú pháp: Một thẻ HTML bao gồm ba thành phần: tên thẻ, thuộc tính của thẻ, giá trị của thuộc tính đó. Ví dụ về một thẻ HTML5: <canvas id ="gameCanvas" onclick="Dieukhiengame();" width="800" height="480"></canvas> Sinh viên thực hiện: Nguyễn Tất Thuận Trang 5 Khóa luận tốt nghiệp: Mô phỏng game bắn máy bay trên Web Hình 1.1: Khung Canvas trên Web Ở ví dụ trên: "<canvas>" là một thẻ HTML5 có các thành phần: Tên thẻ: canvas Thuộc tính: width, height (thể hiện chiều rộng, chiều cao vùng Canvas) Giá trị của thuộc tính: 800, 480 Nguyên tắc khai báo một thẻ HTML: Thẻ HTML có hai loại: Thẻ đơn và thẻ kép.
Đối với một thẻ đơn thì kết thúc mỗi thẻ đơn ta phải có dấu đóng thẻ: Ví dụ: <br/>, <hr/>, <meta />. Đối với một thẻ kép: Đối với một thẻ HTML kép (cặp thẻ) luôn bắt đầu bằng một thẻ mở và kết thúc bằng một thẻ đóng. Ví dụ: <p></p>, <font></font>, <div></div>. Đối với bất kỳ thẻ HTML nào đều có thuộc tính và giá trị.
Giới thiệu về CSS Định nghĩa: CSS là một ngôn ngữ quy định cách trình bày của các thẻ HTML trên trang Web. CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình duyệt gần như giống nhau, bằng cách quy định các thuộc tính cho thẻ HTML đó. Cách chèn CSS vào trang HTML: Chúng ta có 3 cách để đưa nội dung của CSS vào trang Web như sau: Sinh viên thực hiện: Nguyễn Tất Thuận Trang 6 Khóa luận tốt nghiệp: Mô phỏng game bắn máy bay trên Web Cách 1: Chèn nội dung CSS vào trong cặp thẻ <style></style> trong phần <head></head>. Cách 2: Chèn trực tiếp vào bên trong thẻ HTML.
Cách 3: Liên kết với một file .css bên ngoài. <link rel="stylesheet" href="Đường dẫn đến file .css" type="text/css" /> 1. Tổng quan về Javascript Định nghĩa: Javascript là một ngôn ngữ thông dịch hay một ngôn ngữ kịch bản, trình duyệt sẽ thông dịch và thực hiện các lệnh Javascipt. Cách nhúng Javascript vào trong tập tin HTML Có 2 cách để nhúng Javascript vào trong tập tin HTML: Cách 1: Viết chương trình Javascript trực tiếp trong file HTML.
<script type=”text/javascript”> Các lệnh Javascript </script> Cách 2: Sử dụng tập tin Javascript bên ngoài.js"></script> Ví dụ về Javascript: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <script> document.write("<p>Chào mừng bạn đến với game HTML5</p> "); </script> </body> </html> Sinh viên thực hiện: Nguyễn Tất Thuận Trang 7 Khóa luận tốt nghiệp: Mô phỏng game bắn máy bay trên Web HTML DOM Event: Các sự kiên liên quan tới con chuột: onlick, onmouseover, onmouseout… Các sự kiện liên quan tới bàn phím: onkeydown, onkeypress, onkeyup… Các sự kiện liên quan tới trình duyệt: onload, onscroll… Các sự kiện liên quan tới form và các thẻ trong form: onblur, onchange, onfocus, onsubmit… 1. Giới thiệu về HTML5 Sự tiện ích: Đối với người dùng: HTML5 cho phép mở rộng dễ dàng với API. Hỗ trợ bộ nhớ ứng dụng (application cache) và khả năng offline cho phép chúng ta kiểm tra email ngay cả khi làm việc offline qua trình duyệt. Với HTML5, những khả năng này hiện đã sẵn sàng và có thể dễ dàng mở rộng với JavaScript.
Tốc độ tải trang được tối ưu rất đáng kể, ngoài ra tính năng bảo mật cũng được cải thiện và nâng cấp, để bảo vệ tối đa thông tin người dùng khi duyệt Web. Đối với các lập trình viên: HTML5 phù hợp với các nền tảng thiết bị khác nhau, giúp các lập trình viên và nhà phát triển chỉ cần làm “Một lần cho tất cả”. Hệ thống các API ngày càng phong phú, giúp các lập trình viên có thể tự do sáng tạo và bay bổng cho website, ứng dụng. Một số tính năng mới thú vị trong HTML5: Lưu trữ ngoại tuyến (offline): cho phép lưu trữ dữ liệu liên tục hay từng phần mà không cần cài đặt tính năng bổ sung (plug-in).
Truyền nhận hình ảnh (video) và âm thanh (audio) trung thực. Định vị người dùng (geolocation): HTML5 có thể giúp xác định vị trí của chúng ta và dùng nó để thực hiện cho một công việc nào đó, chẳng hạn phục vụ cho các kết quả tìm kiếm, cập nhật Twitter hay dùng cho các thiết bị định vị. Sinh viên thực hiện: Nguyễn Tất Thuận Trang 8 Khóa luận tốt nghiệp: Mô phỏng game bắn máy bay trên Web Mẫu nhập thông minh (smarter form): hộp tìm kiếm, dòng nhập thông tin, vùng thông tin hợp lệ… sẽ được kiểm soát tốt hơn, ít gây phiền toái cho người dùng khi họ điền thông tin, dữ liệu. Tiếp cận các ứng dụng Web dễ dàng.
Video: HTML5 sẽ cho phép ta xem video, nghe audio mà không cần sử dụng một plugin như Flash hoặc Silverlight. Nhúng video <video controls width='640' height='360'> <source src='video/FromMeToYou.mp4'> <source src='video/FromMeToYou.ogg'> </video> Hình 1.2: Video của HTML5 Thuộc tính của thẻ video: + Autoplay: video sẽ tự động bắt đầu chơi lại (playback) ngay sau khi nó có thể thực hiện mà không dừng lại để hoàn thành việc tải dữ liệu. + Controls: cho phép người sử dụng để điều khiển video. + Loop: cho phép video tự động chơi lại từ đầu sau khi kết thúc.
+ Src: xác định nguồn video để nhúng. + Width, Height: thuộc tính này xác định độ rộng, độ cao khu vực hiển thị của video. Sinh viên thực hiện: Nguyễn Tất Thuận Trang 9 Khóa luận tốt nghiệp: Mô phỏng game bắn máy bay trên Web Audio: Nhúng audio <audio controls width='800' height='500' > <source src='music/SauTatCa.mp3' type="audio/mp3" / > <source src='music/SauTatCa.ogg' type="audio/ogg" / > </audio> Hình 1.3: Audio của HTML5 Các thuộc tính của audio: + Autoplay: audio sẽ tự động bắt đầu. + Controls: cho phép người sử dụng điều khiển audio.
+ Loop: cho phép audio tự động chơi lại. + Src: nguồn của audio được nhúng. Cơ bản về CSS3 CSS3 là tiêu chuẩn mới nhất của CSS, hoàn toàn tương thích với các phiên bản trước. Một số thành phần quan trọng trong CSS3: Seclectors Box model Background and borders Text effects 2D/3D transformations Animations Multiple column layout User Interface Những thuộc tính mới trong CSS3 Border-radius: border-radius: tạo ra 4 góc bo tròn cho đường viền.
webkit-border-radius: giúp IE9 + hỗ trợ. moz-border-radius: giúp firefox hỗ trợ. Sinh viên thực hiện: Nguyễn Tất Thuận Trang 10 Khóa luận tốt nghiệp: Mô phỏng game bắn máy bay trên Web Border-image: Cú pháp: Border-image: source slice width outset repeat; slice: phần bù bên trong hình border. outset: số lượng diện tích mà hình nền border mở rộng.
CSS3 Gradient: Gradient là thành phần phổ biến trên trang Web. Gradient thường bao gồm: 2 điểm dừng màu (color stop) và 1 điểm chuyển màu.4: Thang màu Gradient Với CSS3 sử dụng định nghĩa Gradient: Linear-gradient Radial-gradient Tạo gradient CSS3: Gradient { width: 450px; border: #000 4px solid; background-color: #fff; background-image: -moz-linear-gradient(white, black); background-image: - webkit-gradient(linear, 0 0, 0 100%, from(white), to (back)); } Hình 1.5: Gradient CSS3 Sinh viên thực hiện: Nguyễn Tất Thuận Trang 11 Khóa luận tốt nghiệp: Mô phỏng game bắn máy bay trên Web Thêm góc độ và nhiều điểm dừng, mục đích là để: Tăng thêm sự đa dạng của Gradient. Kiểm soát tốt hơn. Ví dụ: background-image: -moz-linear-gradient(45deg, white, green, black); Hình 1.6: Gradient với nhiều góc độ và điểm dừng Lặp lại Gradient: background-image: -moz-repeating-linear-gradient(left, white 80%, black, white); Hình 1.7: Lặp lại Gradient Sinh viên thực hiện: Nguyễn Tất Thuận Trang 12 Khóa luận tốt nghiệp: Mô phỏng game bắn máy bay trên Web Chương 2: KĨ THUẬT LẬP TRÌNH GAME 2.
Vẽ ảnh và thao tác với pixel 2. Nạp và vẽ ảnh Để vẽ một ảnh ra Canvas, ta tạo một đối tượng ảnh (image) và thực hiện phương thức context.drawImage() trong sự kiện nạp ảnh. Phương thức drawImage() có ba cách vẽ sau: Vẽ image tại một vị trí X, Y: context.drawImage(image, X, Y); Vẽ image tại vị trí X, Y và kích thước Width, Height. Cắt image tại vị trí [sourceX, sourceY, sourceWidth, sourceHeight] và vẽ tại [X, Y, Width, Height].
Thao tác với pixel Một ảnh bao gồm một mảng các pixel với các giá trị Red, Green, Blue và Alpha (RGBA). Trong đó Alpha là giá trị xác định độ mờ đục (opacity) của ảnh. Giá trị Alpha càng lớn thì độ màu sắc càng rõ nét và màu sắc sẽ trở nên trong suốt nếu Alpha là 0. Trong Canvas 2D API, dữ liệu ảnh được lưu trong một đối tượng ImageData với 3 thuộc tính là width, height và data.
Như vậy với một ảnh có kích thước 10×20 ta sẽ có 200 pixel và có 200*4 = 800 phần tử trong mảng ImageData. Các sự kiện chuột Canvas Dưới đây là các sự kiện liên quan đến chuột: onClick Thực thi mã khi người dùng click chuột, áp dụng cho các phần tử form như: nút, hộp kiểm, liên kết. onDblclick Thực thi mã khi người dùng click chuột hai lần liên tiếp. onMousedown Thực thi mã khi người dùng nhấn và giữ chuột.
onMousemove Thực thi mã khi người dùng di chuyển chuột.