Now you can Subscribe using RSS

Submit your Email

Thứ Sáu, 25 tháng 5, 2018

Viết game flappy bird bằng HTML và JavaScript (P.1)

game4playfree tháng 5 25, 2018
Chào mọi người, bữa nay chúng ta sẽ viết một game hao hao flappy bird bằng HTML và JavaScript một cách đơn giản, bài viết không chỉ giúp bạn nâng cao khả năng lập tình HTML JS mà còn tạo ra 1 sản phẩm thích thú bởi thế các bạn chịu khó theo dõi nha. Các bạn xem demo sản phẩm khi chúng ta hoàn tất trên fiddle: Demo đây chỉ là demo căn bản thôi, khi xem xong bài viết này các bạn có thể làm hay hơn thế nữa :). Nào ta bắt đầu thôi.

HTML Canvas

Đầu tiên để tạo game chúng ta cần tạo background cho nó, chúng ta sẽ dùng HTML Canvas, Canvas là một element nhẵn cho việc thiết kế game trong HTML. Chúng ta sẽ dùng Js để vẽ trên Canvas. Các bạn tạo 1 file html và nhập đoạn code sau:


<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border: 1px solid #d3d3d3; background-color: #f1f1f1; } </style> </head> <body onload="startGame()"> <script> function startGame() { myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 480; this.canvas.height = 270; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); } } </script> <p>We have created a game area! (or at least an empty canvas)</p> </body> </html>

Kết quả ta được 1 background màu xám như hình:

Method startGame() sẽ được chạy khi trang web được load, object myGameArea sẽ chạy hàm start() của mình và vẽ ra một canvas như kết quả. document.body.insertBefore(this.canvas, document.body.childNodes[0]) lệnh này sẽ insert thằng canvas ta vừa vẽ vào trước thằng đầu tiên trong thẻ body hiểu nôm na là canvas sẽ là phần tử trước nhất trong thẻ body.

Game Components
Tiếp theo chúng ta sẽ thêm vào các component cần có trong Game, trước nhất là con chim đỏ này


Kể từ đây code sẽ khá phức tạp, các bạn xem kĩ. Chúng ta sẽ tạo một constructor để add các component vào Game, chúng ta sẽ tạo component đầu tiên tên là myGamePiece. Thêm cái function này dưới myGameArea.

Khi đó đoạn code của ta như sau:

Trong function startGame() ta add component vào:

Refresh lại page ta sẽ có con chim như hình:

ctx = myGameArea.context nghĩa là chúng ta sẽ vẽ component này trong ngữ cảnh myGameArea.

ctx.fillStyle = color phủ màu component..

ctx.fillRect(this.x, this.y, this.width, this.height) vẽ 1 hình chữ nhật tương ứng thông số.

game4playfree / Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

0 blogger-facebook:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)

Coprights @ 2018, NIIT ICT Hà Nội Designed By Lil leeo - Đào Tạo Lập Trình Viên Quốc Tế