Commit d3680af2 authored by Seaborn Lee's avatar Seaborn Lee

feat: add star

parent cb466971
...@@ -11,6 +11,8 @@ cc.Class({ ...@@ -11,6 +11,8 @@ cc.Class({
extends: cc.Component, extends: cc.Component,
properties: { properties: {
collectedCount: 0,
layout: null,
bgHeight: { bgHeight: {
set: function (bgHeight) { set: function (bgHeight) {
this._bgHeight = bgHeight; this._bgHeight = bgHeight;
...@@ -25,158 +27,119 @@ cc.Class({ ...@@ -25,158 +27,119 @@ cc.Class({
}, },
}, },
start() {}, onLoad() {
this.layout = cc.find("layout", this.node);
},
setStarCount() { setStarCount() {
// let disH = 80; this.layout.height = this._bgHeight - 100;
// // let disScale = 1;
// // if (this._count > 5) {
// // disH = (400 / gArr.length);
// // disScale = 5 / gArr.length;
// // }
// for (let i = 0; i < this._count; i++) {
// const starBg = this.getSprNode("img/star_bg");
// starBg.y = -i * disH;
// this.node.addChild(starBg);
// }
let length = this._count; let length = this._count;
const layout = cc.find('layout', this.node);
layout.height = this._bgHeight - 100;
const paddingY = layout.getComponent(cc.Layout).spacingY;
const _starBase = this.createStarBase(this.layout);
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
const starBase = this.getSprNode("img/star_bg"); const starBase = cc.instantiate(_starBase);
starBase.name = `starBase_${i}`; starBase.parent = this.layout;
starBase.scale = this.between(0.5, (layout.height / length - paddingY) / starBase.height, 1);
starBase.parent = layout;
} }
this.currentStarIdx = 0; this.currentStarIdx = 0;
}, },
createStarBase(layout) {
getSprNode(resName) { const paddingY = layout.getComponent(cc.Layout).spacingY;
const sf = cc.find(resName, this.node).getComponent(cc.Sprite).spriteFrame; const starBase = getSprNode("img/star_bg", this.node);
const node = new cc.Node(); const star = getSprNode("img/star", this.node);
node.addComponent(cc.Sprite).spriteFrame = sf; star.name = "Star";
return node; const starBig = getSprNode("img/icon_bigstar", this.node);
starBig.name = "StarBig";
star.addChild(starBig);
star.active = false;
starBase.addChild(star);
starBase.scale = this.between(
0.5,
(layout.height / length - paddingY) / starBase.height,
1
);
return starBase;
}, },
bigStarArr: null, bigStarArr: null,
initStar() { add() {
const gArr = this.data.groupArr; this.collectedCount++;
if (gArr.length <= 1) {
return;
}
this.cleanStar();
this.bigStarArr = [];
let baseX = this.canvas.width / 2 - 80 * this._mapScaleMin; if (this.collectedCount > this._count) {
let baseY = this.canvas.height / 2 - 80 * this._mapScaleMin; return;
let disH = 80 * this._mapScaleMin;
let disScale = 1;
if (gArr.length > 5) {
disH = (400 / gArr.length) * this._mapScaleMin;
disScale = 5 / gArr.length;
}
for (let i = 0; i < gArr.length; i++) {
const starBg = getSprNode("star_bg");
this.canvas.addChild(starBg, 10);
starBg.x = baseX;
starBg.y = baseY - i * disH;
starBg.scale = disScale;
const starTop = getSprNode("star");
starBg.addChild(starTop);
starTop.active = false;
starBg.star = starTop;
const starBig = getSprNode("icon_bigstar");
starTop.addChild(starBig);
starBig.angle = -90;
starBg.starBig = starBig;
this.bigStarArr.push(starBg);
}
console.log("bigStarArr: ", this.bigStarArr);
},
cleanStar() {
if (this.bigStarArr && this.bigStarArr.length > 0) {
for (let i = 0; i < this.bigStarArr.length; i++) {
this.bigStarArr[i].removeFromParent();
}
} }
},
currentStarIdx: null, const starBase = this.layout.getChildren()[this.collectedCount - 1];
showStar() { const star = starBase.getChildByName("Star");
if (!this.currentStarIdx) { const starBig = star.getChildByName("StarBig");
this.currentStarIdx = 0; starBig.angle = -90;
} starBig.scale = 1;
star.active = true;
const starBase = cc.find(`Canvas/layout/starBase_${this.currentStarIdx}`); star.scaleX = 0.7 / starBase.scale;
if (!starBase) { star.scaleY = 1 / starBase.scale;
return; star.angle = 90;
} const canvas = cc.find("Canvas");
const star = starBase.getChildByName('Star'); const startPos = this.exchangeNodePos(
const starBig = star.getChildByName('StarBig'); star.parent,
starBig.scale = 1; canvas,
star.active = true; cc.v2(0, -canvas.height / 2)
star.scaleX = 0.7 / starBase.scale; );
star.scaleY = 1 / starBase.scale; const middlePos = this.exchangeNodePos(
star.angle = 90; star.parent,
const canvas = cc.find('Canvas'); canvas,
const startPos = this.exchangeNodePos(star.parent, canvas, cc.v2(0, -canvas.height / 2)); cc.v2(0, -canvas.height / 4)
const middlePos = this.exchangeNodePos(star.parent, canvas, cc.v2(0, -canvas.height / 4)); );
star.x = startPos.x; star.x = startPos.x;
star.y = startPos.y - starBig.height; star.y = startPos.y - starBig.height;
console.log('middlePos = ' + JSON.stringify(middlePos)); console.log("middlePos = " + JSON.stringify(middlePos));
const time = 1; const time = 1;
cc.tween(star) cc.tween(star)
.to(0.3, { y: middlePos.y + 80 }, { easing: 'quadOut' }) .to(0.3, { y: middlePos.y + 80 }, { easing: "quadOut" })
.to(0.1, { y: middlePos.y + 40, scaleX: 1.2 / starBase.scale, scaleY: 0.8 / starBase.scale }, { easing: 'quadOut' }) .to(
.to(0.1, { y: middlePos.y, scaleX: 1 / starBase.scale, scaleY: 1 / starBase.scale }, { easing: 'quadOut' }) 0.1,
.delay(0.1) {
.to(0.8, { angle: -720, scale: 1 }) y: middlePos.y + 40,
.start(); scaleX: 1.2 / starBase.scale,
scaleY: 0.8 / starBase.scale,
cc.tween(star) },
.delay(0.6) { easing: "quadOut" }
.to(0.8, { x: 0 }, { easing: 'quadIn' }) )
.start(); .to(
cc.tween(star) 0.1,
.delay(0.6) {
.to(0.8, { y: 0 }, { easing: 'quadOut' }) y: middlePos.y,
.start(); scaleX: 1 / starBase.scale,
scaleY: 1 / starBase.scale,
cc.tween(starBig) },
.delay(0.6) { easing: "quadOut" }
.to(0.8, { scale: 0 }, { easing: 'quadOut' }) )
.call(() => { .delay(0.1)
// this.checkGameEnd(); .to(0.8, { angle: -720, scale: 1 })
}) .start();
.start();
cc.tween(star).delay(0.6).to(0.8, { x: 0 }, { easing: "quadIn" }).start();
this.currentStarIdx++; cc.tween(star).delay(0.6).to(0.8, { y: 0 }, { easing: "quadOut" }).start();
cc.tween(starBig)
.delay(0.6)
.to(0.8, { scale: 0 }, { easing: "quadOut" })
.call(() => {
// this.checkGameEnd();
})
.start();
this.currentStarIdx++;
}, },
exchangeNodePos(targetNode, baseNode, basePos) { exchangeNodePos(targetNode, baseNode, basePos) {
return targetNode.convertToNodeSpaceAR(baseNode.convertToWorldSpaceAR(cc.v2(basePos.x, basePos.y))); return targetNode.convertToNodeSpaceAR(
baseNode.convertToWorldSpaceAR(cc.v2(basePos.x, basePos.y))
);
}, },
between(a, b, c) { between(a, b, c) {
return [a, b, c].sort()[1]; return [a, b, c].sort()[1];
}, },
......
...@@ -291,6 +291,12 @@ cc.Class({ ...@@ -291,6 +291,12 @@ cc.Class({
this.initStar(); this.initStar();
setInterval(() => {
const starNode = cc.find("Canvas/starNode");
const script = starNode.getComponent("star");
script.add();
}, 2000);
// setTimeout(() => { // setTimeout(() => {
// this.showBigStar(); // this.showBigStar();
// }, 2000); // }, 2000);
......
export function getPosByAngle(angle, len) { export function getPosByAngle(angle, len) {
const radian = (angle * Math.PI) / 180;
const radian = angle * Math.PI / 180;
const x = Math.sin(radian) * len; const x = Math.sin(radian) * len;
const y = Math.cos(radian) * len; const y = Math.cos(radian) * len;
return { x, y }; return { x, y };
} }
export function getAngleByPos(px, py, mx, my) { export function getAngleByPos(px, py, mx, my) {
const x = Math.abs(px - mx); const x = Math.abs(px - mx);
const y = Math.abs(py - my); const y = Math.abs(py - my);
const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
const cos = y / z; const cos = y / z;
const radina = Math.acos(cos); // 用反三角函数求弧度 const radina = Math.acos(cos); // 用反三角函数求弧度
let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度 let angle = Math.floor((180 / (Math.PI / radina)) * 100) / 100; // 将弧度转换成角度
if (mx > px && my > py) {// 鼠标在第四象限 if (mx > px && my > py) {
// 鼠标在第四象限
angle = 180 - angle; angle = 180 - angle;
} }
if (mx === px && my > py) {// 鼠标在y轴负方向上 if (mx === px && my > py) {
// 鼠标在y轴负方向上
angle = 180; angle = 180;
} }
if (mx > px && my === py) {// 鼠标在x轴正方向上 if (mx > px && my === py) {
// 鼠标在x轴正方向上
angle = 90; angle = 90;
} }
if (mx < px && my > py) {// 鼠标在第三象限 if (mx < px && my > py) {
// 鼠标在第三象限
angle = 180 + angle; angle = 180 + angle;
} }
if (mx < px && my === py) {// 鼠标在x轴负方向 if (mx < px && my === py) {
// 鼠标在x轴负方向
angle = 270; angle = 270;
} }
if (mx < px && my < py) {// 鼠标在第二象限 if (mx < px && my < py) {
// 鼠标在第二象限
angle = 360 - angle; angle = 360 - angle;
} }
// console.log('angle: ', angle); // console.log('angle: ', angle);
return angle; return angle;
} }
export function exchangeNodePos(baseNode, targetNode) { export function exchangeNodePos(baseNode, targetNode) {
return baseNode.convertToNodeSpaceAR(targetNode._parent.convertToWorldSpaceAR(cc.v2(targetNode.x, targetNode.y))); return baseNode.convertToNodeSpaceAR(
targetNode._parent.convertToWorldSpaceAR(cc.v2(targetNode.x, targetNode.y))
);
} }
export function RandomInt(a, b = 0) { export function RandomInt(a, b = 0) {
...@@ -70,20 +74,26 @@ export function setSprNodeMaxLen(sprNode, maxW, maxH) { ...@@ -70,20 +74,26 @@ export function setSprNodeMaxLen(sprNode, maxW, maxH) {
sprNode.scale = Math.round(s * 1000) / 1000; sprNode.scale = Math.round(s * 1000) / 1000;
} }
export function getSpriteFrimeByUrl(url, cb) { export function getSpriteFrimeByUrl(url, cb) {
cc.loader.load({url}, (err, img) => { cc.loader.load({ url }, (err, img) => {
const spriteFrame = new cc.SpriteFrame(img) const spriteFrame = new cc.SpriteFrame(img);
if (cb) { if (cb) {
cb(spriteFrame); cb(spriteFrame);
} }
}) });
} }
export function getSprNode(resName) { export function getSprNode(resName, root) {
const sf = cc.find('Canvas/res/img/' + resName).getComponent(cc.Sprite).spriteFrame; let resNode;
if (root) {
resNode = cc.find(resName, root);
} else {
resNode = cc.find("Canvas/res/img/" + resName);
}
const node = new cc.Node(); const node = new cc.Node();
node.addComponent(cc.Sprite).spriteFrame = sf; node.addComponent(cc.Sprite).spriteFrame = resNode.getComponent(
cc.Sprite
).spriteFrame;
return node; return node;
} }
...@@ -95,13 +105,11 @@ export function getSprNodeByUrl(url, cb) { ...@@ -95,13 +105,11 @@ export function getSprNodeByUrl(url, cb) {
if (cb) { if (cb) {
cb(spr); cb(spr);
} }
}) });
} }
export function playAudio(audioClip, cb = null) {
if (audioClip) {
export function playAudio(audioClip, cb=null) {
if (audioClip) {
const audioId = cc.audioEngine.playEffect(audioClip, false, 0.8); const audioId = cc.audioEngine.playEffect(audioClip, false, 0.8);
if (cb) { if (cb) {
cc.audioEngine.setFinishCallback(audioId, () => { cc.audioEngine.setFinishCallback(audioId, () => {
...@@ -110,21 +118,17 @@ export function playAudio(audioClip, cb=null) { ...@@ -110,21 +118,17 @@ export function playAudio(audioClip, cb=null) {
} }
return audioId; return audioId;
} }
} }
export function playAudioByUrl(audio_url, cb = null) {
export function playAudioByUrl(audio_url, cb=null) { if (audio_url) {
if (audio_url) { cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
cc.assetManager.loadRemote(audio_url, (err, audioClip) => {
playAudio(audioClip, cb); playAudio(audioClip, cb);
}); });
} }
} }
export async function asyncDelay(time) { export async function asyncDelay(time) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
...@@ -134,7 +138,7 @@ export async function asyncDelay(time) { ...@@ -134,7 +138,7 @@ export async function asyncDelay(time) {
} catch (e) { } catch (e) {
reject(e); reject(e);
} }
}) });
} }
export class FireworkSettings { export class FireworkSettings {
...@@ -145,7 +149,9 @@ export class FireworkSettings { ...@@ -145,7 +149,9 @@ export class FireworkSettings {
range; // 扩散范围 range; // 扩散范围
number; // 发射数量 number; // 发射数量
scalseRange; // 缩放范围 scalseRange; // 缩放范围
constructor(baseNode, nodeList, constructor(
baseNode,
nodeList,
pos = cc.v2(0, 0), pos = cc.v2(0, 0),
side = cc.v2(0, 100), side = cc.v2(0, 100),
range = 50, range = 50,
...@@ -168,15 +174,22 @@ export class FireworkSettings { ...@@ -168,15 +174,22 @@ export class FireworkSettings {
firework.pos, firework.pos,
firework.side, firework.side,
firework.range, firework.range,
firework.number, firework.number
); );
} }
} }
export async function showFireworks(fireworkSettings) { export async function showFireworks(fireworkSettings) {
const { baseNode, nodeList, pos, side, range, number, scalseRange } = fireworkSettings; const {
new Array(number).fill(' ').forEach(async (_, i) => { baseNode,
nodeList,
pos,
side,
range,
number,
scalseRange,
} = fireworkSettings;
new Array(number).fill(" ").forEach(async (_, i) => {
let rabbonNode = new cc.Node(); let rabbonNode = new cc.Node();
rabbonNode.parent = baseNode; rabbonNode.parent = baseNode;
rabbonNode.x = pos.x; rabbonNode.x = pos.x;
...@@ -194,16 +207,19 @@ export async function showFireworks(fireworkSettings) { ...@@ -194,16 +207,19 @@ export async function showFireworks(fireworkSettings) {
const rate = Math.random(); const rate = Math.random();
const angle = Math.PI * (Math.random() * 2 - 1); const angle = Math.PI * (Math.random() * 2 - 1);
await asyncTweenBy(rabbonNode, 0.3, { await asyncTweenBy(
x: side.x * rate + Math.cos(angle) * range * rate, rabbonNode,
y: side.y * rate + Math.sin(angle) * range * rate 0.3,
}, { {
easing: 'quadIn' x: side.x * rate + Math.cos(angle) * range * rate,
}); y: side.y * rate + Math.sin(angle) * range * rate,
},
{
easing: "quadIn",
}
);
cc.tween(rabbonNode) cc.tween(rabbonNode).by(8, { y: -2000 }).start();
.by(8, { y: -2000 })
.start();
cc.tween(rabbonNode) cc.tween(rabbonNode)
.to(5, { scale: (Math.random() - 0.5) * scalseRange + 1 }) .to(5, { scale: (Math.random() - 0.5) * scalseRange + 1 })
...@@ -236,11 +252,10 @@ export async function showFireworks(fireworkSettings) { ...@@ -236,11 +252,10 @@ export async function showFireworks(fireworkSettings) {
async function rabbonFall(node) { async function rabbonFall(node) {
const time = 1 + Math.random(); const time = 1 + Math.random();
const offsetX = RandomInt(-200, 200) * time; const offsetX = RandomInt(-200, 200) * time;
await asyncTweenBy(node, time, { x: offsetX, angle: offsetX * 60 / 200 }); await asyncTweenBy(node, time, { x: offsetX, angle: (offsetX * 60) / 200 });
rabbonFall(node); rabbonFall(node);
} }
export async function asyncTweenTo(node, duration, obj, ease = undefined) { export async function asyncTweenTo(node, duration, obj, ease = undefined) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
...@@ -292,10 +307,10 @@ export function showTrebleFirework(baseNode, rabbonList) { ...@@ -292,10 +307,10 @@ export function showTrebleFirework(baseNode, rabbonList) {
showFireworks(right); showFireworks(right);
} }
export function delayCall(time, cb) { export function delayCall(time, cb) {
return cc.tween({}) return cc
.delay(time) .tween({})
.delay(time)
.call(() => { .call(() => {
if (cb) { if (cb) {
cb(); cb();
...@@ -313,13 +328,11 @@ export function removeFromArr(arr, item) { ...@@ -313,13 +328,11 @@ export function removeFromArr(arr, item) {
return false; return false;
} }
export function showBtnAnima(btn, cb = null) {
export function showBtnAnima(btn, cb=null) {
const baseS = btn.scale; const baseS = btn.scale;
cc.tween(btn) cc.tween(btn)
.to(0.05, {scale: 0.9 * baseS}) .to(0.05, { scale: 0.9 * baseS })
.to(0.05, {scale: 1 * baseS}) .to(0.05, { scale: 1 * baseS })
.call(() => { .call(() => {
if (cb) { if (cb) {
cb(); cb();
...@@ -332,22 +345,41 @@ export function jellyShake(node) { ...@@ -332,22 +345,41 @@ export function jellyShake(node) {
const baseS = node.scale; const baseS = node.scale;
const time = 1; const time = 1;
cc.tween(node) cc.tween(node)
.to(time / 5 / 2, {scaleX: baseS * 0.8, scaleY: baseS * 1.2}, {easing: "sineInOut"}) .to(
.to(time / 5, {scaleX: baseS * 1.1, scaleY: baseS * 0.9}, {easing: "sineInOut"}) time / 5 / 2,
.to(time / 5, {scaleX: baseS * 0.95, scaleY: baseS * 1.15}, {easing: "sineInOut"}) { scaleX: baseS * 0.8, scaleY: baseS * 1.2 },
.to(time / 5, {scaleX: baseS * 1.02, scaleY: baseS * 0.98}, {easing: "sineInOut"}) { easing: "sineInOut" }
.to(time / 5, {scaleX: baseS * 1, scaleY: baseS * 1}, {easing: "sineInOut"}) )
.to(
time / 5,
{ scaleX: baseS * 1.1, scaleY: baseS * 0.9 },
{ easing: "sineInOut" }
)
.to(
time / 5,
{ scaleX: baseS * 0.95, scaleY: baseS * 1.15 },
{ easing: "sineInOut" }
)
.to(
time / 5,
{ scaleX: baseS * 1.02, scaleY: baseS * 0.98 },
{ easing: "sineInOut" }
)
.to(
time / 5,
{ scaleX: baseS * 1, scaleY: baseS * 1 },
{ easing: "sineInOut" }
)
.start(); .start();
} }
export function onHomeworkFinish() { export function onHomeworkFinish() {
const middleLayer = cc.find('middleLayer'); const middleLayer = cc.find("middleLayer");
if (middleLayer) { if (middleLayer) {
const middleLayerComponent = middleLayer.getComponent('middleLayer'); const middleLayerComponent = middleLayer.getComponent("middleLayer");
if (middleLayerComponent.role == 'student') { if (middleLayerComponent.role == "student") {
middleLayerComponent.onHomeworkFinish(() => { }); middleLayerComponent.onHomeworkFinish(() => {});
} }
return; return;
} }
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment