benchmark/shape_fly.cocos.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Birds Flying</title>
<style>
canvas {
position: relative;
width: 500px;
height: 500px;
background: black;
}
</style>
</head>
<body>
<div>sprites: <span id="spriteCount">0</span></div>
<canvas id="gameCanvas" width="800" height="800"></canvas>
<script type="text/javascript" src="js/cocos2d-js-v3.13.js" charset="UTF-8"></script>
<script type="text/javascript">
function place(sprite) {
const size = cc.director.getWinSize();
sprite.setPosition(size.width / 2, size.height / 2);
sprite.anchor = [0.5, 0.5];
randomMove(sprite);
spriteCount.innerHTML = Number(spriteCount.innerHTML) + 1;
return sprite;
}
function randomMove(sprite) {
const ang = Math.random() * 2 * Math.PI;
const {x: x0, y: y0} = sprite;
const {width, height} = cc.director.getWinSize();
const x1 = width / 2 + 350 * Math.cos(ang);
const y1 = height / 2 + 350 * Math.sin(ang);
const distance = Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2);
const startTime = Date.now(),
T = 5 * distance + 100;
requestAnimationFrame(function f() {
let p = (Date.now() - startTime) / T;
p = Math.min(1.0, p);
sprite.x = x0 + p * (x1 - x0);
sprite.y = y0 + p * (y1 - y0);
sprite.rotation = 720 * p;
if(p < 1) {
requestAnimationFrame(f);
} else {
setTimeout(() => {
randomMove(sprite);
}, 500);
}
});
}
window.onload = function () {
cc.game.onStart = function () {
// load resources
cc.LoaderScene.preload([], () => {
const MyScene = cc.Scene.extend({
onEnter() {
this._super();
const fglayer = new FgLayer();
this.addChild(fglayer, 1);
const bglayer = new BgLayer();
this.addChild(bglayer);
},
});
const FgLayer = cc.Layer.extend({
ctor() {
this._super();
return true;
},
onEnter() {
this._super();
function crateNode() {
const drawNode = new cc.DrawNode();
drawNode.clear();
drawNode.drawDot(cc.p(0, 0), 10, cc.color(0, 0, 0, 255));
drawNode.drawDot(cc.p(-20, 0), 10, cc.color(0, 0, 0, 255));
drawNode.drawDot(cc.p(20, 0), 10, cc.color(0, 0, 0, 255));
drawNode.drawDot(cc.p(0, 20), 10, cc.color(0, 0, 0, 255));
drawNode.drawDot(cc.p(0, -20), 10, cc.color(0, 0, 0, 255));
return drawNode;
}
this.addChild(place(crateNode()), 0);
gameCanvas.addEventListener('click', (evt) => {
this.addChild(place(crateNode()), 0);
});
},
});
const BgLayer = cc.Layer.extend({
ctor() {
this._super();
return true;
},
onEnter() {
const drawNode = new cc.DrawNode();
drawNode.clear();
drawNode.drawDot(cc.p(400, 400), 400, cc.color(17, 51, 153, 128));
this.addChild(drawNode, 0);
},
});
cc.director.runScene(new MyScene());
}, this);
};
cc.game.run('gameCanvas');
};
</script>
</body>
</html>