HTML5 игра (холст) - UI методы?

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

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

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 вы можете настроить страницу следующим образом:

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

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

вы получите :

* 99% холст 2d

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

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

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

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

создание частиц

Atach player (основное движение)

MultipEER (Сеть)*

localStarage

приложение, созданное из visual js, всегда работает во всех браузерах (мобильный / настольный). "сеть" - для WebRTC - мультипеер

попробуйте онлайн на : 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