Hướng dẫn dùng createjs JavaScript
Trong bài viết nay tôi sẽ hướng dẫn mọi người làm một game nhỏ nhỏ dùng CreateJS - một thư viện Javascript vô cùng thú vị. Mọi người có thể thử chơi game tại http://heasygame.com/games/beezaro.html. Chắc hẳn ai ai cũng biết trò chơi cờ caro, ai xếp được 5 quân của mình thẳng hàng với nhau là thắng. Trò này cũng vậy, tuy nhiên thay vì bàn cờ ô vuông 8 hướng thì tôi làm bàn cơ hình tổ ong 6 hướng, và tôi gọi trò chơi của mình là Beezaro (yeah). Create JS là gì?Bạn có thể tìm thấy tất cả những thứ có liên quan đến Create JS từ trang chủ của nó http://www.createjs.com/. Nói ngắn gọn nhất theo lời quảng cáo trên trang chủ, Create JS là một bộ thư viện Javascript bao gồm nhiều thư viện độc lập, nhưng có thể hoạt động cùng nhau để làm ra những ứng dụng HTML5 tuyệt vời. 4 thư viện hiện tại của Create JS là:
Demo thì các bạn có thể xem tại đây. Các bạn cũng có thể tìm thấy một số lượng không giới hạn các bài hướng dẫn từ cơ bản đến nâng cao trên chính trang chủ của Create JS. Cộng đồng sử dụng Create JS cũng khá lớn, gần như cần cái gì là có thể tìm ngay ra câu trả lời Với một số mục đích bí mật, tôi có nhu cầu làm một HTML5 game, tiện thể thì viết luôn hướng dẫn. Hi vọng nó sẽ có ích với các bạn quan tâm. BeezaroCác bạn có thể tham khảo source code đầy đủ trên repo github của tôi https://github.com/bs90/bs90.github.io Chuẩn bịTất cả những gì bạn cần làm là include 2 thư viện jquery và craete js vào header của file HTML.
Do game trong bài này chỉ dùng Easel JS nên các bạn chỉ cần include mỗi nó thôi cũng được. Link CDN của các thư viện thì các bạn hãy dành 5 giây google nhé. Tạo HTML canvasNội dung body chỉ vẻn vẹn như sau
(Hãy tha thứ cho việc tôi viết inline CSS) Canvas có id là Vẽ bàn thi đấu
Và đây là kết quả: Khởi tạo mạng để lưu trạng thái của gamePhần này tôi tự cho mình là khá tinh tế, hay nói các khác là khôn vặt. Thay vì dùng mảng hai chiều 15x11 để lưu thì tôi dùng mảng 23x19 để lưu. Vì sau thì hồi sau sẽ rõ. Giá trị mặc định của các phần từ là 0, tức là trạng thái không có gì, 1 nếu có nước đi của người chơi số 1, 2 nếu có nước đi của người chơi số 2 ở ô tương ứng.
Gán event cho các hình lục giác khi ấn chuột vàoỞ phần code phía trên, các bạn có thể thấy có vài phần vẫn để
Các bạn hãy dành thời gian xem code trên repo github của tôi để hiểu rõ hơn nhé. Cơ bản là đây là khi click vào một ô chưa có nước đi nào, sẽ gán nước đi tiếp theo vào ô đó Kiểm tra trạng thái kết thúc của game và vẽ đường thẳng chiến thắngPhần nay vận dụng cái "tinh tế" phía trên tôi nói. Để kiểm tra game kết thúc hay chưa tất nhiên phải kiểm tra xem đã có 5 nước đi nào của cùng 1 user thẳng 1 hàng hay chưa. Và để không phãi nghĩ đến trường hợp biên, tôi cộng vào một chiều 4 đơn vị nữa (thế mới thành 23x19) để khi cộng hay trừ đi 1 2 3 4 thì không bị lỗi =)). Việc còn lại đơn giản như sau:
Dù trông hơi vô học nhưng mà thực sự là nó vẫn chạy (tin tôi đi !). Nếu bạn có cách check nào hay hơn hãy chỉ cho tôi với (khoc) Hết rồi (tl;dr)! Chúc bạn có những giờ phút vui vẻ với Create JS! |