• Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
AnonyViet
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
No Result
View All Result
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
No Result
View All Result
AnonyViet
No Result
View All Result

Hướng dẫn làm game javascript đơn giản bằng thư viện Phaser

AnonyViet by AnonyViet
17/12/2017
in Code
Reading Time: 9 mins read
A A
10

Mục lục bài viết

  1. Nội dung:
  2. Hướng dẫn:
  3. Source code:
  4. Lời Kết:

Nội dung:

Chắc tất cả các bạn ai cũng đã từng chơi game BreakOut rồi nhỉ 🙂 Sau đây mình sẽ hướng dẫn các bạn tự tạo game này bằng cách sử dụng các thư viện Javascript có sẵn. Mình sẽ trình bày step-by-step nên các bạn yên tâm là sẽ làm được nhé 🙂

Hướng dẫn:

Tạo cấu trúc cây thư mục như sau:

Các bài viết liên quan

top 3 website game crack an toan

Top 3 trang Web tải Game crack an toàn và sạch

03/05/2022
Tải Hack Hungry Dragon Mod không giới hạn kim cương 2022 11

Tải Hack Hungry Dragon Mod không giới hạn kim cương 2022

10/04/2022
Cách lấy cookie XSS chứa mật khẩu bằng JavaScript 12

Cách lấy cookie XSS chứa mật khẩu bằng JavaScript

28/03/2022
tai game Hexonia giai tri mobile

Top 3 tựa Game Mobile Giải trí nên chơi để thư giản

25/03/2022

game javascript đơn giản bằng thư viện Phaser

File index.html có nội dung như sau:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Gamedev Phaser Workshop - lesson 01: Initialize the framework</title>
	<style>* { padding: 0; margin: 0; }</style>
	<script src="phaser.min.js"></script>
	<script src="breakout.js"></script>
</head>
<body>

</body>
</html>

Bây giờ chúng ta sẽ bắt đầu viết code cho game.

var game = new Phaser.Game(480, 360, Phaser.AUTO, null, {
	preload: preload,
	create: create,
	update: update
});

function preload() {}

function create() {}

function update() {}

Trong file breakout.js, bạn thêm  code sau:

Khi chạy thử, chúng ta thấy trên màn hình xuất hiện một khu vực có màu đen kích thước 480×360 là được nhé.

Bây giờ chúng ta sẽ thay đổi background  cho game.

Trong hàm preload() thêm dòng code sau:

 game.load.image("background", "assets/background.jpeg");

Đây là câu lệnh giúp load hình ảnh lên. Tuy nhiên nếu bây giờ các bạn load lại trang sẽ thấy không có gì xảy ra cả, bởi vì hình ảnh mới chỉ được load lên chứ chưa được sử dụng.

Thêm đoạn code sau vào hàm create():

game.add.tileSprite(0, 0, 1000, 600, 'background');

Bây giờ bạn hãy thử load lại trang xem :))

Tiếp theo, để chơi game thì chúng ta cần có một trái bóng. Tương tự như background, chúng ta cần phải load hình ảnh trái bòng lên sau đó sau đó dùng nó. Trước tiên tạo một biến toàn cục đặt tên là ball đặt trước hàm preload():

var ball;

Thêm đoạn code sau vào hàm preload():

game.load.image("ball", "assets/ball.png");

Trong create() thêm đoạn code:

ball = game.add.sprite(game.world.width*0.5, game.world.height-70, "ball");
ball.anchor.setTo(0.5);

Sau khi có trái bóng, ta cần một thanh ngang để hứng trái bóng đó. Học code mà không thực hành thì chán lắm nhỉ. Bạn hãy thử đặt các dòng code sau vào đúng vị trí xem nào.

*Gợi ý: Hãy làm tương tự như làm với trái bóng.

var paddle;
	game.load.image('paddle', 'assets/paddle.png');
	paddle = game.add.sprite(game.world.width*0.5, game.world.height-50, "paddle");
	paddle.anchor.setTo(0.5);

