cocos2d html5 适配

最新推荐文章于 2021-11-23 23:38:04 发布

第三个电饭锅

最新推荐文章于 2021-11-23 23:38:04 发布

阅读量3.4k

点赞数

分类专栏： cocos2dx

本文链接：https://blog.youkuaiyun.com/w18767104183/article/details/40620229

版权

cocos2dx 专栏收录该内容

150 篇文章

订阅专栏

index.html5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cocos2d-html5 Hello World test</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
    <style>
        body, canvas, div {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body style="padding:0; margin: 0; background: #111;">
<canvas id="gameCanvas" width="800" height="450"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script src="main.js"></script>
</body>
</html>

main.js

cc.setResize = function(){

    var _frameSize = cc.view.getFrameSize();

    if(cc.view.isRetinaEnabled())
    {
        _frameSize =cc.size( _frameSize.width * 2, _frameSize.height*2);
    }

    var currentAspectRatio = _frameSize.width/_frameSize.height;
    var originalAspectRatio = cc.m_resolutionSize.width/cc.m_resolutionSize.height;
    //
    if(currentAspectRatio>originalAspectRatio)//采用根据宽度自适应
    {
        var policy = new cc.ResolutionPolicy(cc.ContainerStrategy.EQUAL_TO_FRAME, cc.ContentStrategy.FIXED_HEIGHT);
        cc.view.setDesignResolutionSize(cc.m_resolutionSize.width, cc.m_resolutionSize.height, policy);
    }
    if(currentAspectRatio<=originalAspectRatio)// 采用根据长度自适应
    {
        var policy = new cc.ResolutionPolicy(cc.ContainerStrategy.EQUAL_TO_FRAME, cc.ContentStrategy.FIXED_WIDTH);
        cc.view.setDesignResolutionSize(cc.m_resolutionSize.width, cc.m_resolutionSize.height, policy);
    }

    cc.m_currentAndOrignalRatioX = _frameSize.width/cc.winSize.width;
    cc.m_currentAndOrignalRatioY = _frameSize.height/cc.winSize.height;

};


cc.game.onStart = function(){
    cc.m_resolutionSize = cc.size(800,450);
    cc.m_currentAndOrignalRatioX = 0;
    cc.m_currentAndOrignalRatioY = 0;

    cc.view.adjustViewPort(true);

    cc.view.resizeWithBrowserSize(true);

    cc.setResize();

    cc.view.setResizeCallback(function() {
        // 做任何你所需要的游戏内容层面的适配操作
        // 比如说，你可以针对用户的移动设备方向来决定所要应用的适配模式
        cc.setResize();
        var _frameSize = cc.view.getFrameSize();

        if(cc.view.isRetinaEnabled())
        {
            _frameSize =cc.size( _frameSize.width * 2, _frameSize.height*2);
        }
        cc.m_ingameLayer.setPosition(cc.p(_frameSize.width/2/cc.view.getScaleX() , _frameSize.height/2 /cc.view.getScaleY()));
        for(var i = 0; i < cc.m_ingameLayer._children.length; i++)
        {
            var _position =  cc.m_ingameLayer.Point(cc.m_ingameLayer._children[i]._originalPosition);
            cc.m_ingameLayer._children[i].setPosition(_position);
        }
    });

    cc.m_ingameLayer = new HelloWorldLayer();
    cc.ingameScene = new HelloWorldScene(cc.m_ingameLayer);
    cc.LoaderScene.preload(g_resources, function () {

        cc.director.runScene(cc.ingameScene);
    }, this);

};
cc.game.run();

app.js

var HelloWorldLayer = cc.Sprite.extend({
    sprite:null,
    _paddles:[],
    _isOperate:0,
    Point:function(pos)
    {
        var _point = cc.p();
        _point.x = pos.x-cc.m_resolutionSize.width/2;
        _point.y = pos.y-cc.m_resolutionSize.height/2;

        var _offset = cc.p();

        switch (cc.view.getResolutionPolicy()._contentStrategy)
        {
            case cc.ContentStrategy.FIXED_HEIGHT:
            {
                _offset = cc.p (_point.x/cc.m_currentAndOrignalRatioY*cc.m_currentAndOrignalRatioX ,_point.y );
                break;
            }
            case cc.ContentStrategy.FIXED_WIDTH:
            {
                _offset =cc.p (_point.x ,_point.y/cc.m_currentAndOrignalRatioX*cc.m_currentAndOrignalRatioY );
                break;
            }
            default:

                break;
        }

        return cc.p(cc.m_resolutionSize.width/2 +_offset.x,cc.m_resolutionSize.height/2 +_offset.y);
    },

    ctor:function () {
        //
        // 1. super init first
        this._super();
        /
        // 2. add a menu item with "X" image, which is clicked to quit the program
        //    you may modify it.
        // ask the window size
        cc.setResize();

        var _winSize = cc.winSize;
        //cc.log(_winSize.width/2);
        var _frameSize = cc.view.getFrameSize();

        if(cc.view.isRetinaEnabled())
        {
            _frameSize =cc.size( _frameSize.width * 2, _frameSize.height*2);
        }

        this.setContentSize(cc.size(800,450));

        this.setPosition(cc.p(_frameSize.width/2/cc.view.getScaleX() , _frameSize.height/2 /cc.view.getScaleY()));


        var _conter = new ScrollSprite();
        _conter._originalPosition = cc.p(_winSize.width/2, _winSize.height );
        _conter.setPosition(this.Point(_conter._originalPosition));
        this.addChild(_conter);
        cc.log(_conter.getPosition());

        for (var i = -3; i < 3; i++)
        {
            var _position = (cc.p(i*90,0));
            var _sprite = new cc.Sprite(res.CloseNormal_png);
            _sprite.setScale(2);
            this._paddles.push(_sprite);
            _sprite.x = _position.x;
            _sprite.y = _position.y;
            _conter.addChild(_sprite);
        }

        this.schedule(this.update, 0.1);


        return true;
    },

    update:function ()
    {
        if(1)
        {
            for (var j = 0; j < this._paddles.length; j++) {
                var _obj1 = this._paddles[j];
                if (!_obj1)
                    break;

                for (var i = j+1; i < this._paddles.length; i++) {
                    var _obj2 = this._paddles[i];
                    if (!_obj2)
                        break;

                    var _lenth = this.calculateLenth(_obj1.getPosition(), _obj2.getPosition());

                    var _minLenth = 40*2;
                    if(_minLenth>_lenth)
                    {
                        var _centerPoint = cc.p((_obj1.x + _obj2.x)/2, (_obj1.y + _obj2.y)/2);
                        var _moveLenth = (_lenth - _minLenth) /2;

                        var _randian = this.calculateRadian(_obj1.getPosition(), _obj2.getPosition());
                        cc.log(_randian);
                        var _offset = cc.p(Math.sin(_randian)*_moveLenth, Math.cos(_randian)*_moveLenth);

                        _obj1.runAction( cc.moveBy(0.1, cc.p(_offset.x, _offset.y)));
                        _obj2.runAction( cc.moveBy(0.1, cc.p(-_offset.x, -_offset.y)));
                    }
                }
            }
        }

    },
    calculateLenth:function(p1, p2)
    {

        var _offsetX = p1.x - p2.x;
        var _offsetY = p1.y - p2.y;
        var _lenth = Math.sqrt(_offsetX*_offsetX + _offsetY*_offsetY);

        return _lenth;
    },
    calculateRadian:function(p1, p2)
    {
        var _offsetX = p1.x - p2.x;
        var _offsetY = p1.y - p2.y;
        var _radian = Math.atan(_offsetX/ _offsetY);
        if(p1.y > p2.y)
        {
            _radian +=Math.PI;
        }

        return _radian;
    }

});

var HelloWorldScene = cc.Scene.extend({
    ctor:function (layer) {
        this._super();
        //layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});