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

Hôm nay chúng ta tiếp tục loạt bài viết game flappy bird bằng HTML và JavaScript, nếu chưa xem part 1 thì các bạn xem ở đây: Viết game flappy bird bằng HTML và JavaScript (P.1).

Sau khi đã có background và con chim màu đỏ rồi, ta sẽ tìm hiểu đến Frames(khung nhìn), như các bạn thấy hiện background và con chim đang đứng yên, Frames sẽ làm cho chúng chuyển động bằng cách hiển thị chúng  nhiều lần trong 1s giống như khi người ta làm phim bằng cách vẽ nhiều bức tranh và cho thay đổi tranh liên tục... Lang mang cũng khó hiểu quá @@ lát các bạn xem code để hiểu rõ hơn nha.
Trong code chúng ta sẽ thay đổi như sau:

• Đầu tiên chúng ta tạo 1 function mới là updateGameArea().
• Trong myGameArea object, ta tạo 1 interval và chạy function updateGameArea() mỗi 20 miligiây (tương ứng 50 lần chạy 1s ), sau đó tạo function clear() dùng để xóa các canvas.
• Trong component constructor, tạo function update() để xử lý vẽ canvas.
• Function updateGameArea() sẽ gọi 2 hàm update() và clear() vừa tạo.

Các bạn xem phần code và sửa lại của mình luôn:

var myGamePiece;

function startGame() {

    myGamePiece = new component(30, 30, "red", 10, 120);

    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]);

        this.interval = setInterval(updateGameArea, 20);

    },

    clear : function() {

        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

    }

}

function component(width, height, color, x, y) {

    this.width = width;

    this.height = height;

    this.x = x;

    this.y = y;    

    this.update = function(){

        ctx = myGameArea.context;

        ctx.fillStyle = color;

        ctx.fillRect(this.x, this.y, this.width, this.height);

    }

}

function updateGameArea() {

    myGameArea.clear();

    myGamePiece.update();

}

Refresh lại thì bạn thấy vẫn như cũ nhưng thực ra là nó đang được update đấy, chỉ là nhanh quá ta không thấy được :))

Tiếp theo chúng ta sẽ làm con chim di chuyển.

Make it Move

Để thâý được là Frames đang chạy chúng ta sẽ thay đổi x position của con chim lên 1 mỗi khi chúng ta update Game. Ta thay đổi hàm updateGameArea() như sau:

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.x += 1;
    myGamePiece.update();
}
Refresh lại chúng ta sẽ thấy con chim đang bay xa qua phải..........
Lúc này nếu chúng ta bỏ hàm clear() đi:

function updateGameArea() {
    //myGameArea.clear();    myGamePiece.x += 1;
    myGamePiece.update();
}
Refresh lại chúng ta sẽ thấy được con chim đang bị kéo dài ra, lúc này ta hiểu được tại sao phải có hàm clear()  nó giúp ta xóa đi các canvas cũ.

Bạn có thể thay đổi kích cỡ của con chim khi new ra nó bằng cách thay đổi các thông số nhập vào.
function startGame() {
    myGameArea.start();
    myGamePiece = new component(10, 140, "red", 10, 120);
}
cũng như mùa sắc và tọa độ ban đầu chim xuất hiện...

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