làm game javascript đơn giản bằng thư viện Phaser

Đây là hình ảnh sau khi bạn đặt các dòng code vào đúng vị trí của nó.

Tiếp theo mình sẽ nói tiếp về các xử lý vật lý trong game.

Bạn hãy thử thêm dòng lệnh sau vào cuối hàm create()

Hướng dẫn làm game javascript đơn giản bằng thư viện Phaser 10

Thật tuyệt phải không nào. Hãy thử tiếp theo với paddle nhé. Tuy nhiên ta sẽ không muốn paddle cũng rơi xuống giống như ball. Nên sẽ không thêm thuộc tính trọng lượng cho nó, vì vậy cũng không cần thiết phải xử lý va chạm cho nó với khung game. Thay vào đó chúng ta sẽ thiết lập va chạm giữa paddle với ball. Hãy chỉnh sửa code của bạn như sau:

javascript đơn giản bằng thư viện Phaser

Hãy xem chuyện gì xảy ra nào. Ta thấy ball va chạm với paddle sau đó paddle rới xuống. Như phân tích ở trước, ta sẽ không muốn paddle bị rơi xuống, vậy hãy thêm dòng code sau vào cuối hàm create() :

paddle.body.immovable = true;

Tiếp theo chúng ta cần làm cho thanh paddle di chuyển. Đơn giản bạn chỉ cần thêm đọan code sau vào cuối hàm update() :

paddle.x = game.input.x || game.world.width*0.5;

Bây giờ thì paddle đã có thể di chuyển được. Tuy nhiên ta để ý thấy đường đi của trái bóng khá là “dị”, nguyên nhân là do ta đã thiết đặt trọng lượng cho trái bóng và điều đó là không cần thiết. Hãy thay thế đoạn code đó bằng dòng lệnh sau:

ball.body.velocity.set(150, -150);

Ổn hơn nhiều rồi đúng không nào :))

Vậy là chúng ta đã đi được 1/2 chặng đường rồi , ez phải không nào 🙂 Chú ý rằng bạn có thể tham khảo code mẫu, tuy nhiên code mẫu là những gì cuối cùng sau khi hoàn thành nên sẽ có thể không giống những gì mình đang nói ở đây. Vì vậy bạn hãy cố gắng theo dõi bài viết này nhé 🙂

Tiếp theo, chúng ta sẽ tạo ra các khối brick để bắn.

Việc đầu tiên là load các hình ảnh. Hãy thêm đoạn code sau vào cuối hàm preload() :

game.load.image('brick_blue', 'assets/brick_blue.png');
game.load.image('brick_red', 'assets/brick_red.png');
game.load.image('brick_violet', 'assets/brick_violet.png');
game.load.image('brick_green', 'assets/brick_green.png');

Sau đó thêm các biến toàn cục vào đầu chương trình:

            var bricks;
            var newBrick;
            var brickInfo;

Tạo một Function mới có tên là initBricks

Trong hàm này tạo một đối tượng lưu các thông số của brick như sau:

javascript đơn giản bằng thư viện Phaser

Tiếp theo chúng ta sẽ sử dụng vòng lặp for để hiển thị các brick lên. Thêm đoạn code sau vào cuối hàm initBricks():

javascript đơn giản bằng thư viện Phaser

Giải thích:

Trong đối trượng brickInfo:

  • width: chiều dài của một brick
  • height: chiều rộng của một brick
  • count: số brick bằng row*col
  • offset: tọa độ brick đầu tiên (chọn làm mốc)
  • color: mảng lưu các giá trị màu
  • padding: khoảng cách giữa các brick
  • bricks = game.add.group(); sẽ tạo ra một nhóm các đối tượng có đặc điểm giống nhau
  • var rdn = parseInt(Math.random()*4 +1); lấy một giá trị ngẫu nhiên từ 1-4 ứng với 4 màu đã quy định

Sau khi đã hiển thị được các brick lên màn hình, chúng ta sẽ xử lý va chạm cho ball và brick. Thêm dòng code sau vào hàm update();

