Hướng Dẫn Viết Game Flappy Bird

Flappy Bird của anh ý Đông Nguyễn hiện giờ đang là 1 trong những game hơi hot tại thời điểm này, cùng với top của 2 kho vận dụng lớn số 1 hiện thời. Nhưng do một số trong những áp lực nặng nề, Flappy Bird đã trở nên túa khỏi 2 kho ứng dụng. Hôm ni mình vẫn chỉ dẫn chúng ta một số bước cơ phiên bản để viết được 1 game flappy bird dễ dàng mang đến riêng biệt mình chỉ cùng với 65 dòng code Javascript trên tlỗi viện Phaser Framework.Quý Khách hoàn toàn có thể demo demo flappy bird cực kỳ dễ dàng và đơn giản trên phía trên.

Bạn đang xem: Hướng dẫn viết game flappy bird


*

Yêu cầu: chúng ta phải ghi nhận 1 số ít javascript cơ bản, bởi tut này viết bên trên HTML5 Canvas và Javascript.Phaser frameword chúng ta có thể tìm hiểu trên Google và mình đang có 1 bài bác khuyên bảo trong số nội dung bài viết sau.

Cách 1: Cài đặt


phaser.min.js bạn dạng nén của Phaser Frameword v1.1.5index.html, game sẽ chạy trên tệp tin nàymain.js, địa điểm họ đang code đến flappy birdthỏng mục asssets/, đựng 1 số tài nguyên, mình đã nhằm sẳn 2 file là bird.png và pipe.png
Đặt toàn bộ các file trên vào cùng 1 thỏng mục trong Web Server của công ty, bạn cũng có thể upload lên hosting hoặc chạy local bởi XAMPP hoặc WAMPP.
quý khách đang thấy vào tệp tin main.js một khung cơ phiên bản của game. Cái này mình vẫn nói ở một bài viết về Phaser Framework.

// Initialize Phaser, và creates a 400x490px gamevar game = new Phaser.Game(400, 490, Phaser.AUTO, "game_div");// Creates a new "main" state that will contain the gamevar main_state = preload: function() // Function called first to lớn load all the assets , create: function() // Fuction called after "preload" lớn thiết lập the game , update: function() // Function called 60 times per second ,;// Add & start the "main" state lớn start the gamegame.state.add("main", main_state); game.state.start("main"); Chúng ta vẫn sửa đổi hàm preload(), create() với update() và thêm 1 số hàm khác để game có thể hoạt động.

Xem thêm: Hướng Dẫn Chơi Total War Three Kingdoms Cho Người Mới, Total War: Three Kingdoms

Bước 2: Con trym


Rồi bước đầu code thôi như thế nào. Trong tut này thì con chim của họ chỉ hoàn toàn có thể nhảy dancing bằng phím spacebar.
preload: function() // Change the background color of the game this.game.stage.backgroundColor = "#71c5cf"; // Load the bird sprite this.game.load.image("bird", "assets/bird.png");,create: function() // Display the bird on the screen this.bird = this.game.add.sprite(100, 245, "bird"); // Add gravity to the bird khổng lồ make it fall this.bird.body toàn thân.gravity.y = 1000; // Điện thoại tư vấn the "jump" function when the spacekey is hit var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); space_key.onDown.add(this.jump, this); ,update: function() // If the bird is out of the world (too high or too low), gọi the "restart_game" function if (this.bird.inWorld == false) this.restart_game();,
- Bắt đầu là hàm preload(), hàm preload sẽ mang đến họ load hình hình họa khi trang được load, với sẽ gán mang đến nó 1 chiếc nickname
- Tiếp theo là hàm create(), khởi sinh sản game. this.game.add.sprite(100, 245, "bird"); đã thêm hình bé chim trên tọa độ (x, y) = (100, 245)this.bird.body toàn thân.gravity.y = 1000; đã khiến cho crúc chim của bọn họ rơi xuống theo trục yspace_key.onDown.add(this.jump, this); lúc dìm thanh khô spacebar đang chạy hàm jump() làm cho chú chim khiêu vũ lên. Chúng ta viết tiếp hàm jump() với hàm restart_game() bên dưới.// Make the bird jumpjump: function() // Add a vertical velothành phố to lớn the bird this.bird.body toàn thân.velođô thị.y = -350;,// Restart the gamerestart_game: function() // Start the "main" state, which restarts the game this.game.state.start("main");,
Chúng ta save file main.js lại, nhận F5 file index.html bên trên trình xem xét với các bạn vẫn thấy nhỏ chyên ổn của họ. Nhấn spacebar nhằm nó nhảy nhảy đầm.

