Game Dzut Angry Bird | Xử lý cử chỉ trên trang web với HammerJS – YIL 3/2/2020

Nội dung hôm nay chủ yếu xoay quanh việc làm con game Dzut Angry Bird 😀

1. Game Dzut Angry Bird

Cuối tuần rảnh rỗi làm con game nho nhỏ lấy ý tưởng từ Dzut Cô Hồn của Tiki hằng năm, mọi người chơi và cho ý kiến tại đây nhé https://dzut-angry-bird.nddapp.com/

Game Dzut Angry Bird

2. Xử lý cử chỉ trên trang web với HammerJS

Khi làm game Dzut Angry Bird thì cần phải xử lý được sự kiện người dùng ấn vào màn hình rồi kéo, mình có dùng thư viện HammerJS để xử lý. HammerJS là thư viện cung cấp các API cho các hành động tương tác của người dùng với trang web (đặc biệc là thao tác cảm ứng) như là: vuốt, quay, nhấn, nhấn giữ,… Tham khảo thêm tại https://hammerjs.github.io/

3. Làm rối mã nguồn khi build với Webpack

Game Dzut Angry Bird mình dùng VueJS và build bằng Webpack. Mặc dù khi build bằng Webpack thì output đã khá là khó đọc rồi nhưng để tăng phần khó đọc thì mình có dùng thêm Plugin là Webpack Obfuscate để mã nguồn khó đọc hơn nữa. Game mà, mã nguồn càng khó đọc càng tốt 😀

4. Mã hóa dữ liệu trên Client side với Simple Crypto JS

Phần game Dzut Angry Bird có mục High Score, phần này mình lưu ở localStorage. Để tránh “tin tặc nghiệp dư” sửa High Score thì mình có dùng Simple Crypto JS để mã hóa điểm số trước khi lưu vào localStorage.