06/04/2021, 14:48

Viết game Flappy Bird đơn giản với HTML, CSS và jQuery - jQuery Tutorials

Chào các bạn, bài hôm nay mình sẽ hướng dẫn các bạn viết game Flappy Bird bằng HTML, CSS và jQuery, đây là một tựa game trên mobile đã không còn xa lạ với chúng ta, tuy nhiên nhưng hôm nay nó sẽ được tái hiện lại trên phiên bản web. Bài này giúp chúng ta ôn lại một số kiến thức ...

Chào các bạn, bài hôm nay mình sẽ hướng dẫn các bạn viết game Flappy Bird bằng HTML, CSS và jQuery, đây là một tựa game trên mobile đã không còn xa lạ với chúng ta, tuy nhiên nhưng hôm nay nó sẽ được tái hiện lại trên phiên bản web. Bài này giúp chúng ta ôn lại một số kiến thức về jQuery nên để làm được bài này yêu cầu các bạn phải có chút kiến thức cơ bản, các bạn có thể học jQuery ngay tại trên blog luôn. Bây giờ chúng ta tiến hành viết game thôi nào !

1. Cấu trúc thư mục

Dưới đây là sơ đồ cấu trúc thư mục của game này. Phía dưới mình có giải thích công dụng của từng file trong các thư mục.

cau truc thu muc game flappy bird jpg

Trong đó :

  • File css/style.css có công dung thiết kế đồ hoạ cho toàn bộ game.
  • File js/jquery.min.js là thư viện jQuery, các bạn có thể download source code ở phía trên.
  • File js/script.js là có công dụng để hoạt động game.
  • Các file trong thư mục sprites là các file ảnh cho con chim và background của game, các bạn có thể download source code ở phía trên.
  • File index.html là file chứa giao diện game.

2. Xây dựng giao diện và thiết kế đồ hoạ cho game

Trước tiên mình cần viết một chút HTML và CSS để làm giao diện cho game.

Xây dựng giao diện bằng HTML

Các bạn mở file index.html là copy nội dung sau :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Game Flappy Bird bằng HTML, CSS và Jquery &bull; Zaidap.com</title>
        <link href="css/style.css" rel="stylesheet"/>
    </head>
    <body>
        <div id="container">   
            <div id="bird"></div>
            <div id="pole_1" class="pole"></div>
            <div id="pole_2" class="pole"></div>
            <button id="play_btn">Click vào để chơi</button>
            <span id="score">0</span>
        </div>
        <button id="restart_btn">Chơi lại</button>
        <script src="js/jquery.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

Trong đó :

  • #container là khung game.
  • #bird là object con chim.
  • .pole là các ống nước.
  • #pole1 là ống nước trên.
  • #pole2 là ống nước dưới.
  • #play_btn là nút bắt đầu chơi game.
  • #restart_btn là nút chơi lại khi thua.
  • #score là nơi hiển thị số điểm.

Chỉnh sửa giao diện bằng CSS

Dán đoạn code sau vào file css/style.css :

button {outline: none;}

body {height: 100%; width: 100%; margin: 0;}

/* Khung game */
#container {position: relative; height: 480px; width: 350px; border: 1px solid #ccc; background: url('../sprites/bg.png'); overflow: hidden; margin: 80px auto;}

/* Con chim */
#bird {position: absolute; background: url('../sprites/bird.png'); height: 42px; width: 65px; background-size: contain; background-repeat: no-repeat; top: 20%; left: 15%;}

