Hướng dẫn code game Flappy Bird bằng JavaScript

Kyr Doo-Hyun

JavaScript cũng là một trong những ngôn ngữ lập trình phổ biến nhất hiện tại. Trong bài viết này, chúng ta sẽ sử dụng JavaScript và một chút HTML5 để xây dựng một phiên bản đơn giản của game Flappy Bird. Hy vọng bài viết sẽ giúp bạn cũng có thêm được một số kỹ năng JavaScript căn bản.

Những chuẩn bị ban đầu

Để viết game bằng JavaScript bạn cần hai thành phần chính, thứ nhất là một thẻ Canvas của HTML5 và thứ hai là một tập tin JavaScript.

Và trước khi đi vào các bước xây dựng game Flappy Bird, bạn nên tải về những "nguyên liệu" ban đầu như hình ảnh, âm thanh... Ở đây, hình ảnh và âm thanh đã được cung cấp sẵn, tuy nhiên, bạn hoàn toàn có thể tùy biến, thay bằng hình ảnh và âm thanh của chính bạn. Ví dụ, thay chú chim bằng bất cứ con gì đó bạn thích...

Truy cập GitHub để tải về các tập tin cần thiết và code mẫu.

Đầu tiên, chúng ta phải tạo ra một file index.html, trong đó chứa thẻ Canvas. Nội dung của thẻ Canvas sẽ được xây dựng từ JavaScript và trong trường hợp này nó chính là tựa game Flappy Bird.

Code mẫu của file index.html như sau:

<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird</title>
  </head>
  <body>
   <h3>FlappyBird by Quantrimang.com</h3>
   
   <canvas id="canvas" width="288" height="512"></canvas>
   
   <script src="flappyBird.js"></script>
  </body>
</html>

Trong đó, chúng ta khai báo thẻ Canvas với chiều rộng 288 và chiều cao 512. Ở bên dưới, trước khi đóng thẻ body, chúng ta thêm vào hàm khai báo code JavaScript: <script src="flappyBird.js"></script>.

Bắt đầu code flappyBird.js

Bạn có thể sử dụng các IDE khác nhau nhưng trong hướng dẫn này, chúng tôi sử dụng Sublime. Việc đầu tiên chúng ta cần làm đó là chọn thẻ Canvas và thu thập ngữ cảnh bằng getContext ('2d'):

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");

Hàm getContext ('2d') có các thuộc tính và phương thức cho phép chúng ta vẽ và thực hiện nhiều thứ khác nhau trên Canvas.

Bây giờ, chúng ta cần tạo ra hình ảnh cho game Flappy Bird. Để tạo hình ảnh, chúng ta gán và hiển thị giá trị của hàm Image() bằng lệnh new.

var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeNorth = new Image();
var pipeSouth = new Image();

Tiếp theo, chúng ta phải thiết lập nguồn tải ảnh bằng thuộc tính src. Để quá trình này đơn giản, không xảy ra lỗi, bạn nên lưu thư mục ảnh và video vào cùng thư mục với index.html và flappyBird.js.

bird.src = "images/bird.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeNorth.src = "images/pipeNorth.png";
pipeSouth.src = "images/pipeSouth.png";

Với cách làm tương tự, chúng ta tạo hiệu ứng âm thanh và thiết lập nguồn tải âm thanh bằng đoạn code sau:

var fly = new Audio();
var scor = new Audio();

fly.src = "sounds/fly.mp3";
scor.src = "sounds/score.mp3";

Để tạo hiệu ứng rơi tự do cho chú chim và khoảng cách giữa hai ống nước chướng ngại vật, khai báo tọa độ xuất hiện lần đầu cho chú chim, chúng ta dùng đoạn code:

var gap = 85;
var constant;

var bX = 10;
var bY = 150;

var gravity = 1.5;

var score = 0;

gap là khoảng cách giữa ống nước phía trên và ống nước phía dưới, ở đây, giá trị của gap được thiết lập là 85. constant được dùng để xác định tọa độ Y của ống nước phía dưới và nó được tính toán bằng cách cộng thêm gap vào tọa độ Y của ống nước phía trên. Hai ống nước có chung tọa độ X.

