Hướng dẫn làm game bằng javascript

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 Flappy Bird. 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...

• Truy cập GitHub để tải về các tập tin cần thiết và code mẫu.

Đầ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 Flappy Bird.

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

  
    
  
  
   
FlappyBird by Quantrimang.com
   
   
   
   
  

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: .

Bắt đầu code flappyBird.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 Flappy Bird. Để 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 bird = 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à flappyBird.js.

bird.src = "images/bird.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 nước phía trên và ống nước 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 nước 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 nước phía trên. Hai ống nước có chung tọa độ X.

bX và bY là tọa độ X và Y của chú chim, 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ú chim 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 chú chim mỗi khi bàn phím được nhấn. Người chơi có thể điểu khiển chú chim 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ú chim 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 nước đầ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 nước để game tiếp tục diễn ra sau khi chú chim 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ú chim vào ống nước. 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 + bird.width >= pipe[i].x && bX <= pipe[i].x + pipeNorth.width && (bY <= pipe[i].y + pipeNorth.height || bY+bird.height >= pipe[i].y+constant) || bY + bird.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(bird,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:

Đây là kết quả sau khi bạn hoàn thành code game Flappy Bird bằng JavaScript

Để tìm hiểu thêm về JavaScript mời bạn truy cập: JavaScript là gì? và để tham khảo thêm các bài tập khác của JavaScript mời các bạn vào: Tổng hợp bài tập JavaScript có code mẫu.

• Java và JavaScript có gì khác nhau?
• Bật, tắt JavaScript trên Chrome, Cốc Cốc, Firefox, Edge, Opera, Safari

Thứ Hai, 17/08/2020 13:43

4,4 ★ 8 👨 12.872

#JavaScript #

2 Bình luận

Sắp xếp theo

Xóa Đăng nhập để Gửi

• Huy Trương cho mình xin dữ liệu tài nguyên

  Thích · Phản hồi · 0 · 16/09/20
  • Đỗ Kỷ Bạn vào trong bài có link đó

    Thích · Phản hồi · 0 · 17/09/20

• Phạm Phúc là sao dzậy mấy thầy 

  Thích · Phản hồi · 0 · 29/08/20

Bạn nên đọc

• Khóa học về trí tuệ nhân tạo (AI) online miễn phí của đại học Phần Lan, bất cứ ai cũng có thể tham gia
• Gartner: Thế giới sắp vỡ mộng với Twitter
• Mời tải game bắn súng Butcher đang miễn phí trên GOG
• Cách cập nhật Play Together, update Play Together
• Cách vẽ trực tiếp lên ảnh trên iPhone
• 10 bức tranh minh họa phản ánh hiện thực cuộc sống ẩn chứa rất nhiều nghĩa

Lập trình

• Trọng tâm là gì? Công thức tính trọng tâm của tam giác
• 29 câu hỏi phỏng vấn PHP trình độ căn bản và câu trả lời
• Số hữu tỉ là gì? Số vô tỉ là gì?
• Top 13 trình biên dịch Python tốt nhất
• Trắc nghiệm tin học 12 bài số 3 (có đáp án)
• Cập nhật Bootstrap mới nhất
• Kỹ sư DevOps là gì? Kỹ sư DevOps làm công việc gì? Lương bao nhiêu?
• Cách trở thành nhà phát triển Android trong năm 2023: Họ là ai? Cần những kỹ năng gì? Lương bao nhiêu?
• Top plugin Bootstrap tốt nhất trong năm

Xem thêm

Lập trình

• SQL
• Python
• Cơ sở dữ liệu
• AngularJS
• Cấu trúc dữ liệu và giải thuật

• Công nghệ
  • Ứng dụng
  • Hệ thống
  • Game - Trò chơi
  • iPhone
  • Android
  • Linux
  • Nền tảng Web
  • Đồng hồ thông minh
  • Chụp ảnh - Quay phim
  • macOS
  • Phần cứng
  • Thủ thuật SEO
  • Kiến thức cơ bản
  • Raspberry Pi
  • Dịch vụ ngân hàng
  • Lập trình
  • Dịch vụ công trực tuyến
  • Dịch vụ nhà mạng
  • Nhà thông minh
• Download
  • Ứng dụng văn phòng
  • Tải game
  • Tiện ích hệ thống
  • Ảnh, đồ họa
  • Internet
  • Bảo mật, Antivirus
  • Họp, học trực tuyến
  • Video, phim, nhạc
  • Mail
  • Lưu trữ đám mây
  • Giao tiếp, liên lạc, hẹn hò
  • Hỗ trợ học tập
  • Máy ảo
• Tiện ích
• Khoa học
  • Khoa học vui
  • Khám phá khoa học
  • Bí ẩn - Chuyện lạ
  • Chăm sóc Sức khỏe
  • Khoa học Vũ trụ
  • Khám phá thiên nhiên
• Điện máy
  • Tủ lạnh
  • Tivi
  • Điều hòa
  • Máy giặt
• Cuộc sống
  • Kỹ năng
  • Món ngon mỗi ngày
  • Làm đẹp
  • Nuôi dạy con
  • Chăm sóc Nhà cửa
  • Kinh nghiệm Du lịch
  • Halloween
  • Mẹo vặt
  • Giáng sinh - Noel
  • Tết 2023
  • Quà tặng
  • Giải trí
  • Là gì?
  • Nhà đẹp
  • TOP
  • Phong thủy
• Video
  • Công nghệ
  • Cisco Lab
  • Microsoft Lab
  • Video Khoa học
• Ô tô, Xe máy
  • Giấy phép lái xe
• Làng Công nghệ
  • Tấn công mạng
  • Chuyện công nghệ
  • Công nghệ mới
  • Trí tuệ nhân tạo (AI)
  • Anh tài công nghệ
  • Bình luận công nghệ
  • Tổng hợp
• Học CNTT
  • Quiz công nghệ
  • Microsoft Word 2016
  • Microsoft Word 2013
  • Microsoft Word 2007
  • Microsoft Excel 2019
  • Microsoft Excel 2016
  • Hàm Excel
  • Microsoft PowerPoint 2019
  • Microsoft PowerPoint 2016
  • Google Sheets - Trang tính
  • Code mẫu
  • 
    Photoshop CS6
  • Photoshop CS5
  • HTML
  • CSS và CSS3
  • Python
  • Học SQL
  • Lập trình C
  • Lập trình C++
  • Lập trình C#
  • Học HTTP
  • Bootstrap
  • SQL Server
  • JavaScript
  • Học PHP
  • jQuery
  • Học MongoDB
  • Unix/Linux
  • Học Git
  • NodeJS

Giới thiệu | Điều khoản | Bảo mật | Hướng dẫn | Ứng dụng | Liên hệ | Quảng cáo | Facebook | Youtube | DMCA

Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản: CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. Địa chỉ: 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại: 024 2242 6188. Email: [email protected]. Chịu trách nhiệm nội dung: Lê Ngọc Lam.

Bản quyền © 2003-2023 QuanTriMang.com. Giữ toàn quyền. Không được sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc QuanTriMang.com khi chưa được phép.