Javascript HTML5游戏（画布）-用户界面技术？

我正在使用PhoneGap为移动设备（Android/iPhone/WebOS）构建一个JavaScript/HTML5游戏（使用画布）。我目前正在尝试设计UI和播放板应该如何构建以及它们应该如何交互，但我不确定最好的解决方案是什么。这是我能想到的-

使用drawImage和fillText等工具将UI构建到画布中

使用常规DOM对象在画布外部构建部分UI，然后在UI元素需要与playing board画布重叠时在画布上浮动一个div

有没有其他我没有想到的技术可以用来构建游戏UI？还有，哪一种被认为是“标准”方式（我知道HTML5游戏不是很流行，所以可能还没有“标准”方式）？最后，你会推荐/使用哪种方式

非常感谢

编辑

---

我已将此问题转移到gamedev.stackoverflow.com。你可以在这里找到一个新问题：

我不认为这有一个“标准”。这在很大程度上取决于你的用户界面。我认为在大多数情况下使用DOM元素更好，因为您不需要自己构建所有UI组件、事件等。它们可以使用CSS进行样式设置，以获得所需的外观。如果这还不够，您可能需要自己构建接口元素，但是您应该确保这是真正需要的。推出您自己的解决方案可能需要大量的工作。

您可以通过一百万种方式来完成。然而，你感觉最舒服，你的工程师感觉最自信

如果您正在寻找灵感或代码示例，这里有一种方法。我有一个功能，反复绘制菜单，直到按下按钮。当按下按钮时，游戏加载，旧的菜单点击事件监听器被删除，新的游戏点击事件监听器被添加。我还结束了菜单中的旧循环，开始了一个新的游戏循环。以下是一些精选片段，让您了解如何完成：

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) {
  // ...
}

通过这种方式，我可以将游戏绘图和游戏事件与菜单绘图和菜单事件分开。这也给了我在菜单中使用游戏/动画元素的余地，如果我想让它们看起来真的漂亮的话

---

（我也在twin gamedev讨论会上发布了这个）

试试这个：

使用Visual js，您可以如下设置页面：

您将获得：

*99%画布2d

添加新对象

创建网络摄像头组件（nui或普通）

创建合并（基本-直接）

创建文本框（用于移动设备的虚拟键盘）

创建粒子

阿塔赫球员（基本动作）

多电话（联网）*

本地星光

使用visual js创建的应用程序始终在所有浏览器（移动/桌面）上运行。网络-webRTC-multipeer

请访问以下网址进行在线尝试：

Api如下所示：

Visual JS 0.5的应用程序编程接口文档>

GAME_对象是该框架中的主要对象

1) Adding new game object (name will be 'GO' ):   

HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT("GO" ,
x , y , w , h , speed )

HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT( "GO" ,
45   , 45 , 10 , 10 , 10)


// 2) Adding image or animation : 

// DRAW TYPE can be   // 'DRAW_FRAME' no animation   // 'LOOP' playing
animation  // this number '1111123123' is ID  can be any number 
//ANIMATION (  surf ,TYPE_, FrameIndex ,source , PARENT , ID , blink_
, min_ , max_ , step , speed_ , opacity_  )
HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").GAME_OBJECTS.ACCESS("GO").CREATE_ANIMATION(
SURF , "DRAW_FRAME" , 6 , RESOURCE.Tiles  , 1111123123 , "no" ,
1,11,1,1,1) 


3)Disable draging   GO.DRAG = false;

//  RESOURCE.NAMEOFFOLDERANIMATION

add folder "Tiles"  with images in folder /res/ and run node res.js   

// refresh page and you will get

RESOURCE.Tiles ready for use !   
// MAKE MODULE ACCESS EASY  var

STARTER = HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER");    

STARTER.GAME_OBJECTS.ACCESS("GO").CREATE_ANIMATION( SURF ,
"DRAW_FRAME" , 6 , RESOURCE.Tiles  , 1111123123 , "no" , 1,11,1,1,1) 


//DRAG initial value is true GO.DRAG = false;
//setup quard height  =  width  GO.POSITION.DIMENSION.H = GO.POSITION.DIMENSION.W;

4) EVENTS  FOR MOUSE AND MOBILE TOUCH HANDLED
//CLICK OR TOUCH START  GO.TAP = function(){  

//this make point directing to the game object instance   
//  this.NAME or this.ANIMATION.CURRENT_FRAME   };


GO.TOUCH_DOWN = function(){  

STARTER.DESTROY_OBJECT("GO")        console.log("THIS MUST BE TERMINATED
ON MOUSE DOWN or TOUCH_DOWN  : " + this.NAME);
//this.DESTROY_ME_AFTER_X_SECUND( 100 );    //console.log("THIS MUST BE
TERMINATED ON CLICK : " + this.NAME);      };

GO.TOUCH_MOVE = function(){  
console.log("HOVER ON OBJECT OR MOBILE TOUCH_MOVE  : " + this.NAME);   };

GO.TOUCH_UP = function(){  
console.log("MOUSE UP ON OBJECT OR MOBILE TOUCH_UP  : " + this.NAME);   };*

---

这在GameDev.StackExchange.com上可能更好。这是一个很好的观点。我都没想到，多伊！我将投票结束这个问题，并将其移至SE的gamedev部分。