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

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

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

Sau khi đã di chuyển con chim bằng các button được rồi giờ chúng ta sẽ di chuyển thông qua các phím lên xún trái phải ở keyboard.

Keyboard as Controller

Chúng ta sẽ tạo 1 method trong object myGameArea để kiểm tra nút keyboard được ấn.
Ta thay đổi trong myGameArea:

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);
        window.addEventListener('keydown', function (e) {
            myGameArea.key = e.keyCode;
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.key = false;
        })
    }, 
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

Cập nhật vị trí của chim khi nhấn nút:
Sửa trong updateGameArea:

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0; 
    if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
    if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
    if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
    if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
    myGamePiece.newPos(); 
    myGamePiece.update();
}

Refresh lại trang và test kết quả.

Bây giờ chúng ta sẽ thêm các vật cản vào game, trong flappy bird là các ống nước màu xanh ấy.

Game Obstacles

Việc tạo ra các vật cản cũng tương tự như tạo con chim đỏ, chúng ta chỉ cần thay đổi các thông số 1 tí.

var myGamePiece;
var myObstacle;
function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myObstacle = new component(10, 200, "green", 300, 120); 
    myGameArea.start();
}

Đừng quên cập nhật lại trong updateGameArea():  
   function updateGameArea() {
            myGameArea.clear();
            myGamePiece.speedX = 0;
            myGamePiece.speedY = 0;    
            if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
            if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
            if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
            if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
            myGamePiece.newPos();    
            myGamePiece.update();
            myObstacle.update();
        }

Kết quả ta được:

Hit The Obstacle = Game Over

Trong ví dụ trên khi con chim đụng phải vật cản thì không có gì xảy ra, giờ chúng ta sẽ cài đặt sự kiện khi chim gặp vật cản. Chúng ta sẽ tạo 1 method để check khi 2 component va chạm và 1 method để dừng game.
Các bạn thêm function stop vào myGameArea để dừng game.
  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);
                window.addEventListener('keydown', function (e) {
                    myGameArea.key = e.keyCode;
                })
                window.addEventListener('keyup', function (e) {
                    myGameArea.key = false;
                })
            }, 
            clear : function(){
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            },
            stop : function() {
                clearInterval(this.interval);
            }
        }
Trong component các bạn thêm đoạn code sau để check 2 component đụng nhau.
    function component(width, height, color, x, y) {
            this.gamearea = myGameArea;
            this.width = width;
            this.height = height;
            this.speedX = 0;
            this.speedY = 0;    
            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);
            }
            this.newPos = function() {
                this.x += this.speedX;
                this.y += this.speedY;        
            }
            this.crashWith = function(otherobj) {
                var myleft = this.x;
                var myright = this.x + (this.width);
                var mytop = this.y;
                var mybottom = this.y + (this.height);
                var otherleft = otherobj.x;
                var otherright = otherobj.x + (otherobj.width);
                var othertop = otherobj.y;
                var otherbottom = otherobj.y + (otherobj.height);
                var crash = true;
                if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
                    crash = false;
                }
                return crash;
            }
        }
Trong updateGameArea:

    function updateGameArea() {
          if (myGamePiece.crashWith(myObstacle)) {
            myGameArea.stop();
        } else {
            myGameArea.clear();
            myGamePiece.speedX = 0;
            myGamePiece.speedY = 0; 
            if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
            if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
            if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
            if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
            myGamePiece.newPos(); 
            myGamePiece.update();
            myObstacle.update();
        }

Ta refresh lại page và test kết quả, di chuyển con chim đụng vật cản, con chim sẽ dừng.
Kết thúc bài 4 tại đây, các bạn không hiểu gì comment ở dưới mình sẽ trả lời sớm nhất có thể :), không hỏi gì cũng để lại comment để mình có động lực viết tiếp nhá.

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

Nhãn:

Nhận xét

Đăng nhận xét

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

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
Đăng nhận xét
Đọc thêm

5 minute setup Firebase for .NET C#

  Step 1: - Access firebase console and create a project: - At the project you just created, go to Firestore Database and create a collection you want: - Next, go to the project setting: - At tab  Service account generate your private key. Step 2: - Create a C# project. - Use Nuget to install following packages: - Create folder to store private key. - Finally, the code to make everything run: using Google.Apis.Auth.OAuth2; using Google.Cloud.Firestore; using Google.Cloud.Firestore.V1; using Google.Cloud.Storage.V1; using Grpc.Auth; using Grpc.Core; using System; using System.Collections.Generic; using System.IO; using System.Threading.Tasks; namespace FireBaseConnect {     class Program     {         static void Main(string[] args)         {             MyFireStore myfs = new MyFireStore();             myfs.GetLicense().Wait();         }     }     class MyFireStore     {         string jsonPath = "Your Json Path";         string projectId = "ProjectId in your private k
7 nhận xét
Đọc thêm

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
21 nhận xét
Đọc thêm