Hướng dẫn viết game flappy bird

  -  
Flappy Bird của anh ấy Đông Nguyễn hiện đang là 1 game khá hot tại thời điểm này, với đứng đầu của 2 kho ứng dụng lớn số 1 hiện nay. Mà lại do một trong những áp lực, Flappy Bird đã bị tháo khỏi 2 kho ứng dụng. Hôm nay mình đã hướng dẫn chúng ta 1 số bước cơ bạn dạng để viết được 1 game flappy bird đơn giản cho riêng tôi chỉ với 65 dòng code Javascript trên tủ sách Phaser Framework.Bạn có thể test test flappy bird siêu dễ dàng và đơn giản tại đây.

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


*

Yêu cầu: bạn phải ghi nhận 1 số javascript cơ bản, do tut này viết trên HTML5 Canvas và Javascript.Phaser frameword bạn có thể tìm đọc trên Google và mình sẽ có một bài chỉ dẫn trong các bài viết sau.

Bước 1: download đặt


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

// Initialize Phaser, & 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 khổng lồ load all the assets , create: function() // Fuction called after "preload" to thiết lập the trò chơi , update: function() // Function called 60 times per second ,;// add and start the "main" state khổng lồ start the gamegame.state.add("main", main_state); game.state.start("main"); bọn họ sẽ sửa đổi hàm preload(), create() cùng update() và thêm một số hàm khác nhằm game hoàn toàn có thể hoạt động.

Xem thêm: Hướng Dẫn Cách Ghim Comment Trên Livestream Facebook Trên Điện Thoại

Bước 2: nhỏ trym


Rồi ban đầu code thôi nào. Vào tut này thì bé chim của bọn họ chỉ rất có thể nhảy nhảy bởi phím spacebar.
preload: function() // Change the background màu sắc 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 lớn the bird to make it fall this.bird.body.gravity.y = 1000; // hotline 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 vẫn cho bọn họ load hình ảnh khi trang được load, và sẽ gán cho nó 1 loại nickname
- tiếp theo sau là hàm create(), khởi chế tạo ra 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.gravity.y = 1000; sẽ tạo cho chú chim của bọn họ rơi xuống theo trục yspace_key.onDown.add(this.jump, this); khi nhấn thanh spacebar sẽ chạy hàm jump() làm cho chú chim nhảy đầm lên. Bọn họ viết tiếp hàm jump() với hàm restart_game() mặt dưới.// Make the bird jumpjump: function() // địa chỉ cửa hàng a vertical velocity to lớn the bird this.bird.body.velocity.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 săn sóc và bạn đã thấy con chim của bọn chúng ta. Dìm spacebar nhằm nó nhảy đầm nhảy.

Bước 3: các cái ống nước khó khăn chịu


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

Xem thêm: Cách Trồng Cây Sả Tại Nhà Siêu Đơn Giản '' Và Hiệu Quả

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


this.score = 0; var style = font: "30px Arial", fill: "#ffffff" ; this.label_score = this.game.add.text(20, 20, "0", style);Đặt 2 mẫu sau với hàmadd_row_of_pipes() để tăng 1 điều mỗi khi xuất hiện thêm 1 cột mới.this.score += 1; this.label_score.content = this.score;Thêm cái sau vào hàm update() để điện thoại tư vấn hàm restart_game() mỗi lúc chim đụng vào cột.this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);Và xin chúc mừng, các bạn đã xong game Flappy bird bên trên HTML5 (siêu cực kỳ thô). Chúng ta cũng có thể download mã nguồn của nội dung bài viết này trên đây

Kì tiếp theo?

Chim đang bay, đã có thể chui vào khe.. Dẫu vậy trông nó thiệt chán. Ở bài viết tiếp theo, mình sẽ trả lời có các bạn thêm âm thanh, hiệu ứng, menu, ... Đón hóng next chap nhé. Chúc các bạn thành công.
*
Đăng ký nhận nội dung bài viết mới qua email

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