HTML5 Game (Canvas) - Методы пользовательского интерфейса?

Ответ 1

Я не думаю, что для этого существует "стандарт". Это очень зависит от вашего пользовательского интерфейса. Я думаю, что использование элементов DOM лучше в большинстве случаев, так как вам не нужно самостоятельно создавать все компоненты пользовательского интерфейса, события и т.д. Они могут быть в стиле CSS для достижения желаемого внешнего вида. Если этого недостаточно, вам, вероятно, придется самостоятельно создавать элементы интерфейса, но вы должны убедиться, что это действительно необходимо. Вероятно, это огромная работа, чтобы свернуть собственное решение.

Ответ 2

Вы можете сделать это миллион способов. Однако вы чувствуете себя максимально комфортно, и ваши инженеры чувствуют себя увереннее.

Если вы ищете вдохновение или пример кода, вот один из способов, которым я это делаю. У меня есть функция, которая многократно рисует меню до нажатия кнопки. Когда кнопка нажата, игра загружается, а старые прослушиватели событий меню удаляются, и добавляются новые прослушиватели событий в игре. Я также завершаю старый цикл рисования в меню и начинаю новый цикл рисования. Здесь некоторые выделенные фрагменты, чтобы дать вам представление о том, как это делается:

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

Таким образом, я могу отделить игровой рисунок и игровые события от рисунков меню и событий меню. Это также дает мне возможность использовать элементы игры/анимации в моих меню, если я хочу, чтобы они выглядели действительно красивыми.

(Я разместил это в обсуждении близнеца гамедева)

Ответ 3

Попробуйте следующее:

С помощью Visual js вы можете настроить страницу следующим образом:

Visual-JS мультиплатформенный игровой движок Windows GUI - исходный редактор

Редактор OnPage - для дизайна

Вы получите:

* 99% холст 2d

Добавить новый объект

Создать компонент веб-камеры (nui или обычный)

Создать coallision (basic-rect)

Создать текстовый блок (виртуальная клавиатура для мобильных устройств)

Создать частицу

Игрок Atach (базовое движение)

MultipEER (Networking) *

localStarage

Приложение, созданное из visual js, всегда работает на всех браузерах (мобильных/настольных). Networking - 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