Code game Butterfly bằng JavaScript

Ngày đăng: 2023-02-01 19:13:46

JavaScript cũng là một trong những ngôn ngữ lập trình phổ biến nhất hiện tại. Trong bài viết này, chúng ta sẽ sử dụng JavaScript và một chút HTML5 để xây dựng một phiên bản đơn giản của game Butterfly. Hy vọng bài viết sẽ giúp bạn cũng có thêm được một số kỹ năng JavaScript căn bản.

Những chuẩn bị ban đầu

Để viết game bằng JavaScript bạn cần hai thành phần chính, thứ nhất là một thẻ Canvas của HTML5 và thứ hai là một tập tin JavaScript.

Và trước khi đi vào các bước xây dựng game Flappy Bird, bạn nên tải về những "nguyên liệu" ban đầu như hình ảnh, âm thanh... Ở đây, hình ảnh và âm thanh đã được cung cấp sẵn, tuy nhiên, bạn hoàn toàn có thể tùy biến, thay bằng hình ảnh và âm thanh của chính bạn. Ví dụ, thay chú chim bằng bất cứ con gì đó bạn thích...

Đầu tiên, chúng ta phải tạo ra một file index.html, trong đó chứa thẻ Canvas. Nội dung của thẻ Canvas sẽ được xây dựng từ JavaScript và trong trường hợp này nó chính là tựa game Butterfly.

Code mẫu của file index.html như sau:

<!DOCTYPE html>
<html>
  <head>
    <title>Butterfly</title>
  </head>
  <body>
   <h3>butterfly by thuanhoaonline.com</h3>
   
   <canvas id="canvas" width="288" height="512"></canvas>
   
   <script src="butterfly.js"></script>
  </body>
</html>

Trong đó, chúng ta khai báo thẻ Canvas với chiều rộng 288 và chiều cao 512. Ở bên dưới, trước khi đóng thẻ body, chúng ta thêm vào hàm khai báo code JavaScript: <script src="butterfly.js"></script>.

Bắt đầu code butterfly.js

Bạn có thể sử dụng các IDE khác nhau nhưng trong hướng dẫn này, chúng tôi sử dụng Sublime. Việc đầu tiên chúng ta cần làm đó là chọn thẻ Canvas và thu thập ngữ cảnh bằng getContext ('2d'):

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");

Hàm getContext ('2d') có các thuộc tính và phương thức cho phép chúng ta vẽ và thực hiện nhiều thứ khác nhau trên Canvas.

Bây giờ, chúng ta cần tạo ra hình ảnh cho game Butterfly. Để tạo hình ảnh, chúng ta gán và hiển thị giá trị của hàm Image() bằng lệnh new.

var butterfly = new Image();
var bg = new Image();
var fg = new Image();
var pipeNorth = new Image();
var pipeSouth = new Image();

Tiếp theo, chúng ta phải thiết lập nguồn tải ảnh bằng thuộc tính src. Để quá trình này đơn giản, không xảy ra lỗi, bạn nên lưu thư mục ảnh và video vào cùng thư mục với index.html và butterfly.js.

buterfly.src = "images/butterfly.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeNorth.src = "images/pipeNorth.png";
pipeSouth.src = "images/pipeSouth.png";

Với cách làm tương tự, chúng ta tạo hiệu ứng âm thanh và thiết lập nguồn tải âm thanh bằng đoạn code sau:

var fly = new Audio();
var scor = new Audio();

fly.src = "sounds/fly.mp3";
scor.src = "sounds/score.mp3";

Để tạo hiệu ứng rơi tự do cho chú chim và khoảng cách giữa hai ống nước chướng ngại vật, khai báo tọa độ xuất hiện lần đầu cho chú chim, chúng ta dùng đoạn code:

var gap = 85;
var constant;

var bX = 10;
var bY = 150;

var gravity = 1.5;

var score = 0;

gap là khoảng cách giữa ống phía trên và ống phía dưới, ở đây, giá trị của gap được thiết lập là 85. constant được dùng để xác định tọa độ Y của ống phía dưới và nó được tính toán bằng cách cộng thêm gap vào tọa độ Y của ống phía trên. Hai ống có chung tọa độ X.

