文档章节

仿微信打飞机游戏网页版,基于cocos2d-js游戏引擎,在线试玩,内含源码

猿敲月下码
 猿敲月下码
发布于 10/16 10:48
字数 842
阅读 21
收藏 0

早几年研究cocos2d的demo项目,这个是基于cocos2d-js游戏引擎,整个游戏用js编写。

玩法:鼠标拖动飞机移动即可

游戏截图:

文件说明

  • cocos2dx:游戏引擎
  • res:存放游戏素材(图片)
  • src:游戏源码
  • cocos2d.js:引擎配置文件

核心代码如下(src/scene/OuterSpaceScene.js):

/**
 * Date: 14-3-7
 * Time: 下午4:10
 * 场景层,外太空,所有的元素都在这个场景中
 */
var OuterSpaceLayer = cc.Layer.extend({
    m_bgSprite1:null, // 背景图1
    m_bgSprite2:null, // 背景图2
    m_player:null, // 玩家飞机
    m_touchArea:null,// 飞机活动区域
    m_distanceFingerPlaneX:0, // 手指与玩家飞机的x距离
    m_distanceFingerPlaneY:0, // 手指与玩家飞机的y距离

    init:function () {
        this._super(); // 调用父类init方法

        this._initImgCache(); // 加载图片
        this._initBG(); // 初始化背景图
        this._initPlayer(); // 初始化玩家
        this._initEnemy(); // 初始化敌人
        this._initBullet();
        this.setTouchEnabled(true); // 设置界面可以触摸

        this.scheduleUpdate(); // 启动update循环

    }

    /**
     * @override
     */
    ,registerWithTouchDispatcher:function(){
        //CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this,0,true);
        // 注册屏幕触摸事件
        cc.registerTargetedDelegate(0,true,this);
    }

    /**
     * @override
     */
    ,onTouchBegan:function(touch){
        var touchPoint = touch.getLocation();

        var playerPoint = this.m_player.getPosition();

        this.m_distanceFingerPlaneX = touchPoint.x - playerPoint.x;
        this.m_distanceFingerPlaneY = touchPoint.y - playerPoint.y;
        return true;
    }

    /**
     * @override
     */
    ,onTouchMoved:function(touch,event){
        var touchPoint = touch.getLocation();
        //cc.Director.getInstance().convertToUI(posInView);
        var newPoint = cc.p(touchPoint.x - this.m_distanceFingerPlaneX
                ,touchPoint.y - this.m_distanceFingerPlaneY);

        var desPos = this._buildMoveArea(newPoint);

        if(this._isMoveArea(desPos)){
            this.m_player.setPosition(desPos);
        }

    }
    // 构建玩家飞机可移动区域
    ,_buildMoveArea:function(newPoint){
        if (newPoint.x>=cc.rectGetMaxX(this.m_touchArea))
        {
            newPoint.x = cc.rectGetMaxX(this.m_touchArea);
        }
        if (newPoint.x <= cc.rectGetMinX(this.m_touchArea))
        {
            newPoint.x = cc.rectGetMinX(this.m_touchArea);
        }
        if (newPoint.y >= cc.rectGetMaxY(this.m_touchArea))
        {
            newPoint.y = cc.rectGetMaxY(this.m_touchArea);
        }
        if (newPoint.y <= cc.rectGetMinY(this.m_touchArea))
        {
            newPoint.y = cc.rectGetMinY(this.m_touchArea);
        }

        return newPoint;
    }
    // 是否在移动范围
    ,_isMoveArea : function(ccp){
        return cc.rectContainsPoint(this.m_touchArea,ccp);
    }

    ,_initImgCache:function(){
        var cache = cc.SpriteFrameCache.getInstance();
        cache.addSpriteFrames(s_plistFileName, s_plistImgName);
    }
    // 创建敌人
    ,_initEnemy:function(){
        // 创建怪物管理器
        var enemyMgr = new EnemyManager();
        enemyMgr.setPlayer(this.m_player);
        this.addChild(enemyMgr,3);
    }
    ,_initBullet:function(){
        // 设置普通子弹
        this.m_player.setBulletNormal(this._buildBullet("bullet_normal.png"));
    }

    ,_buildBullet:function(imgName){
        var playerSize = this.m_player.getSprite().getContentSize();
        var playerPos = this.m_player.getPosition();

        var bullet = new Bullet();
        bullet.bindSprite(cc.Sprite.createWithSpriteFrameName(imgName));
        // 子弹从飞机头部发出
        bullet.setPositionY(playerPos.y + playerSize.height/2);

        this.addChild(bullet,2);

        return bullet;
    }

    /**
     * 初始化背景图
     */
    ,_initBG:function(){
        var size = cc.Director.getInstance().getVisibleSize();

        this.m_bgSprite1 = cc.Sprite.create(s_BG);
        this.m_bgSprite1.setPosition(size.width/2,size.height/2);
        this.addChild(this.m_bgSprite1,0);

        this.m_bgSprite2 = cc.Sprite.create(s_BG);
        // 让地图二紧跟在地图1的后面
        this.m_bgSprite2.setPosition(size.width/2,size.height + size.height/2);
        // 垂直翻转图片
        this.m_bgSprite2.setFlippedY(true);
        this.addChild(this.m_bgSprite2,0);
    }

    ,_initPlayer:function(){
        var size = cc.Director.getInstance().getVisibleSize();
        // 创建角色
        this.m_player = new Player();

        this.m_player.bindSprite(cc.Sprite.createWithSpriteFrameName("player.png"));
        this.m_player.setPosition(size.width/2,100);

        this.addChild(this.m_player,1);
        var playerSize = this.m_player.getSprite().getContentSize();
        // 初始化飞机活动区域
        this.m_touchArea = cc.rect(
            playerSize.width/2 - 8
            ,playerSize.height/2 - 5
            ,size.width - playerSize.width + 18
            ,size.height - playerSize.height + 13);
    }

    ,_scrollBG:function(){
        var posY1 = this.m_bgSprite1.getPositionY();
        var posY2 =this. m_bgSprite2.getPositionY();

        var speed =1;

        posY1 -=speed;
        posY2 -=speed;

        var mapSize = this.m_bgSprite1.getContentSize();
        /*
         当第一个地图完全离开屏幕时,让第二个地图完全出现在屏幕上,
         同时让第一个地图紧贴在第二个地图之后
         */
        if(posY1< -mapSize.height/2){
            posY2 = mapSize.height/2;
            posY1 = mapSize.height + mapSize.height/2;
        }
        /*
         当第二个地图完全离开屏幕时,让第一个地图完全出现在屏幕上,
         同时让第二个地图紧贴在第一个地图之后
         */
        if(posY2<-mapSize.height/2){
            posY1 = mapSize.height/2;
            posY2 = mapSize.height + mapSize.height/2;
        }
        this.m_bgSprite1.setPositionY(posY1);
        this.m_bgSprite2.setPositionY(posY2);
    }


    ,update:function(dt){
        this._scrollBG();
        this.m_player.fire();
    }
});

var OuterSpaceScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new OuterSpaceLayer();
        this.addChild(layer);
        layer.init();
    }
});

得益于游戏引擎来带的便利,代码写起来不是很复杂,可以采用面相对象的方式去写,看起来也一目了然。

© 著作权归作者所有

猿敲月下码

猿敲月下码

粉丝 51
博文 36
码字总数 34448
作品 4
杭州
高级程序员
私信 提问
分享几个令人震撼的JS和HTML5游戏

或许你对网页游戏仅仅停留在Flash的时代,认为只有Flash才能做出非常绚丽的游戏特效。那么今天就打破大家的这个观念,一起来看看用Javascript和HTML5实现的网页游戏,这些游戏个人认为做得已...

tp_wire
2012/06/27
24.7K
20
原生javascript开发仿微信打飞机小游戏

今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏。。 本来想用html5做的,但是毕竟人家才初学,连jquery都还不...

zaaack
2014/02/04
9.7K
37
移动应用和游戏开发两个阶段在线视频培训的未来计划

在51CTO学院开线上视频课程已经3个多月了,也上了不少课。不过发现还有很多课没有开。现在就将未来的开课计划公布一下。计划分为两个阶段。第一阶段主要是Cocos2d-x和Cocos2d-js的游戏开发培...

androidguy
2018/06/29
0
0
飞行熊猫游戏源码android版

这款游戏是前一段时间完成的一个项目,飞行熊猫游戏源码android版,飞行熊猫基于cocos2d游戏引擎开发,包括了谷歌admob广告支持,没有任何版权问题,大家可以自由修改和上传应用商店。 1.本游...

tianlongbamu
2015/03/19
28
0
HTML5 游戏引擎深度测评

最近看到网上一篇文章,标题叫做《2016年 最火的 15 款 HTML5 游戏引擎》。目前针对HTML5游戏的解决方案已经非常多,但谁好谁差却没有对比性资料。特意花了几天时间,针对文章中出现的12款免...

memda
2016/04/15
4.9K
8

没有更多内容

加载失败,请刷新页面

加载更多

02.日志系统:一条SQL更新语句是如何执行的?

我们还是从一个表的一条更新语句说起,我们创建下面一张表: create table T(ID int primary key, c int); 如果要将ID=2这一行c的值加1,SQL可以这么写: update T set c=c+1 where ID=2; 前...

scgaopan
今天
7
0
【五分钟系列】掌握vscode调试技巧

调试前端js 准备一个前端项目 index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1......

aoping
今天
6
0
PhotoShop 高级应用:USM锐化/S锐化/防抖

、 高反差锐化+混合模式:叠加模式 【将更多的边缘细节添加到图像中】

东方墨天
今天
7
0
Python数据可视化之matplotlib

常用模块导入 import numpy as npimport matplotlibimport matplotlib.mlab as mlabimport matplotlib.pyplot as pltimport matplotlib.font_manager as fmfrom mpl_toolkits.mplot3d i......

松鼠大帝
昨天
5
0
我用Bash编写了一个扫雷游戏

我在编程教学方面不是专家,但当我想更好掌握某一样东西时,会试着找出让自己乐在其中的方法。比方说,当我想在 shell 编程方面更进一步时,我决定用 Bash 编写一个扫雷游戏来加以练习。 我在...

老孟的Linux私房菜
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部