【代码分享】简单html5足球射门游戏分享

之前空余时间想玩玩html5, 于是使用2.2.2的cocos2d-html5 制作了个简单的足球射门游戏 ，美术是自己在纸上画完用手机拍下再ps扣的图，哈哈，赞一下自己的创意。

在我的主页可以玩这个游戏： http://www.jd85.net/ballfoot/

很简单的几个类，就不在这里讲解了。附件里有完整项目源码和cocostudio项目可在本人发布在cocoachina论坛里的帖子内下载: http://www.cocoachina.com/bbs/read.php?tid=213943

补上代码：

cocos2d.js中部分需要修改代码：

var c = {
        COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug
        box2d:false,
        chipmunk:false,
        showFPS:false,
        frameRate:60,
        loadExtension:false,
        renderMode:0,       //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
        tag:'gameCanvas', //the dom element to run cocos2d on
//        engineDir:'../cocos2d/',
        SingleEngineFile:'Cocos2d-html5-v2.2.2.min.js',
        appFiles:[
            'src/resource.js',
//            'src/myApp.js'//add your own files in order here
            'src/GameScene.js',
            'src/StartLayer.js',
            'src/GameLayer.js',
            'src/GameOverLayer.js',
 
            'libs/CCNotificationCenter.js',
            'libs/MD5.js'
        ]
    };

StartLayer.js:

/**
 * Created by JiaDing on 14-4-19.
 */
var StartLayer = cc.Layer.extend({
 
    init:function()
    {
        if(this._super())
        {
 
 
 
            return true;
        }
        return false;
    },
 
    onEnter:function()
    {
        this._super();
        var uiLayer = ccs.UILayer.create();
        this.addChild(uiLayer);
 
        var widget = ccs.GUIReader.getInstance().widgetFromJsonFile(s_exportJson_StartPanel);
        widget.setPositionX(widget.getPositionX() + 100);
        uiLayer.addWidget(widget);
 
        var titleAction = ccs.ActionManager.getInstance().getActionByName("StartPanel.ExportJson","Animation0");
        if(titleAction)
        {
            titleAction.play();
        }
 
        var startBtn = uiLayer.getWidgetByName("Button_25");
        startBtn.addTouchEventListener(function(object,touchType){
 
            if(touchType == cc.TOUCH_ENDED)
            {
                cc.AudioEngine.getInstance().playEffect(s_sound_btn,false);
                cc.NotificationCenter.getInstance().postNotification("changeToGameLayer");
            }
 
        }.bind(this) ,this);
    },
 
 
    onExit:function()
    {
 
 
        this._super();
    }
 
 
 
 
 
});
 
StartLayer.create = function()
{
    var obj = new StartLayer();
    if(obj && obj.init())
    {
        return obj;
    }
    return null;
}

resource.js:

var s_pic_bg = "res/bg.png";
var s_pic_dashBoard = "res/dashBoard.png";
var s_pic_arrow = "res/arrow.png";
//var s_pic_transitbg = "res/transitbg.png";
var s_pic_transitbg = "res/transitbg.png";
var s_pic_door = "res/door.png";
 
var s_sound_win = "res/win.mp3";
var s_sound_lose = "res/lose.mp3";
var s_sound_kick = "res/kick.mp3";
var s_sound_btn = "res/btn.mp3";
var s_sound_bg = "res/bg.mp3";
 
var s_exportJson_FootMan = "res/FootMan/FootMan.ExportJson";
var s_plist_FootMan = "res/FootMan/FootMan0.plist";
var s_pic_FootMan = "res/FootMan/FootMan0.png";
 
var s_exportJson_LosePanel = "res/Panel/LosePanel.ExportJson";
var s_exportJson_StartPanel = "res/Panel/StartPanel.ExportJson";
var s_exportJson_WinPanel = "res/Panel/WinPanel.ExportJson";
var s_plist_Panel = "res/Panel/Panel0.plist";
var s_pic_Panel = "res/Panel/Panel0.png";
 