Bước 3: Những mẫu ống nước nặng nề chịu


Flappy Bird là cần gồm ống nước, chính vì vậy bọn họ thêm hình hình họa những chiếc đường nước trong hàm preload()
Sau kia, chế tạo ra 1 group những loại đường nước trong hàm create()this.pipes = game.add.group(); this.pipes.createMultiple(20, "pipe");Bây giờ họ sẽ khởi tạo thêm 1 hàm bắt đầu, nhằm có thể tạo các đường nước theo thứ tự mở ra trên màn hình. Nó tđuổi từ bỏ bắt buộc qua trái, giả dụ chú chlặng chạm vào đường nước thì game over, còn trường hợp k đụng thì các đường nước Lúc dịch rời mang lại biên trái sẽ bị ẩn đi.add_one_pipe: function(x, y) // Get the first dead pipe of our group var pipe = this.pipes.getFirstDead(); // Set the new position of the pipe pipe.reset(x, y); // Add velocity lớn the pipe khổng lồ make it move left pipe.body.velocity.x = -200; // Kill the pipe when it"s no longer visible pipe.outOfBoundsKill = true;,Hàm trên thì chỉ hiển thị 1 ống nước, nhưg chúng ta rất cần được tất cả 6 ống trên 1 mặt hàng (6 khối) và 1 kăn năn trống trọng điểm (mẫu khe ấy)Vì thế:add_row_of_pipes: function() { var hole = Math.floor(Math.random()*5)+1; for (var i = 0; i Dĩ nhiên là những cái đường nước này vẫn hoạt động trường đoản cú phải qua trái, cứ từng 1.5s sẽ xuất hiện thêm 1 đường nước. Vì gắng họ thêm cái sau vào thời gian cuối hàm create()this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);Cuối cùng họ thêm mẫu này vào dòng xoáy trước tiên của hàm restart_game() để dừng thời hạn lúc khởi hễ lại game.this.game.time.events.remove(this.timer);Nào bây giờ bạn có thể F5 là xem thử rồi đó, nó vẫn không triển khai xong nhưng mà từ từ vẫn kiểu như game thật rồi haha.

Bước 4: Điểm số cùng Khi chim không chui được vào khe =>>


this.score = 0; var style = font: "30px Arial", fill: "#ffffff" ; this.label_score = this.game.add.text(trăng tròn, trăng tròn, "0", style);Đặt 2 dòng sau cùng hàmadd_row_of_pipes() để tăng 1 điểm mỗi khi lộ diện thêm một cột new.this.score += 1; this.label_score.nội dung = this.score;Thêm loại sau vào hàm update() để Call hàm restart_game() mỗi một khi chyên chạm vào cột.this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);Và xin chúc mừng, bạn vẫn kết thúc game Flappy bird trên HTML5 (hết sức cực kỳ thô). Quý Khách có thể tải về mã nguồn của bài viết này trên đây

Kì tiếp theo?

Chyên ổn đã bay, đang có thể đâm vào khe.. Nhưng trông nó thật ngán. Ở nội dung bài viết tiếp theo sau, mình đang lý giải bao gồm bạn thêm âm thanh, hiệu ứng, thực đơn, ... Đón đợi next chap nhé. Chúc các bạn thành công xuất sắc.
*
Đăng cam kết thừa nhận bài viết bắt đầu qua email

*
How Google does Machine Learning|Advanced Machine Learning with TensorFlow on Google Cloud Platform❤ by hauvuong.mobidev

Leave a Reply

Your email address will not be published. Required fields are marked *