Javascript HTML5游戏(画布)-用户界面技术?
我正在使用PhoneGap为移动设备(Android/iPhone/WebOS)构建一个JavaScript/HTML5游戏(使用画布)。我目前正在尝试设计UI和播放板应该如何构建以及它们应该如何交互,但我不确定最好的解决方案是什么。这是我能想到的-Javascript HTML5游戏(画布)-用户界面技术?,javascript,html,mobile,canvas,Javascript,Html,Mobile,Canvas,我正在使用PhoneGap为移动设备(Android/iPhone/WebOS)构建一个JavaScript/HTML5游戏(使用画布)。我目前正在尝试设计UI和播放板应该如何构建以及它们应该如何交互,但我不确定最好的解决方案是什么。这是我能想到的- 使用drawImage和fillText等工具将UI构建到画布中 使用常规DOM对象在画布外部构建部分UI,然后在UI元素需要与playing board画布重叠时在画布上浮动一个div 有没有其他我没有想到的技术可以用来构建游戏UI?还有,哪一种
我已将此问题转移到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部分。