var s_exportJson_RoundBall = "res/RoundBall/RoundBall.ExportJson";
var s_plist_RoundBall = "res/RoundBall/RoundBall0.plist";
var s_pic_RoundBall = "res/RoundBall/RoundBall0.png";
 
var g_resources = [
    //image
    {src:s_pic_bg},
    {src:s_pic_dashBoard},
    {src:s_pic_arrow},
    {src:s_pic_transitbg},
    {src:s_pic_door},
 
    {src:s_sound_win},
    {src:s_sound_lose},
    {src:s_sound_kick},
    {src:s_sound_btn},
    {src:s_sound_bg},
 
    {src:s_exportJson_FootMan},
    {src:s_plist_FootMan},
    {src:s_pic_FootMan},
 
    {src:s_exportJson_LosePanel},
    {src:s_exportJson_StartPanel},
    {src:s_exportJson_WinPanel},
    {src:s_plist_Panel},
    {src:s_pic_Panel},
    {src:s_exportJson_RoundBall},
    {src:s_plist_RoundBall},
    {src:s_pic_RoundBall}
 
    //plist
 
    //fnt
 
    //tmx
 
    //bgm
 
    //effect
 
];

GameScene.js:

/**
 * Created by JiaDing on 14-4-19.
 */
 
var GameScene = cc.Scene.extend({
 
    TAG_CurrentView:1,
 
   onEnter:function()
   {
       this._super();
 
       var winSize = cc.Director.getInstance().getWinSize();
       var w = winSize.width;
       var h = winSize.height;
       var bg = cc.Sprite.create(s_pic_bg);
       bg.setAnchorPoint(0,0);
       this.addChild(bg,0);
 
       var startLayer = StartLayer.create();
       this.addChild(startLayer,1,this.TAG_CurrentView);
 
 
       cc.AudioEngine.getInstance().preloadSound(s_sound_bg);
       cc.AudioEngine.getInstance().preloadSound(s_sound_btn);
       cc.AudioEngine.getInstance().preloadSound(s_sound_kick);
       cc.AudioEngine.getInstance().preloadSound(s_sound_lose);
       cc.AudioEngine.getInstance().preloadSound(s_sound_win);
 
       cc.AudioEngine.getInstance().playMusic(s_sound_bg,true);
 
       cc.NotificationCenter.getInstance().addObserver(this,this.changeToGameLayer,"changeToGameLayer");
       cc.NotificationCenter.getInstance().addObserver(this,this.gameOver,"gameOver");
 
   },
    changeToGameLayer:function()
    {
        this.removeChildByTag(this.TAG_CurrentView,true);
 
        var gameLayer = GameLayer.create();
        this.addChild(gameLayer,1,this.TAG_CurrentView);
    },
    gameOver:function(isWin)
    {
        this.removeChildByTag(this.TAG_CurrentView,true);
        var overLayer = GameOverLayer.create(isWin);
        this.addChild(overLayer,1,this.TAG_CurrentView);
    }
 
});

GameOverLayer.js:

/**
 * Created by JiaDing on 14-4-20.
 */
 
