Chuyển đến nội dung chính

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()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(10140"red"10120);
}
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)


Nhận xét

Bài đăng phổ biến từ blog này

Tổng hợp danh sách các trang web lấy backlink cực tốt (P.1)

Đi backlink  trong SEO là điều mà ai cũng phải biết và đầu tư cho nó nhiều nhất. Dưới đây, mình chia sẻ các trang web có thể đi backlink khá tốt cho mọi người. Mỗi ngày các bạn tạo 1 bài post sau đó post lên 10 trang trong tổng số 40 trang này, hôm sau cũng viết 1 bài khác rồi post lên 10 trang kế, khi hết thì quay vòng lại 10 trang đầu, mình sẽ update thêm các website nên các bạn cứ yên tâm không lo hết. (Các bạn nhớ bookmark lại kẻo quên trang mình nha :) ) Nếu các bạn không rõ về DA PA IN-EXTERNAL Links thì xem ở đây:  Các chỉ số quan trọng cần biết khi làm SEO ID URL DA PA Internal Links External Links Alexa Global Rank Alexa Local Rank 1 http://diendan.zing.vn/ 63,17 54,5 168 19 701 9 2 http://vatgia.com/ 62,61 57,34 984 23 8086 71 3 http://forum.ueh.edu.vn/ 49,82 38,88 555 43 92060 774 4 http://www.5giay.vn/ 47,12 55,72 445 12 43

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

Hôm nay chúng ta sẽ viết một game tương tự flappy bird bằng HTML và JavaScript một cách đơn giản, bài viết không chỉ giúp bạn nâng cao khả năng lập tình HTML JS mà còn tạo ra 1 sản phẩm thú vị cho nên các bạn chịu khó theo dõi nha. Các bạn xem demo sản phẩm khi chúng ta hoàn thành trên fiddle:  Demo  đây chỉ là demo cơ bản thôi, khi xem xong bài viết này các bạn có thể làm hay hơn thế nữa :)). Nào ta bắt đầu thôi. HTML Canvas Đầu tiên để tạo game chúng ta cần tạo background cho nó, chúng ta sẽ dùng HTML Canvas , Canvas là một element tuyệt vời cho việc thiết kế game trong HTML. Chúng ta sẽ dùng Js để vẽ trên Canvas. Nếu các bạn chưa biết về Canvas mình có để link phía dưới để các bạn tìm hiểu nên hiện giờ cứ yên tâm mà xem tiếp nha. Bây giờ các bạn tạo 1 file html và nhập đoạn code sau: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas {

Xdebug, PhpStorm and Docker - Why it not working?

  Lately, i start new job with Magento, and while setup IDE for project i face problem with Xdebug, PhpStorm and Docker. It took me a lot of hours to find out and make it work. So i write this post to save some step for you guys also me some way to solve the stuck when we got. 1. How Xdebug work: Link  i founded this article with quite easy understand explanation how xdebug work, so spend some minutes to read it, we need to understans the thing we do to easy to solve it. 2: Define Xdebug is installed on server: With php -v you should see Xdebug showed. And with phpinfo() If you dont see it showed, it mean you have not installed it or it not enable Checking if you have enable extension from your php ini. Or if you have not installed it, consider its document: Link . 3. Now if you make sure xdebug installed but your break point at PhpStorm not break, continue these steps: In phpinfo(), make sure  xdebug.remote_enable is On cause you are using docker container, also checking  xdebug.remot