Bài 12: Trò chơi rượt bắt – Tự học lập trình Flash

Bài 12 : Trò chơi “rượt bắt” – Tự học lập trình Flash Với những điều đã biết về Flash, bạn có thể bắt tay vào việc thực hiện trò chơi “rượt bắt” đơn giản: một con vật gì đó rượt theo bạn, nói cho đúng là rượt theo con trỏ chuột do bạn điều khiển. Có thể hình dung con trỏ chuột đang di chuyển… dưới nước và một con cá “hung dữ” đang đuổi theo. Trước hết, bạn mở cửa sổ Flash, bắt đầu với tập tin mới trống trơn. Bạn cần vẽ một hình tròn tượng trưng cho con cá (tưởng tượng đó là… cá nóc). Khi chương trình đã chạy tốt, ta sẽ vẽ con cá một cách tỉ mỉ. Để vẽ hình tròn, bạn đã biết rằng cần dùng công cụ Oval Tool và giữ phím Shift khi vẽ trên sân khấu. Xong, bạn bấm vào công cụ chọn Selection Tool , căng khung chọn bao quanh hình tròn vừa vẽ, chuẩn bị chọn màu tô (fill color) và màu nét (stroke color). Ở hộp công cụ phía trái cửa sổ Flash, bạn chú ý phần Colors có hai ô màu. Bạn bấm vào ô màu trên, chọn màu nét trong bảng màu vừa hiện ra. Tương tự, bạn bấm vào ô màu dưới, chọn màu tô. Bạn nên chọn màu nét đen và màu tô sáng (màu cam chẳng hạn) cho dễ thấy ―con cá‖ của mình. Để hình tròn trở thành nhân vật, bạn gõ phím F8. Khi thấy hộp thoại Convert to Symbol, bạn gõ Fish để đặt tên cho nhân vật và gõ Enter. Từ đây, hình tròn đang hiện diện trên sân khấu là một thể hiện của nhân vật Fish. Để lập trinh cho con cá, bạn gõ phím F9 để mở cửa sổ Actions – Movie Clip (hình 1). Vì thể hiện của nhân vật Fish đang ở tình trạng ―được chọn‖, những gì bạn sắp ghi vào cửa sổ Actions – Movie Clip sẽ quy định hành vi của thể hiện. Bạn đã biết rằng khi muốn diễn đạt hành vi của thể hiện, ta phải viết các hàm xử lý tình huống. Bạn viết hai hàm xử lý tình huống như sau để làm cho con cá biết đuổi theo con trỏ chuột: 1 onClipEvent(load) { 2 3 step = 5; 4 5 } 6 7 onClipEvent(enterFrame) { 8 9 if(_x + step < _root._xmouse) 10 11 _x += step; 12 13 else if(_x - step > _root._xmouse) 14 15 _x -= step; 16 17 } Trong hàm onClipEvent(load), ta tạo ra biến step và gán trị cụ thể cho nó. Biến step xác định bước dịch chuyển của cá. Trị của biến step càng lớn, cá dịch chuyển càng nhanh. Hàm onClipEvent(enterFrame) được gọi mỗi khi Flash hiển thị một khung. Hiện thời, bạn chỉ có một khung nhưng vì Flash hiển thị khung đó lặp đi lặp lại vào lúc chạy, hàm onClipEvent(enterFrame) vẫn sẽ được gọi liên tục. Trong hàm onClipEvent(enterFrame), để biết cá có nên đi tới hay không (có nên gia tăng hoành độ _x của cá hay không), ta lấy hoành độ _x của cá cộng với step và so sánh kết quả với hoành độ của con trỏ chuột (tức _root._xmouse). Nếu kết quả của phép cộng ấy vẫn còn nhỏ hơn hoành độ của con trỏ chuột (điều kiện _x + step < _root._xmouse được thỏa), ta cho hoành độ _x của cá tăng thêm một bước: x += step; . Nếu kết quả lớn hơn hoành độ của con trỏ chuột, rõ ràng không nên đi tới và cần tiếp tục xét xem có nên đi lui hay không. Để biết có nên cho cá đi lui hay không, ta lấy hoành độ _x trừ đi step và so sánh kết quả của phép trừ đó với hoành độ của con trỏ chuột. Nếu kết quả vẫn còn lớn hơn hoành độ của con trỏ chuột, nên cho cá đi lui bằng cách giảm hoành độ _x một bước: x -= step;. Ngoài các trường hợp đã xét, hoành độ _x sẽ được giữ nguyên, tức là cá đứng yên. Có lẽ bạn hơi ngờ ngợ về cách viết hàm onClipEvent(enterFrame). Dường như phải dùng các cặp dấu gộp {} như sau mới đúng cú pháp của câu lệnh điều kiện: 1 onClipEvent(enterFrame) { 2 3 if(_x + step < _root._xmouse) { 4 5 _x += step; 6 7 } 8 9 else if(_x - step > _root._xmouse) { 10 11 _x -= step; 12 13 } 14 15 } Thực ra, nếu phần diễn đạt việc cần làm khi điều kiện được thỏa chỉ có một câu lệnh, ngôn ngữ ActionScript cho phép ta viết câu lệnh ấy theo sau điều kiện, không cần đặt trong cặp dấu gộp. Thử chạy chương trình, bạn sẽ thấy không có lỗi biên dịch. Bạn đưa con trỏ chuột qua trái (hoặc phải), cá cũng bơi qua trái (hoặc phải). Cá chưa biết bơi lên, bơi xuống để ―bắt dính‖ con trỏ chuột vì ta chưa ―huấn luyện‖ cho cá làm điều đó. Để cá biết rằng nên bơi lên hoặc xuống khi nào, trong hàm onClipEvent(enterFrame), bạn cần xét đến tung độ _y của cá và tung độ của con trỏ chuột _root._ymouse theo cách thức tương tự như đã làm đối với hoành độ. Trở lại với chương trình, bạn viết thêm vào hàm onClipEvent(enterFrame) như sau: ? 1 onClipEvent(enterFrame) { 2 3 if(_x + step < _root._xmouse) 4 5 _x += step; 6 7 else if(_x - step > _root._xmouse) 8 9 _x -= step; 10 11 if(_y + step < _root._ymouse) 12 13 _y += step; 14 15 else if(_y - step > _root._ymouse) 16 17 _y -= step; 18 19 } Thử chạy chương trình, bạn thấy rõ cá trở nên ―khôn lanh‖ hơn hẳn.