var GameOverLayer = cc.Layer.extend({
 
    isWin:false,
 
    init:function(isWin)
    {
        if(this._super())
        {
            this.isWin = isWin;
 
            return true;
        }
        return false;
    },
 
    onEnter:function()
    {
        this._super();
        var uiLayer = ccs.UILayer.create();
        this.addChild(uiLayer);
 
        if(this.isWin)
        {
            cc.AudioEngine.getInstance().playEffect(s_sound_win,false);
 
            var widget = ccs.GUIReader.getInstance().widgetFromJsonFile(s_exportJson_WinPanel);
            widget.setPositionX(widget.getPositionX() + 100);
            uiLayer.addWidget(widget);
 
            var titleAction = ccs.ActionManager.getInstance().getActionByName("WinPanel.ExportJson","QiuJInLe");
            if(titleAction)
            {
                titleAction.play();
            }
 
            var startBtn = uiLayer.getWidgetByName("Button_35");
            startBtn.addTouchEventListener(function(object,touchType){
 
                if(touchType == cc.TOUCH_ENDED)
                {
                    cc.AudioEngine.getInstance().playEffect(s_sound_btn,false);
                    cc.NotificationCenter.getInstance().postNotification("changeToGameLayer");
                }
 
            }.bind(this) ,this);
        }
        else
        {
 
            cc.AudioEngine.getInstance().playEffect(s_sound_lose,false);
 
            var widget = ccs.GUIReader.getInstance().widgetFromJsonFile(s_exportJson_LosePanel);
            widget.setPositionX(widget.getPositionX() + 100);
            uiLayer.addWidget(widget);
 
            var titleAction = ccs.ActionManager.getInstance().getActionByName("LosePanel.ExportJson","Animation0");
            if(titleAction)
            {
                titleAction.play();
            }
 
            var startBtn = uiLayer.getWidgetByName("Button_35_Copy0");
            startBtn.addTouchEventListener(function(object,touchType){
 
                if(touchType == cc.TOUCH_ENDED)
                {
                    cc.AudioEngine.getInstance().playEffect(s_sound_btn,false);
                    cc.NotificationCenter.getInstance().postNotification("changeToGameLayer");
                }
 
            }.bind(this) ,this);
        }
 
    },
 
 
    onExit:function()
    {
 
 
        this._super();
    }
 
 
 
 
 
});
 
GameOverLayer.create = function(isWin)
{
    var obj = new GameOverLayer(isWin);
    if(obj && obj.init(isWin))
    {
        return obj;
    }
    return null;
}

GameLayer.js:

/**
 * Created by JiaDing on 14-4-20.
 */
 
