Trò chơi HTML5 (Canvas) - Kỹ thuật UI?

Tôi đang trong quá trình xây dựng trò chơi JavaScript / HTML5 (sử dụng Canvas) cho thiết bị di động (Android / iPhone / WebOS) với PhoneGap. Tôi hiện đang cố gắng thiết kế cách xây dựng giao diện người dùng và bảng chơi và cách họ tương tác nhưng tôi không chắc giải pháp tốt nhất là gì. Đây là những gì tôi có thể nghĩ về -

Xây dựng giao diện người dùng ngay trên khung vẽ bằng cách sử dụng những thứ như drawImage và fillText Xây dựng các phần của giao diện người dùng bên ngoài khung vẽ bằng cách sử dụng các đối tượng DOM thông thường và sau đó nổi một div trên khung vẽ khi các thành phần UI cần chồng lên khung vẽ của bảng phát. Có bất kỳ kỹ thuật khả thi nào khác mà tôi có thể sử dụng để xây dựng giao diện người dùng trò chơi mà tôi chưa từng nghĩ đến không? Ngoài ra, cách nào trong số này sẽ được coi là cách "tiêu chuẩn" (Tôi biết các trò chơi HTML5 không phổ biến lắm nên có lẽ vẫn chưa có cách "chuẩn")? Và cuối cùng, bạn muốn giới thiệu / sử dụng cách nào?

Rất cám ơn trước!

Cả hai giải pháp (vẽ trên vải của bạn VS. HTML / CSS truyền thống) đều hoàn toàn hợp lệ và sẽ hoạt động tốt. Một số điều cần xem xét:

• Nếu bạn đã sử dụng thư viện dựa trên canvas, mã của bạn có thể sạch hơn / có tổ chức hơn bằng cách tiếp tục sử dụng canvas thay vì có các phương thức bổ sung (dựa trên DOM) cho UI.
• Nếu giao diện người dùng của bạn quá nặng văn bản (có hộp thoại, v.v.) thì việc thực hiện thông qua HTML / CSS có thể đơn giản hơn. Chẳng hạn, việc văn bản chuyển thành phần tử DOM khá đơn giản (với các nội dung như gói và khoảng cách đoạn) và tương đối khó thực hiện trong canvas.
• Tùy thuộc nhiều vào thư viện bạn đang sử dụng, việc triển khai xử lý nhấp chuột trên các thành phần DOM có thể dễ dàng hơn nhiều so với trong khung vẽ của bạn. Ví dụ: nếu bạn muốn phát hiện một nhấp chuột vào nút "Ok", đó là một nhiệm vụ tầm thường trong thế giới HTML / JS. Nhưng trong khung vẽ, bạn cần lắng nghe nhấp chuột vào một yếu tố khác và kiểm tra tọa độ của nó để xem nơi nhấp chuột diễn ra.
• Một số tác nhân người dùng (đặc biệt là thiết bị di động) có thể gặp khó khăn khi sử dụng các thành phần DOM có chứa văn bản. Ví dụ: Mobile Safari có thể muốn bật lên một phương thức với các công cụ để sao chép / dán. Ngăn chặn hành vi này có thể khó khăn và có lẽ sẽ dễ dàng hơn trong đất vải.

Một số điều này sẽ chủ quan; một nhà phát triển mà tôi biết luôn thích sử dụng canvas vì anh ta chỉ thấy DOM là xấu và dài dòng. Vì một trong hai giải pháp sẽ hoạt động tốt, tôi chọn một màn hình đơn giản trong ứng dụng của mình, nhanh chóng phát triển riêng nó bằng cả hai phương pháp và xem cái nào cảm thấy dễ dàng / tốt hơn.

May mắn nhất!

Tôi đã sử dụng Easeljs cho tương tác canvas của tôi.

Nó khá tốt và tạo điều kiện cho thiết kế vững chắc. Một trong những tính năng chính khiến tôi chọn nó là cơ sở để đồng bộ vị trí của các đối tượng canvas và các yếu tố dom.

Điều này giúp dễ dàng thực hiện các bong bóng truyền CSS và các thành phần UI tĩnh như khung hud và loại điều đó.

Ưu điểm này mang lại cho các trình duyệt là bạn có được khung vẽ phong phú nhưng bạn có thể xử lý những thứ nhỏ hơn và tĩnh hơn cho dom để kiểm tra hiệu suất.

Canvas chạy chậm trên nền tảng di động, ít nhất là safari di động dù sao đi nữa, vì vậy bạn sẽ muốn sử dụng định vị CSS dựa trên các đối tượng trên đó. Cụ thể sử dụng "translate3d" sẽ bật kết xuất đồ họa tăng tốc phần cứng của các đối tượng.