game.physics.arcade.collide(ball, bricks, ballHitBrick);

Khi va chạm, chương trình sẽ gọi đến hàm ballHitBrick, vì vậy hãy tạo thêm hàm mới với nội dung sau:javascript đơn giản bằng thư viện Phaser

Nếu bạn để ý thì khi bóng va chạm với paddle thì luôn chuyển động với quỹ đạo xác định, như vậy game sẽ không hay cho lắm. Hãy tìm đoạn code xử lý va chạm giữa ball và paddle, sửa lại như sau:

javascript đơn giản bằng thư viện Phaser

Đến bước này thì ta đã hoàn thành 80% của game rồi, bạn hãy chơi thử và cảm nhận thành quả nhé 🙂 Bạn hãy để ý, game của chúng ta còn nhiều bug lắm

javascript đơn giản bằng thư viện Phaser

Sau khi chơi thử game, bạn có thể sẽ phát hiện ra một số điều như sau:

  • Bóng rơi xuống khỏi paddle không bị  thua.
  • Sau khi bắn hết brick, game không khởi tạo lại.

Ok, bây giờ chúng ta sẽ fix từng bug một nhé 😉

Hãy thêm đoạn code sau vào cuối hàm create() :

game.physics.arcade.checkCollision.down = false;
ball.checkWorldBounds = true;
ball.events.onOutOfBounds.add(ballLeaveScreen, this);

Sau đó thêm hàm ballLeaveScreen() có nội dung như sau:

javascript đơn giản bằng thư viện Phaser

Cuối cùng hãy tìm và sửa hàm ballHitBrick() như sau:

javascript đơn giản bằng thư viện Phaser

Bây giờ bạn hãy chơi lại và cảm nhận nhé :))

Source code:

Source code các bạn có thể download tại đây.

Lời Kết:

Ngoài ra các bạn có thể thêm một số tính năng khác như hiển thị score, mạng, nút start game… Mình sẽ không nói chi tiết vào các chức năng này, các bạn có thể xem trong file source mình đã để ở đầu bài.

Mình vừa hướng dẫn cho các bạn cách để tạo ra một game đơn giản bằng thư viện phaser. Qua bài viết này hi vọng các bạn có cái nhìn tổng qua về các ứng dụng javascript nói chung và game javascript nói riêng. Chúc các bạn thành công.

Tác giả: Hoàng Công Lý

Tags: codegamejavascriptPhasertạo game
Previous Post

Cách nuôi Acc Facebook Ads để chạy quảng cáo

Next Post

Nhận Tiền và Quà bằng cách đánh giá sản phẩm ở Vật Giá

AnonyViet

AnonyViet

Kiến thức như một ngọn lửa, càng chia sẽ nó sẽ càng bùng cháy!

Related Posts

Cách đóng gói code Python 13
Code

Cách đóng gói code Python

25/04/2022
Có nên dùng Unity để lập trình game không? 14
Code

Có nên dùng Unity để lập trình game không?

07/04/2022
Sử dụng httpx như một trình duyệt Web của Python 15
Code

Sử dụng httpx như một trình duyệt Web của Python

03/04/2022
top 3 website hoc lap trinh web tot nhat
Code

Top 4 Website học lập trình Web miễn phí tốt nhất trong năm 2022

29/03/2022
tao website cuoi mien phi
Code

Hướng dẫn tạo Website thông báo đám cưới miễn phí

21/03/2022
godot lap trinh game
Godot

Có nên học Godot Engine để lập trình Game không?

15/03/2022 - Updated on 17/03/2022
Next Post
đánh giá sản phẩm vật giá

Nhận Tiền và Quà bằng cách đánh giá sản phẩm ở Vật Giá

guest
guest

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

10 Comments
oldest
newest
Inline Feedbacks
View all comments
NguyenHaSon-Lewe-2006
NguyenHaSon-Lewe-2006
4 years ago

tks tác giả và Admin nhiều

Reply
Phước
Phước
4 years ago

đầu tiên ahihi