bX và bY là tọa độ X và Y của chú bướm, giá trị ban đầu là 10 và 150 tương ứng. Tiếp theo, với hàm gravity bằng 1.5, mỗi lần rơi chú bướm sẽ rơi xuống 1.5 pixel. Hàm score được dùng để tính điểm số cho người chơi.

Tiếp theo, chúng ta cần tạo hoạt động bay lên cho con bướm mỗi khi bàn phím được nhấn. Người chơi có thể điểu khiển chú bướm bằng cách nhấn phím bất kỳ trên bàn phím. Chúng ta cần thêm một biến EventListener vào code của mình và khi người chơi nhấn phím, chúng ta sẽ chạy hàm moveUp(), chú bướm sẽ bay lên 25 pixel và phát ra hiệu ứng âm thanh.

document.addEventListener("keydown",moveUp);

function moveUp(){
    bY -= 25;
    fly.play();
}

Chúng ta cũng cần lưu lại tọa độ của các ống nước bằng một mảng. Khi game khởi động, vị trí tọa độ X của các ống đầu tiên là 288 pixel (bằng cvs.width).

var pipe = [];

pipe[0] = {
  x : cvs.width,
  y : 0
};

Cuối cùng, chúng ta cần vẽ thêm các ống để game tiếp tục diễn ra sau khi chú bướm vượt qua những chướng ngại vật đầu tiên. Ngoài ra, trong đoạn code cuối cùng này còn có code xác định va chạm giữa chú bướm vào ống. Khi va chạm xảy ra (trùng tọa độ), game sẽ được khởi động lại. Còn nếu vượt qua, điểm số sẽ được tính cho người chơi.

function draw(){
    
    ctx.drawImage(bg,0,0);
    
    
    for(var i = 0; i < pipe.length; i++){
        
        constant = pipeNorth.height+gap;
        ctx.drawImage(pipeNorth,pipe[i].x,pipe[i].y);
        ctx.drawImage(pipeSouth,pipe[i].x,pipe[i].y+constant);
             
        pipe[i].x--;
        
        if( pipe[i].x == 125 ){
            pipe.push({
                x : cvs.width,
                y : Math.floor(Math.random()*pipeNorth.height)-pipeNorth.height
            }); 
        }

        // detect collision
        
        if( bX + buteerfly.width >= pipe[i].x && bX <= pipe[i].x + pipeNorth.width && (bY <= pipe[i].y + pipeNorth.height || bY+ buteerfly.height >= pipe[i].y+constant) || bY + buteerfly.height >=  cvs.height - fg.height){
            location.reload(); // reload the page
        }
        
        if(pipe[i].x == 5){
            score++;
            scor.play();
        }
        
        
    }

    ctx.drawImage(fg,0,cvs.height - fg.height);
    
    ctx.drawImage(buteerfly,bX,bY);
    
    bY += gravity;
    
    ctx.fillStyle = "#000";
    ctx.font = "20px Verdana";
    ctx.fillText("Score : "+score,10,cvs.height-20);
    
    requestAnimationFrame(draw);
    
}

draw();

Bây giờ, phần code đã xong, bạn cần lưu lại toàn bộ file HTML và flappyBird.js. Bạn có thể nhấp chuột phải vào cửa sổ Sublime sau đó chọn Open in a new browser để chơi thử game mà mình vừa viết. Nếu không có gì trục trặc, kết quả mà bạn nhận được sẽ giống như hình bên dưới:

Để game không load lại các bạn thay trong phần kiểm tra va chạm hàm

location.reload(); bằng

exit();

OK. Vậy là các bạn đã có game chơi thư giãn rồi nhé. Các bạn có thể tự mình chế thêm nhiều thứ nữa cho game. Chúc các bạn vui vẻ.

Code games & Web Code game bằng Javascript, HTML, CSS

Cờ caro	Butterfly	Lật hình (luyện trí nhớ)
Cờ tướng ONLINE	Xếp hình	Ghép hình
15_PUZZLE	Kill ghosts	Banchim
Planet Defense	Tower game	Tower game
Plapy Bird (NH.Đông)	Vượt chướng ngại vật

Code game Butterfly bằng JavaScript

Bài viết trong cùng chuyên mục

Góc games giải trí