Commit 50d6901d authored by Chen Jiping's avatar Chen Jiping

perf:完成模板开发

parent e88111f1
import {
MySprite, tweenChange,
ShapeRect
} from './Unit';
export class AudioAnimation {
private x = 0;
private y = 0;
images = new Map();
bg: ShapeRect;
playPic1;
playPic2;
playPic3;
playPic4;
curAudio;
playing = false;
hideFlag = true;
/**
* 设置播放帧图片
* @param images
*/
constructor(images) {
this.images = images;
}
setXY(x, y) {
this.x = x;
this.y = y;
}
/**
* 初始化图
* @param parent 图片显示父对象
* @param show 是否直接显示
*/
initPic(parent, show: boolean) {
if (!parent) {
return;
}
const bg = new ShapeRect();
const getAudioPic = (index) => {
const playPic = new MySprite();
playPic.init(this.images.get("btn_laba" + index));
playPic.alpha = 0;
playPic.x = playPic.getBoundingBox().width / 2;
playPic.y = playPic.getBoundingBox().height / 2;
bg.addChild(playPic);
return playPic;
};
const playPic1 = getAudioPic(1);
if (show) {
playPic1.alpha = 1;
this.hideFlag = false;
}
else {
playPic1.alpha = 0;
this.hideFlag = true;
}
this.playPic1 = playPic1;
const playPic2 = getAudioPic(2);
this.playPic2 = playPic2;
const playPic3 = getAudioPic(3);
this.playPic3 = playPic3;
const playPic4 = getAudioPic(4);
this.playPic4 = playPic4;
bg.setSize(playPic1.getBoundingBox().width, playPic1.getBoundingBox().height);
bg.alpha = 0;
this.bg = bg;
bg.x = this.x;
bg.y = this.y;
if (parent instanceof Array) {
parent.push(bg);
}
else {
parent.addChild(bg);
}
}
/**
* 显示播放状态
*/
showPlayStauts() {
this.hideFlag = false;
const setPause = () => {
if (this.hideFlag) {
this.playPic1.alpha = 0;
}
else {
this.playPic1.alpha = 1;
}
this.playPic2.alpha = 0;
this.playPic3.alpha = 0;
this.playPic4.alpha = 0;
}
const show1 = () => {
if (this.playing) {
this.playPic1.alpha = 0;
this.playPic2.alpha = 1;
this.playPic3.alpha = 0;
this.playPic4.alpha = 0;
setTimeout(() => {
show2();
}, 500);
}
else {
setPause();
}
};
const show2 = () => {
if (this.playing) {
this.playPic1.alpha = 0;
this.playPic2.alpha = 0;
this.playPic3.alpha = 1;
this.playPic4.alpha = 0;
setTimeout(() => {
show3();
}, 500);
}
else {
setPause();
}
};
const show3 = () => {
if (this.playing) {
this.playPic1.alpha = 0;
this.playPic2.alpha = 0;
this.playPic3.alpha = 0;
this.playPic4.alpha = 1;
setTimeout(() => {
show4();
}, 500);
}
else {
setPause();
}
};
const show4 = () => {
if (this.playing) {
this.playPic1.alpha = 1;
this.playPic2.alpha = 0;
this.playPic3.alpha = 0;
this.playPic4.alpha = 0;
setTimeout(() => {
show1();
}, 500);
}
else {
setPause();
}
};
show1();
}
/**
*
* @param audio 播放音频
* @param callback
*/
playAudio(audio, callback = null) {
//console.log(audio);
if (!audio) {
return;
}
this.curAudio = audio;
audio.onended = () => {
this.playing = false;
if (callback) {
callback();
}
};
audio.play();
this.playing = true;
this.showPlayStauts();
}
/**
*
* @param reset 是否重置
* @param callback 暂停后执行方法
*/
pauseAudio(reset = false, callback = null) {
const audio = this.curAudio;
if (audio) {
this.playing = false;
if (reset) {
audio.currentTime = 0;
}
audio.pause();
if (callback) {
callback();
}
}
}
/**
* 隐藏音频播放动画
* @param reset 是否重置
*/
hide(reset = false) {
this.hideFlag = true;
this.pauseAudio(reset);
this.playPic1.alpha = 0;
this.playPic2.alpha = 0;
this.playPic3.alpha = 0;
this.playPic4.alpha = 0;
}
/**
* 显示播放动画
*/
show() {
this.hideFlag = false;
this.playPic1.alpha = 1;
this.playPic2.alpha = 0;
this.playPic3.alpha = 0;
this.playPic4.alpha = 0;
}
}
\ No newline at end of file
/**
*
* @param audio 音频
* @param now true-重新开始播放,flase-继续播放
* @param callback
*/
export function playAudio(audio, now = false, callback = null) {
if (audio) {
if (now) {
audio.pause();
audio.currentTime = 0;
}
if (callback) {
audio.onended = () => {
callback();
};
}
audio.play();
}
}
/**
* 暂停播放音频
* @param audio 音频
* @param reset 暂停是否重置:true-是,false-否
* @param callback
*/
export function pauseAudio(audio, reset = false, callback = null) {
if (audio) {
if (reset) {
audio.currentTime = 0;
}
audio.pause();
if (callback) {
callback();
}
}
}
\ No newline at end of file
import { playAudio } from './AudioUtil';
import { MySprite, ShapeRect, tweenChange } from './Unit';
export class Celebrate{
bg: ShapeRect;
images;
audioObj;
bigStar :MySprite;
smallStar : MySprite;
pic : MySprite;
init(images, audioObj){
this.images = images;
this.audioObj = audioObj;
const bg = new ShapeRect();
this.bg = bg;
bg.alpha = 0;
this.initPic();
}
initPic(){
const pic = new MySprite();
pic.init(this.images.get('bg_goodiob'), 0.5, 0.5);
pic.x = pic.width / 2;
pic.y = pic.height / 2;
this.bg.addChild(pic);
this.pic = pic;
this.bg.setSize(pic.width, pic.height);
;
const bigStar = new MySprite();
this.bigStar = bigStar
bigStar.init(this.images.get('icon_star2'), 0.5, 0.5);
bigStar.x = 49 + bigStar.width / 2;
bigStar.y = 94 + bigStar.height / 2;
this.bg.addChild(bigStar);
const smallStar = new MySprite();
this.smallStar = smallStar;
smallStar.init(this.images.get('icon_star1'));
smallStar.x = 474 + smallStar.width / 2;
smallStar.y = 143 + smallStar.height / 2;
this.bg.addChild(smallStar);
}
show(mapscale = 1, callback = null){
let tempScale = mapscale;
this.pic.setScaleXY(0);
this.smallStar.setScaleXY(0);
this.bigStar.setScaleXY(0);
playAudio(this.audioObj['celebrate'], true);
tweenChange(this.pic, {scaleX : tempScale, scaleY : tempScale}, 0.5, ()=>{
tweenChange(this.smallStar, {scaleX : tempScale * 1.3, scaleY : tempScale * 1.3}, 0.3, ()=>{
tweenChange(this.smallStar, {scaleX : tempScale, scaleY : tempScale}, 0.3)
});
tweenChange(this.bigStar, {scaleX : tempScale * 1.3, scaleY : tempScale * 1.3}, 0.3, ()=>{
tweenChange(this.bigStar, {scaleX : tempScale, scaleY : tempScale}, 0.3, callback)
});
})
}
}
\ No newline at end of file
import { MySprite, ShapeRect } from './Unit';
export class Answer {
bg: ShapeRect;
images;
audioObj;
data;
width = 394;
height = 490;
pic : MySprite;
init(data, images, audioObj) {
this.audioObj = audioObj;
this.images = images;
this.data = data;
const bg = new ShapeRect();
bg.setSize(this.width, this.height);
bg.alpha = 0;
this.bg = bg;
this.initPic();
}
initPic() {
const setMaxScale = (target: MySprite, maxW, maxH) => {
const sx = maxW / target.width;
const sy = maxH / target.height;
const s = Math.min(sx, sy);
target.setScaleXY(Math.round(s * 1000) / 1000);
}
const pic = new MySprite();
pic.init(this.images.get(this.data.picUrl));
pic.x = this.width / 2;
pic.y = this.height / 2;
this.pic = pic;
setMaxScale(pic, this.width, this.height);
this.bg.addChild(pic);
}
}
\ No newline at end of file
import {
MySprite,
moveItem,
removeItemFromArr,
rotateItem
} from './Unit';
export class Petal {
renderArr = [];
images;
ctx;
playing = true;
tempRenderArr = [];
constructor(renderArr, images, ctx) {
this.renderArr = renderArr;
this.images = images;
this.ctx = ctx;
this.tempRenderArr = [];
}
stop(callback = null) {
this.playing = false;
const checkFinish = () => {
if (this.tempRenderArr.length == 0) {
if (callback) {
callback();
}
}
else {
setTimeout(() => {
checkFinish();
}, 100);
}
}
checkFinish();
}
/**
* 显示结束花瓣
* @param rect {x,y,width, height} 花瓣显示位置及大小
* @param mapScale
* @param timeout 花瓣显示间隔
* @param kinds 花瓣种类,即花瓣图片样式数组个数
*/
showPetal(rect, mapScale: number, timeout: number, kinds = 9) {
if (!this.playing) {
return;
}
const petal = this.getPetal(rect, mapScale, kinds);
this.renderArr.push(petal);
this.tempRenderArr.push(petal);
let toY = rect.y + rect.height;
moveItem(petal, petal.x, toY + petal.height * petal.scaleY, petal['time'], () => {
removeItemFromArr(this.renderArr, petal);
removeItemFromArr(this.tempRenderArr, petal);
});
rotateItem(petal, petal['tr'], petal['time']);
setTimeout(() => {
this.showPetal(rect, mapScale, timeout);
}, timeout);
}
/**
* 得到花瓣
* @param rect
* @param mapScale
* @param kinds
*/
private getPetal(rect, mapScale, kinds) {
const petal = new MySprite(this.ctx);
const id = Math.ceil(Math.random() * kinds);
petal.init(this.images.get('petal_' + id));
const randomS = (Math.random() * 0.4 + 0.6) * mapScale;
petal.setScaleXY(randomS);
const randomR = Math.random() * 360;
petal.rotation = randomR;
const randomX = rect.x + Math.random() * rect.width;
petal.x = randomX;
petal.y = rect.y - petal.height / 2 * petal.scaleY;
const randomT = 0.5 + Math.random() * 2;
petal['time'] = randomT;
let randomTR = 360 * Math.random(); // - 180;
if (Math.random() < 0.5) { randomTR *= -1; }
petal['tr'] = randomTR;
return petal;
}
}
\ No newline at end of file
This diff is collapsed.
...@@ -69,6 +69,7 @@ export class MySprite extends Sprite { ...@@ -69,6 +69,7 @@ export class MySprite extends Sprite {
img; img;
_z = 0; _z = 0;
_showRect;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) { init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
...@@ -86,6 +87,10 @@ export class MySprite extends Sprite { ...@@ -86,6 +87,10 @@ export class MySprite extends Sprite {
this.anchorY = anchorY; this.anchorY = anchorY;
} }
setShowRect(rect) {
this._showRect = rect;
}
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') { setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
...@@ -176,7 +181,12 @@ export class MySprite extends Sprite { ...@@ -176,7 +181,12 @@ export class MySprite extends Sprite {
if (this.img) { if (this.img) {
this.ctx.drawImage(this.img, this._offX, this._offY); if (this._showRect) {
const rect = this._showRect;
this.ctx.drawImage(this.img, rect.x, rect.y, rect.width, rect.height, this._offX, this._offY, this.width, this.height);
} else {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
} }
......
...@@ -17,3 +17,8 @@ ...@@ -17,3 +17,8 @@
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/BRLNSDB.TTF") ;
} }
@font-face
{
font-family: 'CSMB';
src: url("../../assets/font/Comic Sans MS Bold.TTF") ;
}
This diff is collapsed.
const res = [ const res = [
// ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"], ['bg_di', "assets/play/bg_di.png"],
['btn_right', "assets/play/btn_right.png"], ['bg_di2', "assets/play/bg_di2.png"],
// ['text_bg', "assets/play/text_bg.png"], ['bg_fu', "assets/play/bg_fu.png"],
['bg_goodiob', "assets/play/bg_goodiob.png"],
['bg_monkeyleft1', "assets/play/bg_monkeyleft1.png"],
['bg_monkeyleft2', "assets/play/bg_monkeyleft2.png"],
['bg_monkeyright1', "assets/play/bg_monkeyright1.png"],
['bg_monkeyright2', "assets/play/bg_monkeyright2.png"],
['bg_number', "assets/play/bg_number.png"],
['bg_right', "assets/play/bg_right.png"],
['bg_star', "assets/play/bg_star.png"],
['bg_wrong', "assets/play/bg_wrong.png"],
['bg_xuanxiang1', "assets/play/bg_xuanxiang1.png"],
['bg_xuanxiang2', "assets/play/bg_xuanxiang2.png"],
['btn_fanye', "assets/play/btn_fanye.png"],
['btn_laba1', "assets/play/btn_laba1.png"],
['btn_laba2', "assets/play/btn_laba2.png"],
['btn_laba3', "assets/play/btn_laba3.png"],
['btn_laba4', "assets/play/btn_laba4.png"],
['btn_last', "assets/play/btn_last.png"],
['btn_next', "assets/play/btn_next.png"],
['btn_ti', "assets/play/btn_ti.png"],
['icon_star1', "assets/play/icon_star1.png"],
['icon_star2', "assets/play/icon_star2.png"],
['icon_tiright', "assets/play/icon_tiright.png"],
['icon_tiwrong', "assets/play/icon_tiwrong.png"],
['icon_right', "assets/play/icon_right.png"],
['petal_1', "assets/play/petal_1.png"],
['petal_2', "assets/play/petal_2.png"],
['petal_3', "assets/play/petal_3.png"],
['petal_4', "assets/play/petal_4.png"],
['petal_5', "assets/play/petal_5.png"],
['petal_6', "assets/play/petal_6.png"],
['petal_7', "assets/play/petal_7.png"],
['petal_8', "assets/play/petal_8.png"],
]; ];
...@@ -12,7 +50,11 @@ const res = [ ...@@ -12,7 +50,11 @@ const res = [
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['click', "assets/play/music/click.mp3"],
['arrow', "assets/play/music/arrow.mp3"],
['celebrate', "assets/play/music/celebrate.mp3"],
['right', "assets/play/music/right.mp3"],
['switch', "assets/play/music/switch.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
]; ];
export {res, resAudio}; export {res, resAudio};
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