游戏界面

纯手工打造

针对小游戏或者游戏界面嵌套层次并不复杂的情况，笔者建议直接使用代码实现，这样的好处是灵活度更高，而且我们能对界面有更好的掌握。

按钮

首先，我们来看看简单的按钮在cocos2d-js中如何实现
cocos2d-js为我们提供了4种按钮，包括：MenuItemSprite、MenuItemImage、MenuItem-Font和MenuItemLable，这些按钮都继承于MenuItem。接下来逐一讲解这些按钮都有什么作用
1、MenuItemSprite
MenuItemSprite继承了MenuItem，后者提供了最基本的按钮功能—也就是点击后的回掉处理。MenuItemSprite在MenuItem基础上增加了界面，也就是使用一个精灵或多个精灵作为按钮的界面。
具体用法：

new cc.MenuItemSprite(spriteNormal,spriteSelected,spriteDisable,clickHandler,target);

spriteNormal 表示正常态的效果spriteSelected表示按下时的效果，spriteDisable表示禁用时候的效果，clickHandler是点击的回掉函数，最后的target是作用于clickHandler的target对象。
MenuItemSprite比较灵活，除了上述的新建方式外，还可以缺省spriteDisable或target，变成

new cc.MenuItemSprite(spriteNormal,spriteSelected,spriteDisable,clickHandler);
new cc.MenuItemSprite(spriteNormal,spriteSelected,clickHandler,target);
new cc.MenuItemSprite(spriteNormal,spriteSelected,clickHandler);

这三种新建方式都是合法的，MenuItemSprite会自动识别参数的类型。
我们再看一个例子:

var MenuItemSpriteLayer = cc.Layer.extend({
ctor:function(){
   
this._super();
var spriteNormal = new cc.Sprite('res/startgame.png');
var spriteSelected = new cc.Sprite('res/startgame2.png');
var spriteDisable = new cc.Sprite('res/startgame3.png');
var menuSprite = new cc.MenuItemSprite(spriteNormal,spriteSelected,spriteDisable,this.startGame,this);
var menu = new