/* Ống nước */
.pole {position: absolute; height: 170px; width: 60px; background-color: #33cc33; right: -64px; border: 2px solid #000;}

/* Ống trên */
#pole_1 {top: 0; border-top: none;}

/* Ống dưới */
#pole_2 {bottom: 0; border-bottom: none;}

/* Điểm */
#score {font-size: 100px; position: absolute; width: 100%; text-align: center; padding: 10px; color: #555;}

/* Nút chơi lại */
#restart_btn {position: absolute; top: 0; width: 100%; padding: 20px; background-color: #fff; color: #555; font-size: 35px; border: none; cursor: pointer; display: none; border: 1px solid #e5e5e5;}

/* Nút chơi game */
#play_btn {display: block; position: absolute; width: 100%; height: 100%; background-color: transparent; border: 0; font-size: 30px; color: #555;}

Sau khi hoàn thành các bước trên chúng ta sẽ có kết quả như sau :

b1 game flappy bird jpg

OK, bây giờ chúng ta qua phần viết hoạt động cho game.

3. Viết hoạt động cho game bằng jQuery

Để hiểu được đoạn code jQuery dưới đây thì đòi hỏi bạn phải có kỹ năng về kỹ thuật lập trình, hiểu biết về xử lý sự kiện và xử lý thời gian, vì vậy nếu bạn chưa biết các kiến thức đó thì nên đi tìm hiểu trước nhé.

Đây là toàn bộ nội dung của file js/script.js. Các bạn copy và paste vào file.

$(function () {
    // Khai báo các object
    var container   = $('#container');
    var bird        = $('#bird');
    var pole        = $('.pole');
    var pole_1      = $('#pole_1');
    var pole_2      = $('#pole_2');
    var score       = $('#score');

    // Chuyển các thông tin của object sang dạng số INT
    var container_width     = parseInt(container.width());
    var container_height    = parseInt(container.height());
    var pole_initial_position = parseInt(pole.css('right'));
    var pole_initial_height = parseInt(pole.css('height'));
    var bird_left           = parseInt(bird.css('left'));
    var bird_height         = parseInt(bird.height());
    var speed               = 10; // Tốc độ di chuyển ống nước

    // Một số trạng thái trong game
    var go_up = false;
    var score_updated = false;
    var game_over = false;

    // Hàm bắt đầu game
    function playGame() 
    {
        // Realtime cho game 
        var the_game = setInterval(function () 
        {
            if (collision(bird, pole_1) || // Nếu chú chim va chạm với ống trên
                collision(bird, pole_2) || // Hoặc chú chim va chạm với ông dưới
                parseInt(bird.css('top')) <= 0 || // Hoặc chú chim va chạp với khung game trên
                parseInt(bird.css('top')) > container_height - bird_height // Hoặc chú chim va chạm với khung game dưới
                )
            {
                stop_the_game(); // Chạy hàm thua game
            }
            else
            {
                // Lấy vị trị hiện tại của ống nước
                var pole_current_position = parseInt(pole.css('right'));
                // Cập nhập điểm khi chú chim vượt qua 1 cặp ống
                if (pole_current_position > container_width - bird_left)
                {
                    if (score_updated === false)
                    {
                        score.text(parseInt(score.text()) + 1); // Cộng 1 điểm
                        score_updated = true;
                    }
                }

                // Kiểm tra các ống đã đi ra khỏi khung game 
                if (pole_current_position > container_width) {
                    var new_height = parseInt(Math.random() * 100); 
                    // Tạo chiều cao các ống nước ngẫu nhiên
                    pole_1.css('height', pole_initial_height + new_height);
                    pole_2.css('height', pole_initial_height - new_height);
                    score_updated = false;
                    pole_current_position = pole_initial_position; // Gán vị trị hiện tại = vị trí ban đầu của ống nước
                }

                // Di chuyển ống nước
                pole.css('right', pole_current_position + speed);

                // Nếu không điều khiển chú chim bay lên
                if (go_up === false) {
                    go_down(); // Hàm di chuyển chú chim rơi xuống
                }
            }
        }, 40);
    }

    // Khi nhả chuột ra trong khung game
    $('#container').mouseup(function (e) {    
        clearInterval(go_up); // Xoá realtime hành động bay lên cho chú chim
        go_up = false;
    });

    // Khi nhấp chuột vào trong khung game
    $('#container').mousedown(function (e) {
        go_up = setInterval(up, 40); // Realtime hành động bay lên cho chú chim
    });

    // Khi nhấn vào Chơi game
    $('#play_btn').click(function() {
         playGame(); // Chạy hàm bắt đầu chơi game
         $(this).hide(); // Ẩn nút chơi game
    });    

    // Hàm di chuyển chú chim rơi xuống
    function go_down() {
        bird.css('top', parseInt(bird.css('top')) + 10);
        bird.css('transform', 'rotate(50deg)'); // Nghiêng object chú chim 50 độ
    }

    // Hàm di chuyển chú chim bay lên
    function up() {
        bird.css('top', parseInt(bird.css('top')) - 20);
        bird.css('transform', 'rotate(-10deg)'); // Nghiêng object chú chim -10 độ
    }

    // Hàm thua game
    function stop_the_game() {
        clearInterval(playGame()); // Xoá realtime chơi game
        game_over = true;
        $('#restart_btn').slideDown(); // Hiện nút chơi lại
    }

    // Khi click vào nút Chơi lại
    $('#restart_btn').click(function () {
        location.reload(); // Tải lại trang
    });

    // Hàm va chạm giữa 2 object
    function collision($div1, $div2) {
        // Khai báo các thông số của 2 object
        var x1 = $div1.offset().left;
        var y1 = $div1.offset().top;
        var h1 = $div1.outerHeight(true);
        var w1 = $div1.outerWidth(true);
        var b1 = y1 + h1;
        var r1 = x1 + w1;
        
        var x2 = $div2.offset().left;
        var y2 = $div2.offset().top;
        var h2 = $div2.outerHeight(true);
        var w2 = $div2.outerWidth(true);
        var b2 = y2 + h2;
        var r2 = x2 + w2;

        // Nếu xảy ra va chạm
        if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
            return false;
        }
        // Ngược lại không va chạm
        else
        {
            return true;
        }
    }
});

Trong đó mình đã chú thích rất kỹ từng phần và chức năng của từng hàm một rồi. Mình chỉ nói về công dụng của các lệnh .offset().outerHeight(true).outerWidth(true).

  • .offset() là lệnh lấy toạ độ hiện tại của object.
  • .outerHeight(true)lệnh lấy giá trị chiều cao của object, chiều rộng này bao gồm cả border, padding và margin nếu có thêm tuỳ chọn true.
  • .outerWidth(true) là lệnh lấy giá trị chiều rộng của object, chiều rộng này bao gồm cả border, padding và margin nếu có thêm tuỳ chọn true.

​Thế là xong ! Giờ các bạn chay thử để xem thành quả của mình nhé !

3. Lời kết 

Qua bài này, chúng ta đã biết cách viết một game Flappy Bird đơn giản bằng HTML, CSS và jQuery. Hi vọng bài này sẽ củng cố cho các bạn các kiến thức đã học. Chúc các bạn thành công và vui vẻ với game mình tự tạo ra.

0