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

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

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

Nếu các bạn chưa xem các bài trước thì xem tại đây.

Ở bài trước chúng ta đã tạo vật cản và thực hiện stop game khi chim chạm vào thành công, giờ chúng ta sẽ làm cho các obstacles này chuyển động để tăng độ khó.


Moving Obstacle

Chúng ta sẽ thay đổi tọa độ x của obstacles mỗi lần update:

function updateGameArea() {
          if (myGamePiece.crashWith(myObstacle)) {
            myGameArea.stop();
        } else {
            myGameArea.clear();
            myObstacle.x += -1;
            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();
        }

Refresh lại ta sẽ thấy vật cản di chuyển!

Multiple Obstacles

Phần này khá là khó hiểu nên các bạn chịu khó ngâm cứu kĩ @@.
Chúng ta sẽ tạo thêm 1 obstacles mới  mỗi khi game update được 150 frames.
Ta thêm dòng code này vào 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.frameNo = 0; 

Tạo 1 function để tính frame rate:
function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

Hàm sẽ trả về true nếu như frameNo bằng 1 số chia hết cho 150 (150, 300,450...) chia hết kq=1, 1%1==0, các số khác như 1,2,3...10...50...120 sẽ ra số khác 1 và chia % 1 sẽ !=0.
Giờ ta sẽ thay đổi trong updateGameArea() nếu thỏa điều kiện hàm ở trên thì sẽ push 1 obstacle vào Game, ta sửa code lại như sau:

   var myObstacles = [];
        function updateGameArea() { 
            var x, y;
            for (i = 0; i < myObstacles.length; i += 1) {
                if (myGamePiece.crashWith(myObstacles[i])) {
                    myGameArea.stop();
                    return;
                } 
            }
            myGameArea.clear();
            myGameArea.frameNo += 1;
            if (myGameArea.frameNo == 1 || everyinterval(150)) {
                x = myGameArea.canvas.width;
                y = myGameArea.canvas.height - 200
                myObstacles.push(new component(10, 200, "green", x, y));
            }
            for (i = 0; i < myObstacles.length; i += 1) {
                myObstacles[i].x += -1;
                myObstacles[i].update();
            }

            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();     
        }

Các bạn refresh lại page rồi test kết quả xem giống mình không.
Viết game flappy bird bằng HTML và JavaScript (P.5)

Obstacles of Random Size

Giờ chúng ta sẽ tạo ra nhiều cột xanh đó với kích cỡ khác nhau để tăng độ khó cho game.
Ta sửa 1 tí trong updateGameArea():

   function updateGameArea() { 
            var x, y;
            for (i = 0; i < myObstacles.length; i += 1) {
                if (myGamePiece.crashWith(myObstacles[i])) {
                    myGameArea.stop();
                    return;
                } 
            }
            myGameArea.clear();
            myGameArea.frameNo += 1;
            if (myGameArea.frameNo == 1 || everyinterval(150)) {
                x = myGameArea.canvas.width;
                minHeight = 20;
                maxHeight = 200;
                height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
                minGap = 50;
                maxGap = 200;
                gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
                myObstacles.push(new component(10, height, "green", x, 0));
                myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
            }
            for (i = 0; i < myObstacles.length; i += 1) {
                myObstacles[i].x += -1;
                myObstacles[i].update();
            }
minHeight, maxHeight chỉ độ cao của obstacles, minGap, maxGap khoảng cách giữa hai 2 vật cản để con chim chui qua.
Kết quả ta được:
Viết game flappy bird bằng HTML và JavaScript (P.5)
Game gần hoàn thiện rồi, giờ các bạn đã có thể chơi được rồi đấy :) qua bài kế chúng ta sẽ cải tiến một số thành phần để game hoàn thiện hơn.
Kết thúc bài 5 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á.


Nhãn:

Nhận xét

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

7 kĩ thuật tối ưu seo blogspot cơ bản cần biết

Là một new blogger ắt hẳn mọi người còn lạ lẫm với blogspot chưa có nhiều thời gian để nghiên cứu, tìm hiểu về nó, do đó hôm nay mình xin chia sẻ với các bạn các tips cơ bản nhưng rất cần thiết giúp t ối ưu hóa seo cho blogspot . Chúng ta bắt đầu nào. 1. Thay đổi đường dẫn URL của bài viết trước khi publish. Thông thường khi bạn tạo 1 bài post, đường dẫn URL sẽ được sinh tự động dựa theo tiêu đề, nhưng nếu tiêu đề dài nó sẽ tự động rút ngắn lại, điều này làm cho đường dẫn không đầy đủ đôi khi còn bị sai từ khóa, do đó chúng ta nên tự đặt tên cho đường dẫn của mình để tối ưu SEO . Để sửa đường dẫn các bạn làm theo hình Vào phần cài đặt bài đăng, mục liên kết cố định chọn liên kết cố định tùy chỉnh và sửa phần text cho phù hợp với nội dung bài viết rồi click hoàn thành. 2. Kiểm soát mật độ từ khóa trong bài viết. Ai cũng biết có nhiều từ khóa cần seo trong bài viết sẽ tốt nhưng nhiều quá thì sẽ gây ngộ độc và có thể bị gắn mác spam. Mật độ từ khóa thích hợp là 2%/po...
9 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();         }...
7 nhận xét
Đọc thêm