Hướng dẫn tạo game Flappy Bird bằng JavaScript: Bứt phá kỹ năng lập trình cùng chú chim

Bạn có biết rằng JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay? 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. Không chỉ giúp bạn rèn kỹ năng căn bản về JavaScript, bài viết còn cung cấp cho bạn những bước cụ thể để tạo game Flappy Bird của riêng mình. Hãy cùng tôi bắt đầu!

Chuẩn bị ban đầu

Trước khi bắt đầu viết game bằng JavaScript, bạn cần chuẩn bị hai thành phần chính: một thẻ Canvas của HTML5 và một tập tin JavaScript. Bạn cần tải về những "nguyên liệu" ban đầu như hình ảnh, âm thanh,... Tuy nhiên, bạn hoàn toàn có thể tùy chỉnh chúng theo ý thích của riêng mình. Hãy truy cập GitHub để tải về các tập tin cần thiết và mã mẫu.

Đầu tiên, hãy tạo một file index.html và chèn thẻ Canvas vào trong nó. Sau đó, chúng ta sẽ viết mã JavaScript để xây dựng tựa game Flappy Bird. Mã mẫu của file index.html như sau:

FlappyBird by Quantrimang.com

Trong đoạn mã trên, chúng ta đã khai báo thẻ Canvas với kích thước 288x512 pixel. Phía trên, chúng ta chèn mã JavaScript vào để xây dựng game Flappy Bird.

Bắt đầu viết mã flappyBird.js

Đầu tiên, để lấy ngữ cảnh của Canvas, chúng ta cần sử dụng hàm getContext('2d') như sau:

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

Hàm getContext('2d') cung cấp các thuộc tính và phương thức để chúng ta vẽ và thao tác với Canvas.

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

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

Sau đó, chúng ta cần thiết lập nguồn tải cho các ảnh bằng cách gán giá trị cho thuộc tính src:

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";

Cách làm tương tự, chúng ta có thể tạo hiệu ứng âm thanh và thiết lập nguồn tải âm thanh:

var fly = new Audio();
var scor = new Audio();
fly.src = "sounds/fly.mp3";
scor.src = "sounds/score.mp3";

Tiếp theo, chúng ta cần khai báo tọa độ ban đầu cho chú chim và khoảng cách giữa hai ống nước chướng ngại vật:

var gap = 85;
var constant;
var bX = 10;
var bY = 150;
var gravity = 1.5;
var score = 0;

Trong đoạn mã trên, gap là khoảng cách giữa ống nước phía trên và ống nước phía dưới. constant được sử dụng để tính toán tọa độ Y của ống nước phía dưới. Hai ống nước có chung tọa độ X. bX và bY là tọa độ X và Y của chú chim. gravity chỉ ra mỗi lần chú chim rơi xuống, nó sẽ rơi thêm 1.5 pixel. score được sử dụng để tính điểm số của người chơi.

Tiếp theo, chúng ta sẽ tạo hoạt động bay lên cho chú chim mỗi khi người chơi nhấn phím:

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 bắt đầu, vị trí tọa độ X của các ống nước đầu tiên là 288 pixel (bằng chiều rộng của Canvas).

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

Cuối cùng, chúng ta cần vẽ các ống nước và kiểm tra va chạm giữa chú chim và ống nước. Khi va chạm xảy ra, game sẽ khởi động lại. Nếu chú chim vượt qua ống nước, điểm số sẽ được cộng thêm.

function draw() {
  // Vẽ nền và các ống nước
  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
      });
    }

    // Kiểm tra va chạm
    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();
    }

    // Đếm điểm
    if (pipe[i].x == 5) {
      score++;
      scor.play();
    }
  }

  // Vẽ mặt đất và chú chim
  ctx.drawImage(fg, 0, cvs.height - fg.height);
  ctx.drawImage(bird, bX, bY);

  // Vẽ điểm số
  ctx.fillStyle = "#000";
  ctx.font = "20px Verdana";
  ctx.fillText("Score: " + score, 10, cvs.height - 20);

  // Cập nhật khung hình
  requestAnimationFrame(draw);
}

draw();

Phần mã đã hoàn thành. Hãy 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à bạn đã viết. Nếu không có gì trục trặc, bạn sẽ nhận được kết quả giống như hình dưới đây:

Để tìm hiểu thêm về JavaScript, bạn có thể truy cập các nguồn tài liệu phong phú. Hãy khám phá thêm về JavaScript tại JavaScript là gì? và tham khảo thêm các bài tập khác của JavaScript tại Tổng hợp bài tập JavaScript có code mẫu.

Hy vọng với hướng dẫn này, bạn đã có thể tạo ra một phiên bản riêng của game Flappy Bird bằng JavaScript. Chúc bạn thành công!