Hướng dẫn play javascript - chơi javascript
|
Trong bài viết trước, chúng ta đã tìm hiểu về việc cấu hình môi trường cho dự án làm game đơn giản bằng Javascript. Show Nội dung chính
Hôm nay, chúng ta cùng nhau cài đặt P5js vào trong dự án game Plinko bằng javascript này nhé. Các bạn có thể kết hợp bài viết với xem nội dung sau
1. Khởi tạo P5js2. Cấu trúc thư mục dự án làm game bằng javascript
File index.ts của game plinko javascript
Các bạn có thể kết hợp bài viết với xem nội dung sau 5. Class Loader – thực thi việc tải tài nguyên hình ảnh cho game plinko 2. Cấu trúc thư mục dự án làm game bằng javascript 4. File cấu hình game App.ts 5. Class Loader – thực thi việc tải tài nguyên hình ảnh cho game plinko File index.ts của game plinko javascript Chạy thử game demo 3. Khởi tạo P5Wrapper.ts – class đại diện cho khởi tạo P54. File cấu hình game App.ts import AppConfig from "./configs/app";
import Loader from "./Loader";
export default class P5Wrapper {
private options: any = {
parent: "game",
};
private P5: any;
private mCanvas: any;
private loader: Loader;
constructor(P5: any, options: any = {}) {
this.P5 = P5;
this.options = { ...this.options, ...options };
this.loader = new Loader(P5);
}
preload() {
this.loader.loadImages();
}
setup() {
this.mCanvas = this.P5.createCanvas(
AppConfig.APP.WIDTH,
AppConfig.APP.HEIGHT
);
this.mCanvas.parent(this.options.parent);
}
draw() {
let background = Loader.getImage("bg");
if (background) this.P5.background(background);
}
}5. Class Loader – thực thi việc tải tài nguyên hình ảnh cho game plinko File index.ts của game plinko javascript, với lệnh này chúng ta export P5Wrapper để các file khác có thể dễ dàng import và sử dụng Chạy thử game demo
5. Class Loader – thực thi việc tải tài nguyên hình ảnh cho game plinko Thư viện P5js đã được cài đặc thông qua lệnh npm, do vậy chúng ta có thể dễ dàng sử dụng trong dự án. Khi làm việc với P5js các bạn cần lưu ý các hàm đặc biệt như sau: Hàm preload: hàm này được khởi tạo đầu tiên, thông thường được sử dụng cho mục đích load các tài nguyên của ứng dụng như là ảnh, âm thanh, font chữ… Hàm setup: Hàm preload sau khi chạy xong sẽ gọi đến hàm setup. Hàm setup với múc đích để cài đặt các thông số ban đầu cho p5js ví dụ như là khởi tạo canvas… 4. File cấu hình game App.ts5. Class Loader – thực thi việc tải tài nguyên hình ảnh cho game plinko export default class AppConfig {
public static APP: any = {
WIDTH: 550,
HEIGHT: 580,
TOPBUFFER: 50,
};
}File index.ts của game plinko javascript Chạy thử game demo: độ rộng của canvas game Hôm nay, chúng ta cùng nhau cài đặt P5js vào trong dự án game Plinko bằng javascript này nhé.: chiều cao của canvas game Các bạn có thể kết hợp bài viết với xem nội dung sau: Khoảng cách từ mép trên cảu canvas tới điểm thả bóng. Nói cách khác đây là tọa độ theo chiều y của nơi sẽ thả quả bóng. 5. Class Loader – thực thi việc tải tài nguyên hình ảnh cho game plinkoNhư đã thấy trong P5Wrapper, chúng ta có sử dụng file Loader để thực hiện tải các nội dung ảnh. Nội dung của file như sau: export default class Loader {
export default class Loader {
private _images: any = {
ball_black: "assets/images/ball_black.png",
ball_green: "assets/images/ball_xanh.png",
ball: "assets/images/ball1.png",
light: "assets/images/light.png",
bg: "assets/images/bg.jpg",
hole: "assets/images/hole.png",
panel: "assets/images/panel.png",
};
private static images: any = {};
private P5: any;
constructor(P5: any) {
this.P5 = P5;
}
public loadImages() {
for (const [key, value] of Object.entries(this._images)) {
let tmp = this.P5.loadImage(value);
Loader.images[key] = tmp;
}
}
public static getImage(key: any) {
return Loader.images[key];
}
}Như các bạn đã thấy trong file này. Chúng ta có 1 đối tượng định nghĩa danh sách các hình ảnh cần sử dụng. Loader có hàm tĩnh getImage để lấy image đã load ra. Tất cả hình ảnh đã tải chúng ta sẽ lưu vào 1 biến tĩnh image, việc nảy giúp việc truy vấn vào các hình ảnh đã tải 1 cách nhanh chóng hơn. Với dự án game này, số lượng tài nguyên không lớn nên được để trực tiếp trong code. Còn trên thực tế chúng ta có thể dụng các file config được gửi từ server để chuẩn bị dữ iệu trước khi khởi tạo game. File index.ts của game plinko javascriptTiếp đến chúng ta sẽ cập nhật code cho file index.ts của game plinko. Đây là file main của dự án chúng ta đang thực hiện. import * as p5 from "p5";
import P5Wrapper from "./P5Wrapper";
function makeGame() {
const tmp = function (p: any) {
let p5w = new P5Wrapper(p);
p.preload = function () {
p5w.preload();
};
p.setup = function () {
p5w.setup();
};
p.draw = function () {
p5w.draw();
};
};
return new p5(tmp);
}
makeGame();Trong này chúng ta thực hiện 1 hàm makeGame, trong đó đã wrapper lại các hàm ban đầu của P5. Và cuối cùng là gọi game makeGame, để đảm bảo chương trình chạy ngay khi trang web được tải trang. Chạy thử game demoNếu bạn đang sử visual studio code giống như Code Tu Tam, bạn có thể nhanh chóng mở termial bằng phím tắt ctrl + shift+ ` Sau khi terminal mở lên, bạn gõ lệnh sau: npm run wpw Lệnh này như đã trình bày trong bài trước, là lệnh chạy webpack giúp build ra file js cuối cùng Tiếp đến chúng ta sẽ sử dụng Live Server để xem thành quả của game Plinko javascript chúng ta đang làm nhé. Hình ảnh demo game PlinkoNhư hình ảnh demo, chúng ta đã thực hiện load được ảnh nền của game. Các bạn thấy thế nào? Thực quá đơn giản phải không? Bài tiếp theo chúng ta sẽ hiển thị 1 số thông tin debug của game, kèm theo đó là khởi tạo các đối tượng trong game plinko. Nếu có bất kì thắc mắc và cần trợ giúp hãy để lại comment để Code Tu Tam hỗ trợ bạn nhé! |