Tuy nhiên, hãy kiểm tra thư viện CAAT để biết canvas, nó rất nhanh và bạn có thể sử dụng các "diễn viên" được hỗ trợ CSS và không thay đổi logic trò chơi.

Tôi chưa thể đăng liên kết nhưng đây là một số liên kết giả http://labs.hyperandroid.com/animation

Phải đồng ý về sự chậm chạp của canvas trên iPhone 4. Khá chắc chắn rằng canvas safari không được GL hỗ trợ. Trò chơi táo bạo của tôi chạy nhanh trên iPhone 3GS và Android nhưng trên iPhone 4 tôi nghĩ màn hình retina có quá nhiều pixel hoặc nếu canvas không chạy trên GL, điều này sẽ giải thích tại sao nó kéo. Tôi thích mô hình phát triển canvas, chưa thử tùy chọn css translate3d. Cụ thể, tôi đã sử dụng GWT và trình bao bọc canvas gwt-g2d (tối ưu hóa / obfuscation). http://www.photonjunky.com/shootout.html

Tôi sẽ đề nghị giữ các điều khiển của bạn dưới dạng các phần tử html như menu và commandvì lý do truy cập. Sử dụng một chút CSS, bạn có thể hiển thị các thành phần trên khung vẽ và không mất đi chức năng dựng sẵn của HTML.

Tôi biết đây là một câu hỏi cũ, nhưng hôm nay (tháng 3 năm 2013) chúng tôi biết rõ hơn. Tôi quyết định trả lời trong trường hợp có người khác vấp ngã ở đây như tôi. Tôi phải không đồng ý với hầu hết các câu trả lời khác. Chúng có thể hợp lệ để phát triển trình duyệt web, nhưng không dành cho thiết bị di động. Nó tạo ra sự khác biệt lớn mà bạn chọn đường dẫn (DOM hoặc hoạt hình canvas). Bản thân webview Android hoàn toàn vô dụng (chậm, nói lắp), điều này khiến Phonegap trở nên vô dụng đối với việc phát triển trò chơi Android, trừ khi bạn có thể áp dụng tăng tốc phần cứng, hiện chỉ có thể sử dụng hoạt hình canvas và khung phù hợp. Để biết thêm thông tin, xem trả lời này .

Bạn có thể làm điều đó một triệu cách. Tuy nhiên, bạn cảm thấy thoải mái nhất và các kỹ sư của bạn cảm thấy tự tin nhất.

Nếu bạn đang tìm cảm hứng hoặc một ví dụ về mã thì đây là một cách tôi làm. Tôi có một chức năng liên tục vẽ một menu cho đến khi nhấn nút. Khi nhấn nút, trò chơi sẽ tải và trình nghe sự kiện nhấp vào menu cũ sẽ bị xóa và trình nghe sự kiện nhấp vào trò chơi mới được thêm vào. Tôi cũng kết thúc vòng rút thăm cũ của menu và bắt đầu một vòng rút thăm trò chơi mới. Dưới đây là một số đoạn được chọn để cung cấp cho bạn ý tưởng về cách thực hiện:

Game.prototype.loadMenu = function() {
  var game = this;
  var can = this.canvas;

  // now we can use the mouse for the menu
  can.addEventListener('click', game.menuClickEvent, false);
  can.addEventListener('touchstart', game.menuClickEvent, false);

  // draw menu
  this.loop = setInterval(function() { game.drawMenu() }, 30);
};

Game.prototype.drawMenu = function() {
  // ... draw the menu
}

Game.prototype.loadLevel = function(levelstring) {
  // unload menu
  var can = this.canvas;
  var game = this;
  can.removeEventListener('click', game.menuClickEvent, false);
  can.removeEventListener('touchstart', game.menuClickEvent, false);

  if (this.loop) clearInterval(this.loop);

  // ... other level init stuff


  // now we can press keys for the game
  //can.addEventListener('click', game.gameClickEvent, false);
  can.addEventListener('touchstart', game.gameClickEvent, false);
  can.addEventListener('keydown', game.gameKeyDownEvent, false);

  this.loop = setInterval(function() { game.tick() }, 30);
}

// called from tick()
Game.prototype.draw = function(advanceFrame) {
  // ...
}

Bằng cách này, tôi có thể tách các sự kiện vẽ và sự kiện trò chơi khỏi bản vẽ menu và các sự kiện menu. Nó cũng cho tôi sự chậm trễ để sử dụng các yếu tố trò chơi / hoạt hình trong menu của mình nếu tôi muốn làm cho chúng trông thật đẹp.