Làm thế nào để tạo một cần điều khiển ảo cho trò chơi HTML5 của bạn - những núm vú

Nhiều trò chơi HTML5 dựa trên cảm ứng sử dụng một cơ chế điều khiển trực quan. Người dùng chạm vào màn hình để bắt đầu nhập và sau đó vuốt để cung cấp đầu vào. Lướt qua bên trái được đọc giống như di chuyển một phím điều khiển sang trái. Càng xa người dùng swipes, giá trị đầu vào càng lớn. Thư viện SimpleGame có một đối tượng điều khiển trực quan ảo giúp dễ dàng thực hiện một phím điều khiển ảo trên các thiết bị cảm ứng của bạn.

Phím điều khiển ảo hoạt động bằng cách trả về các số liệu. Thường dễ dàng nhất để hiểu cách hoạt động bằng cách nhìn vào đầu ra số trước khi ánh xạ nó vào một phần tử hình ảnh.

joystick Kiểm tra trò chơi var; var sản lượng; phím điều khiển var; chức năng init () {game = new Scene (); output = tài liệu. getElementById ("xuất"); nếu (trò chơi. Touchable) { joystick = new Joy (); } khác { cảnh báo ("Thử nghiệm này yêu cầu một giao diện cảm ứng"); } trò chơi. bắt đầu ();} // end update function init () { if (game touchable) { jx = joystick. getMouseX (); jy = phím điều khiển. getMouseY (); jdx = phím điều khiển. getDiffX (); jdy = phím điều khiển. getDiffY (); result = "phím điều khiển x:" + jx + "

"; result + = "joystick y:" + jy + "
"; result + = "joystick dx:" + jdx + "
"; result + = "phím điều khiển dy:" + jdy + "
"; đầu ra. Không có gì ở đây chưa

Phím điều khiển ảo khá dễ sử dụng:

1. Tạo một biến cho phím điều khiển.

   Bạn có thể gọi nó là joystick. Loại hấp dẫn.

2. Tạo phím điều khiển nếu có thể.

   Sử dụng trò chơi. thuộc tính cảm ứng để xác định xem có giao diện cảm ứng hay không. Nếu không, hãy gửi một tin nhắn cho người dùng.

3. Nhận vị trí con chuột.

   Khi đối tượng Joystick ảo phát hiện ra một lần chạm trên màn hình, nó sẽ kích hoạt giá trị mouseX và mouseY. Sử dụng các phương pháp getMouseX () và getMouseY () của trình điều khiển để xác định vị trí X và Y của đụng. Bằng cách này, giao diện cảm ứng hoạt động giống như con chuột truyền thống.

4. Có được một diffX và diffY đọc từ các phím điều khiển.

   Khi người dùng chạm vào màn hình, thư viện theo dõi các tọa độ của lần chạm ban đầu. Sau đó đo khoảng cách mà người dùng đã vuốt. Sự khác biệt trong X được gọi là diffX, và sự khác biệt trong Y được gọi là diffY. Sử dụng phương thức getDiffX () và getDiffY () của đối tượng điều khiển ảo để xác định có bao nhiêu điểm ảnh trong X và Y người dùng đã di chuyển kể từ khi chạm vào màn hình.

5. Hiển thị các giá trị hiện tại.

   Đối với lần vượt qua đầu tiên này, điều quan trọng là phải hiểu những gì phím điều khiển đang hiển thị, vì vậy chỉ cần lấy các giá trị và in chúng ra đầu ra trên màn hình.

Tất nhiên, điểm của một phím điều khiển ảo là di chuyển các thứ xung quanh trên màn hình.

Đây là mã:

joystick Kiểm tra trò chơi var; var ball; var joystick; chức năng init () {game = new Scene (); bóng = mới Sprite (trò chơi, "redBall. png", 50, 50); nếu như vậy thì bạn có thể sử dụng nó để chơi trò chơi này. setSpeed ​​(0); trái bóng. setPosition (400, 300); trò chơi. bắt đầu ();) / / end init update chức năng () {game. thông thoáng(); if (touchable) (quả bóng. setDX (phím điều khiển. getDiffX ()); trái bóng. setDY (phím điều khiển. getDiffY ());} // end touchable ball. update ();} // end update

Ví dụ này thậm chí còn đơn giản hơn so với cái trước.

1. Tạo một quả cầu bóng đơn giản.

   Ví dụ này, một quả bóng đơn giản được sử dụng. Tạo ra nó giống như bất kỳ sprite cơ bản khác.

2. Xây dựng một đối tượng điều khiển.

   Thực hiện một đối tượng điều khiển trực quan.

3. Bản đồ diffX của cần điều khiển và diffY tới dx và dy của quả cầu.

   Điều này cho chuyển động rất nhạy cảm, do đó bạn có thể muốn điều chỉnh độ nhạy bằng cách chia diffX và diffY bởi một số yếu tố tỷ lệ.