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);
}
</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,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);
}
});
