I'm currently looking for a simple and basic start screen for a game using javascript, so basically its the first function that is called and then press play which then goes into the game.

Looked online and they all seem to be advanced ones and can't seem to find any tutorials either.

  • \$\begingroup\$ When making a game, you should start with some core logic, not with menu. \$\endgroup\$ Commented Mar 8, 2013 at 14:32
  • \$\begingroup\$ I've already created the game, the next stage is the menu \$\endgroup\$
    – Nick
    Commented Mar 8, 2013 at 14:33
  • \$\begingroup\$ if you used some framework, can't you make menu in that framework? \$\endgroup\$ Commented Mar 8, 2013 at 15:52
  • \$\begingroup\$ Does your game have a state machine for main state? Something that checks if you are moving in map, selecting item in inventory, in a battle, and adjust the inputs, drawing and behavior accordingly. If that's the case, the main menu should be another state. Can you link your game? \$\endgroup\$
    – eri0o
    Commented Sep 28, 2015 at 2:11

2 Answers 2


Menus and other non-gameplay related UI are actually much easier to create when they are driven by the same visualization code used in your gameplay. In the same way you display animate your game objects, you should be able animate your UI buttons and menus as well.

Think of a menu button as a game object with a different sprite. When polishing your game you'll be happy to have the ability to easily tween, scale and fade in/out your UI elements.

Since you don't mention a framework (such as ImpactJS or Crafty, for example) I'm assuming that you've got something home grown. If that's the case you may not have such generic ways to visualize game elements. While you can brute force through creating menus and title screens which do not share the same visualization code as your core game, you'll end up with something much less maintainable and extensible.

Because you're using HTML5 it's also an option to create your menu code using HTML DOM and CSS. While much of the animating and layout of menus will be easy with some CSS transitions, it's still (in my opinion) an inferior option to having your canvas framework be generic and flexible enough to easily create and animate any kind of game object.


I'm guessing your using plain Javascript with no engine. You could just hold off drawing your objects to the screen. If you put all of your game objects in a function then you could hold of rendering them until someone click continue. After that condition is met then the render of all your object can happen. There you go. A nice simple start menu. Was this helpful? If you want a example in code then I might be able to do that for you


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .