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

Cocos2d-x JavaScript
#1

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

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

很简单的几个类，就不在这里讲解了。附件里有完整项目源码和cocostudio项目可以下载.

补上代码：

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("你认为我会告诉你鼠标按着不动瞄准,\n松开射门这句话么？","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;
};


```
2赞
#2

纯纸张拼图哦，间接

#3

感谢楼主分享 如果能贴上图和代码 那就更好了

#4

代码在附件里呀 ，直接下载就是咯

#5

是的，纯手工哟

#6

我想问下你是如何放到网址里让别人玩的！！！

#7

需要部署在自己的服务器上。最简单的方式是可以在github上生成一个页面，别人就能访问到游戏了。

不过github的访问速度不是很快。

#8

为什么用手机浏览器打开就卡在了loading0%上

#9

有源码呀，可惜是2.2的，最新的引擎都到3.0了

#10

我试过手机也是可以玩的呀 只要你的手机支持html5

#11

222222as大三大四的

#12

真心赞！而且手绘剪纸简直屌爆了！

#13

玩不了 啊，我是ios系统的啊

#14

看看，学习下

#15

不能在线玩了哦

#16

看看，学习学习