var GameLayer = cc.Layer.extend({
 
    TAG_MAN:1,
    TAG_Ball:2,
    TAG_DashBoard:3,
    TAG_DOOR:4,
 
    havePcMouseDown:false,
    rotationSpeed:11,
 
    MIN_ROTATION: - 135,
    MAX_ROTATION: -45,
 
    init:function()
    {
        if(this._super())
        {
 
            var winSize = cc.Director.getInstance().getWinSize();
 
            var door = cc.Sprite.create(s_pic_door);
            var scale = 0.7;
            door.setScale(scale);
            door.setAnchorPoint(cc.p(0,1));
            door.setPosition(cc.p((winSize.width + 30 - door.getContentSize().width * scale)/2,
                winSize.height-150));
            this.addChild(door);
            door.setTag(this.TAG_DOOR);
 
            var dashBoardBg = cc.Sprite.create(s_pic_dashBoard);
            dashBoardBg.setAnchorPoint(cc.p(0.5,0));
            dashBoardBg.setScale(0.7);
            dashBoardBg.setPosition(cc.p(winSize.width - dashBoardBg.getContentSize().width * dashBoardBg.getScale()/2,dashBoardBg.getContentSize().height / 2 + 300));
            this.addChild(dashBoardBg);
            dashBoardBg.setTag(this.TAG_DashBoard);
 
            var arrow = cc.Sprite.create(s_pic_arrow);
            arrow.setAnchorPoint(cc.p(0,0.5));
            arrow.setScale(0.55);
            arrow.setPositionX(dashBoardBg.getContentSize().width/2);
            arrow.setRotation(-90);
            dashBoardBg.addChild(arrow);
            arrow.setTag(1);
 
            ccs.ArmatureDataManager.getInstance().addArmatureFileInfo(s_exportJson_FootMan);
            ccs.ArmatureDataManager.getInstance().addArmatureFileInfo(s_exportJson_RoundBall);
 
            var man = ccs.Armature.create("FootMan");
            man.setAnchorPoint(cc.p(0,0));
            man.setPosition(cc.p(100,20));
            this.addChild(man);
            man.setTag(this.TAG_MAN);
 
            var ball= ccs.Armature.create("RoundBall");
            ball.setScale(0.6);
            ball.setPosition(cc.p(winSize.width/2,200));
            this.addChild(ball);
            ball.setTag(this.TAG_Ball);
 
 
            var label = cc.LabelTTF.create("你认为我会告诉你鼠标按着不动瞄准,
松开射门这句话么？","Microsoft Yahei Font",25);
            label.setPosition(cc.p(winSize.width/2,70));
            label.setColor(cc.c3b(255,0,0));
            this.addChild(label);
 
            if( 'touches' in sys.capabilities )
                this.setTouchEnabled(true);
            else if ('mouse' in sys.capabilities )
                this.setMouseEnabled(true);
 
 
 
 
 
            return true;
        }
        return false;
    },
 
    touchenable:true,
    haveMobileTouch:false,
 
    onTouchesBegan:function()
    {
        if(!this.touchenable)
        {
            this.haveMobileTouch = false;
            return false;
        }
        this.touchenable = false;
        this.haveMobileTouch = true;
        this.ready();
        return true;
    },
    onMouseDown:function (event)
    {
        if(!this.touchenable)
        {
            this.havePcMouseDown = false;
            return;
        }
        this.touchenable = false;
        this.havePcMouseDown = true;
        this.ready();
    },
 
    onTouchesEnded:function()
    {
        if(this.haveMobileTouch)
        {
            this.run();
        }
    },
    onMouseUp:function()
    {
 
        if(this.havePcMouseDown)
        {
            this.run();
        }
    },
 
 
    ready:function()
    {
        this.schedule(this.update,0.016);
    },
    update:function()
    {
        var arrow = this.getChildByTag(this.TAG_DashBoard).getChildByTag(1);
        var rot = arrow.getRotation();
        if(rot <= -135 || rot >= -45)
        {
            this.rotationSpeed = this.rotationSpeed * -1;
        }
        arrow.setRotation(rot + this.rotationSpeed);
    },
    run:function()
    {
        this.unschedule(this.update);
 
        var man = this.getChildByTag(this.TAG_MAN);
        man.getAnimation().playWithIndex(0);
 
        var action = cc.Sequence.create(
            cc.MoveBy.create(2,cc.p(150,50)),
            cc.DelayTime.create(0.3),
            cc.CallFunc.create(function(){
                this.kick();
            }.bind(this),this)
        );
        man.runAction(action);
    },
    kick:function()
    {
        var man = this.getChildByTag(this.TAG_MAN);
        man.getAnimation().playWithIndex(1);
        man.getAnimation().setMovementEventCallFunc(function(armature, movementType, movementID){
            if (movementType == ccs.MovementEventType.complete)
            {
                cc.AudioEngine.getInstance().playEffect(s_sound_kick,false);
 
                var ball = this.getChildByTag(this.TAG_Ball);
                ball.getAnimation().playWithIndex(0);
 
                var arrow = this.getChildByTag(this.TAG_DashBoard).getChildByTag(1);
                var rotation = arrow.getRotation();
                var door = this.getChildByTag(this.TAG_DOOR);
                var doorWidth = door.getContentSize().width * door.getScale();
                var doorHeight = door.getContentSize().height * door.getScale();
 
                var doorLeftX = door.getPositionX();
                var doorRightX = door.getPositionX() + doorWidth;
 
                var minX = doorLeftX - 300;
                var maxX = doorRightX + 300;
                var targetX = (rotation + (this.MIN_ROTATION * -1)) / (this.MAX_ROTATION + (this.MIN_ROTATION * -1)) * (maxX - minX) + minX;
 
                var action = cc.Sequence.create(
                    cc.MoveTo.create(1,cc.p(targetX,door.getPositionY() - doorHeight + 30)),
                    cc.CallFunc.create(function(){
                        var win = false;
                        if(targetX > doorLeftX && targetX < doorRightX)
                        {
                            win = true;
                        }
                        this.gameOVer(win);
                    }.bind(this),this)
                );
                ball.runAction(action);
            }
        }.bind(this),this);
 
    },
    gameOVer:function(isWin)
    {
        cc.NotificationCenter.getInstance().postNotification("gameOver",isWin);
    }
 
});
 
GameLayer.create = function()
{
    var obj = new GameLayer();
    if(obj && obj.init())
    {
        return obj;
    }
    return null;
};