Lập trình trò chơi màu sắc trong Hype

• Tháng Tư 27, 2024

Trong hướng dẫn trước, chúng tôi đã nhập hình ảnh cho trò chơi tô màu cho Tác giả iBooks^R mà chúng tôi đang thực hiện trong Hype Pro. Bây giờ chúng tôi sẽ thêm các yếu tố tương tác vào trò chơi.

Mở tài liệu Hype của bạn và hãy bắt đầu.

Bước đầu tiên của chúng tôi là thêm một danh tính cho mỗi lớp cần biến mất khi nhấp vào. Điều này bao gồm các lớp nghệ thuật dòng cho cơ thể vịt, cánh và mỏ. Bằng cách gán cho mỗi lớp này một ID phần tử duy nhất, sau đó chúng ta có thể lập trình mức độ hiển thị của các lớp này bằng JavaScript.

1. Mở Thanh tra danh tính.
   
   
2. Chọn lớp duck_body_line trong Dòng thời gian chính.
   
   
3. Trong Trình kiểm tra danh tính, thêm ID phần tử duy nhất. Hãy sử dụng ID của Thân hình.
   
   
4. Chọn lớp duck_wing_line và thêm Canh làm ID phần tử duy nhất.
   
   
5. Chọn lớp duck_beak_line và thêm Mỏ làm ID phần tử duy nhất.
   
   

Bây giờ các lớp có ID phần tử duy nhất, chúng ta có thể thêm hành động cho các lớp này. Chúng tôi sẽ sử dụng JavaScript và thuộc tính Hiển thị để kiểm soát mức độ hiển thị của các lớp này. Giá trị thuộc tính Hiển thị mặc định cho hình ảnh là nội tuyến, có nghĩa là hình ảnh được hiển thị trong phần còn lại của HTML và không bắt đầu trên một dòng mới.

Để ẩn hình ảnh, chúng tôi sẽ sử dụng JavaScript để thay đổi giá trị thuộc tính hiển thị từ nội tuyến đến không ai cho mỗi lớp nghệ thuật dòng. Điều này sẽ tiết lộ các lớp điền màu dưới đây.

object.style.display = "không"

1. Mở Trình kiểm tra hành động.
   
   
2. Chọn lớp duck_body_line.
   
   
3. Trong phần Nhấp chuột (Nhấn), nhấp vào biểu tượng Plus.
   
   
4. Trong menu thả xuống Hành động, chọn Chạy JavaScript.
   
   
5. Vì đây sẽ là JavaScript tùy chỉnh, hãy đặt menu thả xuống Chức năng thành Chức năng mới. Điều này sẽ mở một cửa sổ tab mới với mã JavaScript mặc định và một hàm có tên là UntitleFunction.
   
   
6. Thay đổi tên hàm từ không có tiêu đề đến Chức năng cơ thể. Bạn sẽ thấy tên của tab thay đổi thành BodyFunction ().
   
   Tiếp theo, chúng tôi sẽ thêm mã để đặt thuộc tính hiển thị thành không ai cho Thân hình thành phần. Thêm mã sau vào dòng trống 5.
   
   hypeDocument.getEuityById ("Cơ thể"). style.display = "none";
   
   
7. Quay trở lại cửa sổ tab Chưa có tiêu đề và chọn lớp duck_wing_line.
   
   
8. Lặp lại bước trước để thay đổi tên hàm thành Cánh và thêm JavaScript sau đây.
   
   hypeDocument.getEuityById ("Cánh"). style.display = "none";
   
   
9. Chọn lớp duck_beak_line, thay đổi tên hàm thành BeakF rối và thêm JavaScript sau đây.
   
   hypeDocument.getEuityById ("Beak"). style.display = "none";
   
   Đó là nó. Hãy thử nghiệm trong Trình duyệt. Nếu mọi việc suôn sẻ, hãy xuất dự án dưới dạng tiện ích Tác giả iBooks.
   
   
10. Từ Menu, nhấp vào Tệp - Xuất dưới dạng HTML5 - Tiện ích Tác giả Bảng điều khiển / iBooks.
    
    

Video HướNg DẫN: Xe bien hinh 2 mat (Tháng Tư 2024).