注册 登录
主题 : 【代码分享】简单html5足球射门游戏分享
级别: 新手上路
状态: 连续签到 - [1天]
UID: 254984
精华: 0
发帖: 9
可可豆: 28 CB
威望: 29 点
在线时间: 13(时)
注册时间: 2012-09-24
最后登录: 2015-04-08
0 楼:  发表于: 2014-07-12 16:37    发自: Web Page
来源于 教程分享 分类

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

管理提醒: 本帖被 superdragon 执行加亮操作(2014-09-05)
之前空余时间想玩玩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;
};

[ 此帖被superdragon在2014-09-01 14:24重新编辑 ]

附件: FootBallByJD.zip (7248 K) 下载次数:572
级别: 新手上路
UID: 326456
精华: 0
发帖: 5
可可豆: 5 CB
威望: 5 点
在线时间: 38(时)
注册时间: 2014-06-14
最后登录: 2018-02-04
1 楼:  发表于: 2014-07-15 17:59    发自: Web Page
纯纸张拼图哦,间接
级别: 侠客
UID: 291647
精华: 3
发帖: 98
可可豆: 294 CB
威望: 269 点
在线时间: 183(时)
注册时间: 2014-02-11
最后登录: 2014-12-11
2 楼:  发表于: 2014-07-16 13:57    发自: Web Page
感谢楼主分享 如果能贴上图和代码 那就更好了
CocosEditor
级别: 新手上路
UID: 184155
精华: 0
发帖: 23
可可豆: 58 CB
威望: 59 点
在线时间: 39(时)
注册时间: 2012-12-05
最后登录: 2018-04-17
3 楼:  发表于: 2014-07-22 14:18    发自: Web Page
回 2楼(touchsnow) 的帖子
代码在附件里呀 ,直接下载就是咯
级别: 新手上路
状态: 连续签到 - [1天]
UID: 254984
精华: 0
发帖: 9
可可豆: 28 CB
威望: 29 点
在线时间: 13(时)
注册时间: 2012-09-24
最后登录: 2015-04-08
4 楼:  发表于: 2014-07-22 14:19    发自: Web Page
回 1楼(wangyungang) 的帖子
是的,纯手工哟
级别: *
UID: 241649
精华: *
发帖: *
可可豆: * CB
威望: * 点
在线时间: (时)
注册时间: *
最后登录: *
5 楼:  发表于: 2014-08-21 18:41    发自: Web Page
我想问下你是如何放到网址里让别人玩的!!!
级别: 版主
UID: 137577
精华: 0
发帖: 196
可可豆: 205 CB
威望: 205 点
在线时间: 121(时)
注册时间: 2012-04-19
最后登录: 2018-01-07
6 楼:  发表于: 2014-08-21 18:49    发自: Web Page
需要部署在自己的服务器上。最简单的方式是可以在github上生成一个页面,别人就能访问到游戏了。

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


级别: 新手上路
UID: 353913
精华: 0
发帖: 2
可可豆: 2 CB
威望: 2 点
在线时间: 1(时)
注册时间: 2014-08-01
最后登录: 2014-08-31
7 楼:  发表于: 2014-08-31 12:56    发自: Web Page
为什么用手机浏览器打开就卡在了loading0%上
级别: 新手上路
UID: 368484
精华: 0
发帖: 4
可可豆: 4 CB
威望: 4 点
在线时间: 2(时)
注册时间: 2014-09-01
最后登录: 2014-09-03
8 楼:  发表于: 2014-09-01 10:19    发自: Web Page
回 楼主(jiading2008) 的帖子
有源码呀,可惜是2.2的,最新的引擎都到3.0了
级别: 新手上路
状态: 连续签到 - [1天]
UID: 254984
精华: 0
发帖: 9
可可豆: 28 CB
威望: 29 点
在线时间: 13(时)
注册时间: 2012-09-24
最后登录: 2015-04-08
9 楼:  发表于: 2014-09-05 18:01    发自: Web Page
回 7楼(longmenwaideyu) 的帖子
我试过手机也是可以玩的呀  只要你的手机支持html5
描述
快速回复

关注本帖(如果有新回复会站内信通知您)

发帖、回帖都会得到可观的积分奖励。查看论坛积分规则

按"Ctrl+Enter"直接提交
    顶部