Commit d8d8e21a authored by Chen Jiping's avatar Chen Jiping

完善

parent 825a5dc2
...@@ -7,6 +7,7 @@ import { ...@@ -7,6 +7,7 @@ import {
rotateItem, rotateItem,
tweenChange, tweenChange,
removeItemFromArr, removeItemFromArr,
angleToRadian,
getPosByAngle getPosByAngle
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import {res, resAudio} from './resources';
...@@ -72,15 +73,34 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -72,15 +73,34 @@ export class PlayComponent implements OnInit, OnDestroy {
//转盘 //转盘
rotaryTable; rotaryTable;
times = 0; //转盘2
rotaryTable2;
//阴影
shadows = [];
//旋转阴影
rotate_shadow_pic;
//选中阴影
choic_shadow_pic;
//发光
light_pic;
multiple = 2;
temp_multiple = 0;
//卡片半径 //卡片半径
cardOuterR = 90; cardOuterR = 90;
//卡片内半径 //卡片内半径
cardInerR = 65; cardInerR = 80;
maxWidth = 450;
initRotaryTableScale = 0.7; initRotaryTableScale = 0.1;
first = true; first = true;
...@@ -114,7 +134,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -114,7 +134,7 @@ export class PlayComponent implements OnInit, OnDestroy {
if (data && typeof data == 'object') { if (data && typeof data == 'object') {
this.data = data; this.data = data;
} }
// console.log('data:' , data); console.log('data:' , data);
// 初始化 各事件监听 // 初始化 各事件监听
this.initListener(); this.initListener();
...@@ -157,8 +177,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -157,8 +177,15 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initView(); this.initView();
this.playAudio('begin', false, ()=>{ this.playAudio('begin', false, ()=>{
this.canTouch = true; //this.canTouch = true;
}); });
/*
const audio = this.audioObj['begin'];
let duration = audio.duration * 1000;
setTimeout(() => {
this.canTouch = true;
}, duration);
*/
} }
initCtx() { initCtx() {
...@@ -477,10 +504,46 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -477,10 +504,46 @@ export class PlayComponent implements OnInit, OnDestroy {
initDefaultData() { initDefaultData() {
if(!this.data.exercises){ if(!this.data.exercises){
this.data.exercises = []; this.data.exercises = [];
let exercises = {contents:[]};
for(let i = 0; i < 5; ++ i){
let contentItem;
if(i % 2 == 0){
contentItem = this.getDefaultContentItem('', 'assets/play/lion.png');
} }
else if(i % 3 == 0){
contentItem = this.getDefaultContentItem('', 'assets/play/monkey.png');
}
else{
contentItem = this.getDefaultContentItem('Lion', null);
} }
console.log(contentItem);
exercises.contents.push(contentItem);
this.data.exercises.push(exercises);
}
}
}
/**
*
* @param text
* @param pic_url
*/
getDefaultContentItem(text, pic_url){
let content = {
val:text,
pic_url:pic_url,
audio_url:this.rawAudios.get('click')
}
return content;
}
/** /**
* 添加预加载图片 * 添加预加载图片
...@@ -540,9 +603,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -540,9 +603,9 @@ export class PlayComponent implements OnInit, OnDestroy {
const s = Math.min(sx, sy); const s = Math.min(sx, sy);
this.mapScale = s; this.mapScale = s;
this.cardOuterR = 90; this.cardOuterR = 90 * this.mapScale;
this.cardInerR = 80; this.cardInerR = 80 * this.mapScale;
this.renderArr = []; this.renderArr = [];
...@@ -552,11 +615,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -552,11 +615,16 @@ export class PlayComponent implements OnInit, OnDestroy {
this.curContents = []; this.curContents = [];
this.times = 0;
this.initRotaryTableScale = this.initRotaryTableScale * this.mapScale; this.initRotaryTableScale = this.initRotaryTableScale * this.mapScale;
this.maxWidth = this.maxWidth * this.mapScale;
this.curContent = {}; this.curContent = {};
this.shadows = [];
//产生转速倍数
this.temp_multiple = this.multiple * (1 + Math.random());
} }
...@@ -595,7 +663,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -595,7 +663,7 @@ export class PlayComponent implements OnInit, OnDestroy {
btn_go_val.refreshSize(); btn_go_val.refreshSize();
btn_go_val.x = - btn_go_val.getBoundingBox().width/2; btn_go_val.x = - btn_go_val.width/2;
this.btn_go.addChild(btn_go_val); this.btn_go.addChild(btn_go_val);
...@@ -621,28 +689,87 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -621,28 +689,87 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化转盘 * 初始化转盘
*/ */
initRotaryTable(){ initRotaryTable(){
const light_pic = new MySprite();
light_pic.init(this.images.get('light'));
light_pic.alpha = 0;
light_pic.x = this.canvasWidth/2;
light_pic.y = this.canvasHeight/2;
light_pic.setScaleXY(this.mapScale);
this.light_pic = light_pic;
this.renderArr.push(light_pic);
let rotaryTable = new ShapeCircle(); let rotaryTable = new ShapeCircle();
rotaryTable.setRadius(this.canvasHeight * 0.35); rotaryTable.setRadius(150 * this.mapScale);
rotaryTable.x = this.canvasWidth/2; rotaryTable.x = this.canvasWidth/2;
rotaryTable.y = this.canvasHeight/2; rotaryTable.y = this.canvasHeight/2;
rotaryTable.alpha = 0; rotaryTable.alpha = 0;
this.renderArr.push(rotaryTable);
this.rotaryTable = rotaryTable; this.rotaryTable = rotaryTable;
let rotaryTable2 = new ShapeCircle();
rotaryTable2.setRadius(150 * this.mapScale);
rotaryTable2.x = this.canvasWidth/2;
rotaryTable2.y = this.canvasHeight/2;
rotaryTable2.alpha = 0;
this.rotaryTable2 = rotaryTable2;
const rotate_shadow_pic = new MySprite();
rotate_shadow_pic.init(this.images.get('rotate_shadow'));
rotate_shadow_pic.alpha = 0;
rotate_shadow_pic.x = 0;
rotate_shadow_pic.y = rotaryTable2.height/2 + this.cardOuterR;
this.rotate_shadow_pic = rotate_shadow_pic;
rotaryTable2.addChild(rotate_shadow_pic);
const choic_shadow_pic = new MySprite();
choic_shadow_pic.init(this.images.get('choice_shadow'));
choic_shadow_pic.alpha = 0;
choic_shadow_pic.x = 0;
choic_shadow_pic.y = rotaryTable2.height/2 + this.cardOuterR;
choic_shadow_pic.setScaleXY(0);
this.choic_shadow_pic = choic_shadow_pic;
rotaryTable2.addChild(choic_shadow_pic);
this.initExercises(); this.initExercises();
rotaryTable.setScaleXY(this.initRotaryTableScale); this.renderArr.push(rotaryTable2);
this.renderArr.push(rotaryTable);
setTimeout(() => { setTimeout(() => {
for(let i = 0; i < this.curContents.length; ++ i){
let content = this.curContents[i];
//由小变大 //由小变大
tweenChange(rotaryTable, {scaleX:this.mapScale, scaleY:this.mapScale}, 0.5, ()=>{ tweenChange(content.card, {scaleX:content.initScale, scaleY:content.initScale}, 0.5, ()=>{
this.canTouch = true;
}); });
}
for(let i = 0; i < this.shadows.length; ++ i){
let shadow = this.shadows[i];
let scale = shadow.scale;
tweenChange(shadow.pic, {scaleX:scale, scaleY:scale}, 0.5, ()=>{
this.canTouch = true;
});
}
}, 500); }, 500);
} }
initExercises(){ initExercises(){
...@@ -663,9 +790,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -663,9 +790,9 @@ export class PlayComponent implements OnInit, OnDestroy {
let content = this.curExercises.contents[i]; let content = this.curExercises.contents[i];
let tContent = {card:null,audio_url:null}; let tContent = {card:null,audio_url:null, card_show:null, card_choice:null};
let contentCard = this.getContentCard(content); let contentCard = this.getContentCard(content, tContent);
this.rotaryTable.addChild(contentCard); this.rotaryTable.addChild(contentCard);
...@@ -681,7 +808,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -681,7 +808,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
//卡片半径 //卡片半径
let card_r = this.cardOuterR * this.mapScale; let card_r = this.cardOuterR;
//圆盘半径 //圆盘半径
let rotaryTable_r = this.rotaryTable.getBoundingBox().width/2; let rotaryTable_r = this.rotaryTable.getBoundingBox().width/2;
...@@ -689,32 +816,32 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -689,32 +816,32 @@ export class PlayComponent implements OnInit, OnDestroy {
//间隔角度 //间隔角度
let interval_angle = Math.floor(360/this.curContents.length); let interval_angle = Math.floor(360/this.curContents.length);
//console.log('interval_angle', interval_angle);
let max_radian = angleToRadian(interval_angle/4);
//计算卡片最大半径
let max_radius = 2 * Math.sin(max_radian) * rotaryTable_r - 10;
//console.log('sin', Math.sin(max_radian));
//console.log('max radius', max_radius);
//获取角度对应的弧长 //获取角度对应的弧长
let arc_length = this.rotaryTable.getBoundingBox().width * Math.PI/this.curContents.length; let arc_length = this.rotaryTable.getBoundingBox().width * Math.PI/this.curContents.length;
console.log('arc length', arc_length); //console.log('arc length', arc_length);
let scale = this.mapScale; let scale = this.mapScale;
let interval = 0;
if(this.curContents.length > 6){
interval = 100;
}
else{
interval = 110;
}
//如果弧长小于卡片直径,则缩小卡片半径 //如果弧长小于卡片直径,则缩小卡片半径
if((arc_length - interval) < card_r * 2){ if(max_radius < card_r){
scale = (arc_length - interval) / (2 * card_r); scale = max_radius / card_r;
console.log('new scale:',scale ); console.log('new scale:',scale );
} }
console.log('new scale:',scale );
let start_angle = 0; let start_angle = 0;
//计算坐标 //计算坐标
...@@ -722,7 +849,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -722,7 +849,7 @@ export class PlayComponent implements OnInit, OnDestroy {
let content = this.curContents[i]; let content = this.curContents[i];
let pos = getPosByAngle(start_angle, (rotaryTable_r - card_r) * this.mapScale); let pos = getPosByAngle(start_angle, rotaryTable_r);
content.card.x = pos.x; content.card.x = pos.x;
...@@ -730,6 +857,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -730,6 +857,9 @@ export class PlayComponent implements OnInit, OnDestroy {
content.card.setScaleXY(scale); content.card.setScaleXY(scale);
this.setShadow(content.card);
//记录初始x坐标 //记录初始x坐标
content.initX = pos.x; content.initX = pos.x;
...@@ -738,7 +868,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -738,7 +868,13 @@ export class PlayComponent implements OnInit, OnDestroy {
content.initScale = scale; content.initScale = scale;
content.startAngle = start_angle;
content.tableR = rotaryTable_r;
start_angle = start_angle + interval_angle; start_angle = start_angle + interval_angle;
content.card.setScaleXY(this.initRotaryTableScale);
} }
} }
...@@ -746,14 +882,49 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -746,14 +882,49 @@ export class PlayComponent implements OnInit, OnDestroy {
* 获取卡片 * 获取卡片
* @param content 练习题内容 * @param content 练习题内容
*/ */
getContentCard(content){ getContentCard(content, contentObj){
const card_bg = new ShapeCircle();
card_bg.setRadius(this.cardOuterR);
card_bg.alpha = 0;
let card_scacle = 0;
const contentCard = new MySprite(); const contentCard = new MySprite();
{
//卡片
contentCard.init(this.images.get('card-3x'));
card_bg.addChild(contentCard);
let w = contentCard.width;
card_scacle = card_bg.width / w;
contentCard.setScaleXY(card_scacle);
contentObj.card_show = contentCard;
}
const choiceCard = new MySprite();
{
//卡片 //卡片
contentCard.init(this.images.get('card')); choiceCard.init(this.images.get('choice_card'));
choiceCard.alpha = 0;
card_bg.addChild(choiceCard);
choiceCard.setScaleXY(card_scacle);
contentObj.card_choice = choiceCard;
}
contentCard.setScaleXY(this.mapScale);
//图片存在,则渲染图片 //图片存在,则渲染图片
if(content.pic_url){ if(content.pic_url){
...@@ -765,13 +936,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -765,13 +936,15 @@ export class PlayComponent implements OnInit, OnDestroy {
let h = content_pic.height; let h = content_pic.height;
let r = Math.sqrt( w * w + h * h)/2; let d = Math.sqrt( w * w + h * h);
content_pic.setScaleXY(this.cardInerR / r); content_pic.setScaleXY((contentCard.width - 60) / d);
content_pic.x = 0; content_pic.x = 0;
content_pic.y = 0; content_pic.y = 0;
contentCard.addChild(content_pic); contentCard.addChild(content_pic);
choiceCard.addChild(content_pic);
} }
else{ else{
let content_val = new Label(); let content_val = new Label();
...@@ -783,89 +956,163 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -783,89 +956,163 @@ export class PlayComponent implements OnInit, OnDestroy {
content_val.refreshSize(); content_val.refreshSize();
this.setFontSize(contentCard.width, content_val); this.setFontSize(contentCard.width - 60, content_val);
content_val.refreshSize(); content_val.refreshSize();
content_val.x = - content_val.getBoundingBox().width/2; content_val.x = - content_val.getBoundingBox().width/2;
contentCard.addChild(content_val); contentCard.addChild(content_val);
choiceCard.addChild(content_val);
} }
contentCard.childDepandAlpha = true; contentCard.childDepandAlpha = true;
return contentCard; choiceCard.childDepandAlpha = false;
return card_bg;
} }
setFontSize(parWidth, contentVal: Label){ setFontSize(parWidth, label: Label){
if(!contentVal){ if(!label){
return; return;
} }
let changed = false; let w = label.width;
let h = label.height;
let w = contentVal.width; let r = Math.sqrt( w * w + h * h)/2;
let h = contentVal.height; //如果宽度超过,则缩小字体
if(r > parWidth/2){
this.shrinkFont(parWidth, label);
}
else{
this.magnifyingFontSize(parWidth, label);
}
}
shrinkFont(parWidth, label: Label){
if(!label){
return;
}
let w = label.width;
let h = label.height;
let r = Math.sqrt( w * w + h * h)/2; let r = Math.sqrt( w * w + h * h)/2;
//如果宽度超过,则缩小字体 //如果宽度超过,则缩小字体
if(r > (parWidth - 40)/2){ if(r > parWidth/2){
let fontSize = contentVal.fontSize; let fontSize = label.fontSize;
fontSize = fontSize - 2; fontSize = fontSize - 2;
contentVal.fontSize = fontSize; label.fontSize = fontSize;
contentVal.refreshSize();
label.refreshSize();
this.setFontSize(parWidth, contentVal);
changed = true; this.shrinkFont(parWidth, label);
} }
return changed;
} }
magnifyingFontSize(parWidth, contentVal: Label){ magnifyingFontSize(parWidth, label: Label){
if(!contentVal){ if(!label){
return; return;
} }
let changed = false; let w = label.width;
let w = contentVal.width;
let h = contentVal.height; let h = label.height;
let r = Math.sqrt( w * w + h * h)/2; let r = Math.sqrt( w * w + h * h)/2;
//如果宽度超过,则缩小字体 //如果宽度超过,则缩小字体
if(r < (parWidth - 40)/2){ if(r < parWidth/2){
let fontSize = contentVal.fontSize; let fontSize = label.fontSize;
fontSize = fontSize + 2; fontSize = fontSize + 2;
contentVal.fontSize = fontSize; label.fontSize = fontSize;
label.refreshSize();
this.setFontSize(parWidth, label);
}
}
/**
* 设置阴影
* @param itemPic
*/
setShadow(itemPic){
if(!itemPic){
return;
}
let y = itemPic.y;
console.log('card ', itemPic);
contentVal.refreshSize(); //设置阴影
if(y > -30){
const shadow_pic = new MySprite();
shadow_pic.init(this.images.get('shadow'));
this.setFontSize(parWidth, contentVal);
changed = true; shadow_pic.x = itemPic.x;
shadow_pic.y = itemPic.y + itemPic.getBoundingBox().height/2;
this.rotaryTable2.addChild(shadow_pic);
let scale = itemPic.getBoundingBox().width/shadow_pic.width;
shadow_pic.setScaleXY(this.initRotaryTableScale);
this.shadows.push({pic:shadow_pic, scale:scale});
}
} }
return changed;
/**
* 设置阴影
* @param itemPic
*/
setShadow2(x, y, w, h){
//设置阴影
if(y > -30){
const shadow_pic = new MySprite();
shadow_pic.init(this.images.get('shadow'));
shadow_pic.x = x
shadow_pic.y = y + h/2;
this.rotaryTable2.addChild(shadow_pic);
let scale = w/shadow_pic.width;
shadow_pic.setScaleXY(scale);
this.shadows.push({pic:shadow_pic, scale:scale});
}
} }
mapDown(event) { mapDown(event) {
...@@ -879,7 +1126,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -879,7 +1126,7 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
if(this.curContent){ if(this.curContent && this.curContent.card){
if(this.checkClickTarget(this.curContent.card)){ if(this.checkClickTarget(this.curContent.card)){
this.playAudio(this.curContent.audio_url); this.playAudio(this.curContent.audio_url);
...@@ -916,34 +1163,65 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -916,34 +1163,65 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
resetGame(){
initGame(){ this.rotate_shadow_pic.alpha = 0;
this.playingStatus = true; this.choic_shadow_pic.alpha = 0;
this.choic_shadow_pic.setScaleXY(0);
if(this.first){ //产生转速倍数
this.temp_multiple = this.multiple * (1 + Math.random());
this.first = false; //当前内容存在,则旋转回去
this.playGame(); if(this.curContent){
//旋转
let card_rotation = this.curContent.card.rotation;
let residue_rotation = card_rotation % 360;
rotateItem(this.curContent.card, 360 - residue_rotation, 0.5, ()=>{
this.curContent.card.rotation = 0;
});
//由大变小
tweenChange(this.curContent.card, {scaleX:this.initRotaryTableScale, scaleY:this.initRotaryTableScale}, 0.5);
//回到原始位置
tweenChange(this.curContent.card, {x:this.curContent.initX, y:this.curContent.initY}, 0.5, ()=>{
reset();
});
} }
else{
this.rotaryTable.setScaleXY(this.initRotaryTableScale);
const reset = () =>{
this.pauseAudio(this.curContent.audio_url); this.pauseAudio(this.curContent.audio_url);
//重置旋转角度
this.rotaryTable.rotation = 0;
//重置音频 //重置音频
const audio = this.audioObj[this.curContent.audio_url]; const audio = this.audioObj[this.curContent.audio_url];
if(audio){ if(audio){
audio.currentTime = 0; audio.currentTime = 0;
} }
//显示阴影
for(let i = 0; i < this.shadows.length; ++i){
this.shadows[i].alpha = 1;
}
this.light_pic.alpha = 0;
//卡片恢复原状 //卡片恢复原状
for(let i = 0; i < this.curContents.length; ++ i){ for(let i = 0; i < this.curContents.length; ++ i){
let t_content = this.curContents[i]; let t_content = this.curContents[i];
//旋转角度重置
t_content.card.rotation = 0;
t_content.card.alpha = 1; t_content.card.alpha = 1;
t_content.card.x = t_content.initX; t_content.card.x = t_content.initX;
...@@ -951,14 +1229,56 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -951,14 +1229,56 @@ export class PlayComponent implements OnInit, OnDestroy {
t_content.card.y = t_content.initY; t_content.card.y = t_content.initY;
//设置初始大小 //设置初始大小
t_content.card.setScaleXY(t_content.initScale); t_content.card.setScaleXY(this.initRotaryTableScale);
}
//阴影恢复原状
for(let i = 0; i < this.shadows.length; ++ i){
this.rotaryTable2.removeChild(this.shadows[i].pic);
}
this.shadows = [];
}
}
initGame(){
this.playingStatus = true;
if(this.first){
this.first = false;
this.playGame();
} }
else{
this.resetGame();
for(let i = 0; i < this.curContents.length; ++ i){
let content = this.curContents[i];
//由小变大 //由小变大
tweenChange(this.rotaryTable, {scaleX:this.mapScale, scaleY:this.mapScale}, 0.5, ()=>{ tweenChange(content.card, {scaleX:content.initScale, scaleY:content.initScale}, 0.5, ()=>{
if(i == this.curContents.length - 1){
this.canTouch = true;
this.playGame(); this.playGame();
}
}); });
}
for(let i = 0; i < this.shadows.length; ++ i){
let shadow = this.shadows[i];
let scale = shadow.scale;
tweenChange(shadow.pic, {scaleX:scale, scaleY:scale}, 0.5);
}
} }
} }
...@@ -966,39 +1286,113 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -966,39 +1286,113 @@ export class PlayComponent implements OnInit, OnDestroy {
playGame(){ playGame(){
this.playAudio('playing', false, ()=>{ this.playAudio('playing', false, ()=>{
this.setBtnGoText("GO");
}); });
this.setBtnGoText("···"); this.setBtnGoText("· · ·");
//音频长度 //音频长度
const audio = this.audioObj['playing']; const audio = this.audioObj['playing'];
let duration = Math.ceil(audio.duration); let duration = Math.ceil(audio.duration);
this.times = this.times + 1; let angle = duration * 20 * this.temp_multiple;
let angle = duration * 360; //隐藏小卡片阴影
for(let i = 0; i < this.shadows.length; ++i){
this.shadows[i].pic.alpha = 0;
rotateItem(this.rotaryTable, angle, duration,()=>{ }
//显示旋转阴影
this.rotate_shadow_pic.alpha = 1;
this.rotate(this.rotaryTable, angle, duration, ()=>{
this.rotate_shadow_pic.alpha = 0;
//设置阴影
for(let i = 0; i < this.curContents.length; ++ i){
let content = this.curContents[i];
//this.setShadow(content.card);
//console.log('content startAngle', content.startAngle);
//转动角度
let rotation = this.rotaryTable.rotation;
let newStartAngle = rotation + content.startAngle + 180;
console.log('rotation', rotation,'content startAngle', content.startAngle, 'new content startAngle', newStartAngle);
let pos = getPosByAngle(newStartAngle, content.tableR);
//console.log('old x', content.initX, 'old y', content.initY);
//console.log('pos', pos);
this.setShadow2(pos.x, pos.y, content.card.getBoundingBox().width, content.card.getBoundingBox().height);
}
//显示阴影
for(let i = 0; i < this.shadows.length; ++ i){
let shadow = this.shadows[i];
shadow.pic.setScaleXY(shadow.scale);
}
this.curContent = this.getRandomItemFromArr(this.curContents);
this.curContent.card_choice.alpha = 1;
//this.curContent.card_show.alpha = 0;
this.playAudio('stop', false, ()=>{
this.curContent.card_choice.alpha = 0;
//this.curContent.card_show.alpha = 1;
this.playAudio('stop');
//抽取卡片 //抽取卡片
this.drawCard(); this.drawCard();
});
this.playingStatus = false;
//重置旋转角度
this.rotaryTable.rotation = 0; })
//console.log('this.rotaryTable:', this.rotaryTable);
}
rotate(item, angle, duration, callback = null, easying = null){
//console.log('duration', duration);
if(duration <= 0){
if(callback){
callback();
}
return;
}
let t_angle = angle % 360;
item.rotation = t_angle;
t_angle = t_angle + duration * 20 * this.temp_multiple;
rotateItem(item, t_angle, 0.2,()=>{
this.rotate(item, t_angle, duration - 0.2, callback);
}); });
} }
/** /**
* 抽取卡片 * 抽取卡片
*/ */
drawCard(){ drawCard(){
this.curContent = this.getRandomItemFromArr(this.curContents);
this.playAudio('pop-up'); this.playAudio('pop-up');
...@@ -1015,14 +1409,18 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1015,14 +1409,18 @@ export class PlayComponent implements OnInit, OnDestroy {
let scaleX = this.curContent.card.scaleX; let scaleX = this.curContent.card.scaleX;
let scale = this.rotaryTable.getBoundingBox().width/this.curContent.card.width; let scale = this.maxWidth/this.curContent.card.width;
console.log('rotaryTable rotation', this.rotaryTable.rotation);
//由小变大 //由小变大
tweenChange(this.curContent.card, {scaleX:scale, scaleY:scale}, 0.5, ()=>{ tweenChange(this.curContent.card, {scaleX:scale, scaleY:scale}, 0.5, ()=>{
//console.log('children',this.curContent.card.children);
//隐藏阴影
for(let i = 0; i < this.shadows.length; ++i){
this.shadows[i].pic.alpha = 0;
}
//隐藏其它的卡片 //隐藏其它的卡片
for(let i = 0; i < this.curContents.length; ++ i){ for(let i = 0; i < this.curContents.length; ++ i){
...@@ -1032,13 +1430,50 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1032,13 +1430,50 @@ export class PlayComponent implements OnInit, OnDestroy {
this.curContents[i].card.setScaleXY(0); this.curContents[i].card.setScaleXY(0);
} }
} }
//console.log('rotaryTable rotation', this.rotaryTable.rotation);
console.log('cur card rotation', this.curContent.card.rotation);
}); });
this.choic_shadow_pic.alpha = 1;
tweenChange(this.choic_shadow_pic, {scaleX:this.mapScale, scaleY:this.mapScale}, 0.5);
//移动新位置 //移动新位置
tweenChange(this.curContent.card,{x:0,y:0},0.5); tweenChange(this.curContent.card,{x:0,y:0},0.5, ()=>{
this.light_pic.alpha = 1;
this.rotateLight();
this.playingStatus = false;
this.setBtnGoText("GO");
});
//旋转
let table_rotation = this.rotaryTable.rotation;
let residue_rotation = table_rotation % 360;
rotateItem(this.curContent.card, 360 - residue_rotation, 0.5);
}
/**
* 灯光旋转
*/
rotateLight(){
rotateItem(this.light_pic, 360, 10,()=>{
this.light_pic.rotation = 0.036;
if(!this.playingStatus){
this.rotateLight();
} }
});
}
getRandomItemFromArr(arr){ getRandomItemFromArr(arr){
...@@ -1056,6 +1491,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1056,6 +1491,6 @@ export class PlayComponent implements OnInit, OnDestroy {
setBtnGoText(text){ setBtnGoText(text){
this.btn_go_val.text = text; this.btn_go_val.text = text;
this.btn_go_val.refreshSize(); this.btn_go_val.refreshSize();
this.btn_go_val.x = -this.btn_go_val.getBoundingBox().width/2; this.btn_go_val.x = -this.btn_go_val.width/2;
} }
} }
const res = [ const res = [
['lion', "assets/play/lion.png"],
['monkey', "assets/play/monkey.png"],
['bg', "assets/play/bg.png"], ['bg', "assets/play/bg.png"],
['btn_go', "assets/play/btn_go.png"], ['btn_go', "assets/play/btn_go.png"],
['card', "assets/play/card.png"], ['card', "assets/play/card.png"],
['card-3x', "assets/play/card@3x.png"] ['card-3x', "assets/play/card@3x.png"],
['choice_card', "assets/play/choice_card.png"],
['light', "assets/play/light.png"],
['shadow', "assets/play/shadow.png"],
['choice_shadow', "assets/play/choice_shadow.png"],
['rotate_shadow', "assets/play/rotate_shadow.png"]
]; ];
......
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