Reply
NguyenHaSon-Lewe-2006
NguyenHaSon-Lewe-2006
4 years ago
Reply to  Phước

em đầu tiên 🙂 🙂 🙂

Reply
Tokuda
Tokuda
4 years ago

Ad cho e link thư mục dc ko a
Tks Ad nhìu
Mãi ủng hộ Anonyviet :))

Reply
Lmint
Lmint
4 years ago
Reply to  Tokuda

có link tải rùi mà em. Source code đó

Reply
NguyenHaNam-Lewe-4A2
NguyenHaNam-Lewe-4A2
4 years ago

tks tác giả và Admin nhiều :))

Reply
NguyenHaSon-Lewe-2006
NguyenHaSon-Lewe-2006
4 years ago
Reply to  NguyenHaNam-Lewe-4A2

:v bác cũng tên Lewe, Nguyễn Hà ….., vâng, thánh sao ạ 🙂 🙂 yêu cầu bỏ tên Lewe bỏ dấu gạch ngang, copy bản quyền t méc bác hòọóỏồ

Reply
mizznam
mizznam
4 years ago

có video hok ad

Reply
DeverX
DeverX
4 years ago

ai giống mình tưởng là cách làm jav ko :)))

Reply
X1996
X1996
2 years ago

Cảm ơn Admin nhiều nha.

Reply
wpdiscuz   wpDiscuz

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác —

Fshare

Các bài mới

25 tính năng "bí mật" ẩn trong công cụ tìm kiếm DuckDuckGo 16

25 tính năng “bí mật” ẩn trong công cụ tìm kiếm DuckDuckGo

27/05/2022
doi icon recycle bin hinh con meo

Cách đổi Icon Thùng rác thành hình con mèo hả mồm

26/05/2022
Cách mở khóa Bootloader trên điện thoại Xiaomi bằng Mi Unlock 17

Cách mở khóa Bootloader trên điện thoại Xiaomi bằng Mi Unlock

26/05/2022
5 Extension Chrome "mờ ám" bạn cần phải xóa ngay 18

5 Extension Chrome “mờ ám” bạn cần phải xóa ngay

25/05/2022
5 Website giúp bạn tìm chủ tài khoản Email là ai 19

5 Website giúp bạn tìm chủ tài khoản Email là ai

24/05/2022

Ads

Giới thiệu

AnonyViet

AnonyViet

Nơi chia sẻ những kiến thức mà bạn chưa từng được học trên ghế nhà trường!

Chúng tôi sẵn sàng đón những ý kiến đóng góp, cũng như bài viết của các bạn gửi đến AnonyViet.

Hãy cùng AnonyViet xây dựng một cộng đồng CNTT lớn mạnh nhất!

Giới thiệu

AnonyViet là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. AnonyViet cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.

Liên hệ

Email: anonyviet.com[@]gmail.com

1409 Hill Street #01-01A
Old Hill Street Police Station
Singapore 179369

 

Bản quyền: DMCA.com Protection Status

Bài viết mới

  • 25 tính năng “bí mật” ẩn trong công cụ tìm kiếm DuckDuckGo
  • Cách đổi Icon Thùng rác thành hình con mèo hả mồm
  • Cách mở khóa Bootloader trên điện thoại Xiaomi bằng Mi Unlock
  • Cách thắng Game bắn cá
  • 5 Extension Chrome “mờ ám” bạn cần phải xóa ngay
  • 5 Website giúp bạn tìm chủ tài khoản Email là ai

©2022 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ. Google iwin888 Bing tải game iwin Github tải iwin apk Github tải win456 Youtube ku fun wikipedia 88vin reddit twin 567LIVE MMLive SP666 92lottery sun86 stackoverflow

No Result
View All Result
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC

©2022 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ. Google iwin888 Bing tải game iwin Github tải iwin apk Github tải win456 Youtube ku fun wikipedia 88vin reddit twin 567LIVE MMLive SP666 92lottery sun86 stackoverflow

wpDiscuz
pixel