游戏ui需要会html,HTML5游戏（画布） - UI技术？

试试这个 ：

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

Visual-JS多平台游戏引擎窗口GUI - 源代码编辑器

OnPage编辑器 - 用于设计

你会得到 ：

* 99％帆布2d

添加新对象

创建网络摄像头组件(nui或普通)

创建coallision(基本 - rect)

创建textBox(移动虚拟键盘)

创建粒子

Atach播放器(基本动作)

MultipEER(网络)*

localStarage

从视觉js创建的应用程序始终适用于所有浏览器(移动/桌面)。网络 - webRTC - multipeer

在线尝试：

https://jsfiddle.net/user/zlatnaspirala/fiddles/

Api看起来像这样：

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

GAME_OBJECT是此框架中的主要对象。

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); };*

下载git