bX và bY là tọa độ X và Y của chú chim, giá trị ban đầu là 10 và 150 tương ứng. Tiếp theo, với hàm gravity bằng 1.5, mỗi lần rơi chú chim sẽ rơi xuống 1.5 pixel. Hàm score được dùng để tính điểm số cho người chơi.

Tiếp theo, chúng ta cần tạo hoạt động bay lên cho chú chim mỗi khi bàn phím được nhấn. Người chơi có thể điểu khiển chú chim bằng cách nhấn phím bất kỳ trên bàn phím. Chúng ta cần thêm một biến EventListener vào code của mình và khi người chơi nhấn phím, chúng ta sẽ chạy hàm moveUp(), chú chim sẽ bay lên 25 pixel và phát ra hiệu ứng âm thanh.

document.addEventListener("keydown",moveUp);

function moveUp(){
    bY -= 25;
    fly.play();
}

Chúng ta cũng cần lưu lại tọa độ của các ống nước bằng một mảng. Khi game khởi động, vị trí tọa độ X của các ống nước đầu tiên là 288 pixel (bằng cvs.width).

var pipe = [];

pipe[0] = {
  x : cvs.width,
  y : 0
};

Cuối cùng, chúng ta cần vẽ thêm các ống nước để game tiếp tục diễn ra sau khi chú chim vượt qua những chướng ngại vật đầu tiên. Ngoài ra, trong đoạn code cuối cùng này còn có code xác định va chạm giữa chú chim vào ống nước. Khi va chạm xảy ra (trùng tọa độ), game sẽ được khởi động lại. Còn nếu vượt qua, điểm số sẽ được tính cho người chơi.

function draw(){
    
    ctx.drawImage(bg,0,0);
    
    
    for(var i = 0; i < pipe.length; i++){
        
        constant = pipeNorth.height+gap;
        ctx.drawImage(pipeNorth,pipe[i].x,pipe[i].y);
        ctx.drawImage(pipeSouth,pipe[i].x,pipe[i].y+constant);
             
        pipe[i].x--;
        
        if( pipe[i].x == 125 ){
            pipe.push({
                x : cvs.width,
                y : Math.floor(Math.random()*pipeNorth.height)-pipeNorth.height
            }); 
        }

        // detect collision
        
        if( bX + bird.width >= pipe[i].x && bX <= pipe[i].x + pipeNorth.width && (bY <= pipe[i].y + pipeNorth.height || bY+bird.height >= pipe[i].y+constant) || bY + bird.height >=  cvs.height - fg.height){
            location.reload(); // reload the page
        }
        
        if(pipe[i].x == 5){
            score++;
            scor.play();
        }
        
        
    }

    ctx.drawImage(fg,0,cvs.height - fg.height);
    
    ctx.drawImage(bird,bX,bY);
    
    bY += gravity;
    
    ctx.fillStyle = "#000";
    ctx.font = "20px Verdana";
    ctx.fillText("Score : "+score,10,cvs.height-20);
    
    requestAnimationFrame(draw);
    
}

draw();

Bây giờ, phần code đã xong, bạn cần lưu lại toàn bộ file HTML và flappyBird.js. Bạn có thể nhấp chuột phải vào cửa sổ Sublime sau đó chọn Open in a new browser để chơi thử game mà mình vừa viết. Nếu không có gì trục trặc, kết quả mà bạn nhận được sẽ giống như hình bên dưới:

Đây là kết quả sau khi bạn hoàn thành code game Flappy Bird bằng JavaScript

Để tìm hiểu thêm về JavaScript mời bạn truy cập: JavaScript là gì? và để tham khảo thêm các bài tập khác của JavaScript mời các bạn vào: Tổng hợp bài tập JavaScript có code mẫu.

Thứ Hai, 17/08/2020 13:43

4,4 ★ 8 👨 14.062

#JavaScript #

Bạn nên đọc

2 Bình luận

Sắp xếp theo

Xóa Đăng nhập để Gửi

Huy Trương cho mình xin dữ liệu tài nguyên
Thích Phản hồi 0 16/09/20
- Đỗ Kỷ Bạn vào trong bài có link đó
  Thích Phản hồi 0 17/09/20
Phạm Phúc là sao dzậy mấy thầy
Thích Phản hồi 0 29/08/20