Commit d8d8e21a authored by Chen Jiping's avatar Chen Jiping

完善

parent 825a5dc2
......@@ -7,6 +7,7 @@ import {
rotateItem,
tweenChange,
removeItemFromArr,
angleToRadian,
getPosByAngle
} from './Unit';
import {res, resAudio} from './resources';
......@@ -72,15 +73,34 @@ export class PlayComponent implements OnInit, OnDestroy {
//转盘
rotaryTable;
times = 0;
//转盘2
rotaryTable2;
//阴影
shadows = [];
//旋转阴影
rotate_shadow_pic;
//选中阴影
choic_shadow_pic;
//发光
light_pic;
multiple = 2;
temp_multiple = 0;
//卡片半径
cardOuterR = 90;
//卡片内半径
cardInerR = 65;
cardInerR = 80;
maxWidth = 450;
initRotaryTableScale = 0.7;
initRotaryTableScale = 0.1;
first = true;
......@@ -114,7 +134,7 @@ export class PlayComponent implements OnInit, OnDestroy {
if (data && typeof data == 'object') {
this.data = data;
}
// console.log('data:' , data);
console.log('data:' , data);
// 初始化 各事件监听
this.initListener();
......@@ -155,10 +175,17 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initCtx();
this.initData();
this.initView();
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() {
......@@ -408,7 +435,7 @@ export class PlayComponent implements OnInit, OnDestroy {
getWorlRect(target) {
let rect = target.getBoundingBox();
if (target.parent) {
const pRect = this.getWorlRect(target.parent);
......@@ -477,10 +504,46 @@ export class PlayComponent implements OnInit, OnDestroy {
initDefaultData() {
if(!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 {
const s = Math.min(sx, sy);
this.mapScale = s;
this.cardOuterR = 90;
this.cardOuterR = 90 * this.mapScale;
this.cardInerR = 80;
this.cardInerR = 80 * this.mapScale;
this.renderArr = [];
......@@ -552,11 +615,16 @@ export class PlayComponent implements OnInit, OnDestroy {
this.curContents = [];
this.times = 0;
this.initRotaryTableScale = this.initRotaryTableScale * this.mapScale;
this.maxWidth = this.maxWidth * this.mapScale;
this.curContent = {};
this.shadows = [];
//产生转速倍数
this.temp_multiple = this.multiple * (1 + Math.random());
}
......@@ -595,7 +663,7 @@ export class PlayComponent implements OnInit, OnDestroy {
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);
......@@ -621,28 +689,87 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化转盘
*/
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();
rotaryTable.setRadius(this.canvasHeight * 0.35);
rotaryTable.setRadius(150 * this.mapScale);
rotaryTable.x = this.canvasWidth/2;
rotaryTable.y = this.canvasHeight/2;
rotaryTable.alpha = 0;
this.renderArr.push(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();
rotaryTable.setScaleXY(this.initRotaryTableScale);
this.renderArr.push(rotaryTable2);
this.renderArr.push(rotaryTable);
setTimeout(() => {
//由小变大
tweenChange(rotaryTable, {scaleX:this.mapScale, scaleY:this.mapScale}, 0.5, ()=>{
});
for(let i = 0; i < this.curContents.length; ++ i){
let content = this.curContents[i];
//由小变大
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);
}
initExercises(){
......@@ -663,9 +790,9 @@ export class PlayComponent implements OnInit, OnDestroy {
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);
......@@ -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;
......@@ -689,32 +816,32 @@ export class PlayComponent implements OnInit, OnDestroy {
//间隔角度
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;
console.log('arc length', arc_length);
//console.log('arc length', arc_length);
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 );
let start_angle = 0;
//计算坐标
......@@ -722,7 +849,7 @@ export class PlayComponent implements OnInit, OnDestroy {
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;
......@@ -730,6 +857,9 @@ export class PlayComponent implements OnInit, OnDestroy {
content.card.setScaleXY(scale);
this.setShadow(content.card);
//记录初始x坐标
content.initX = pos.x;
......@@ -738,7 +868,13 @@ export class PlayComponent implements OnInit, OnDestroy {
content.initScale = scale;
content.startAngle = start_angle;
content.tableR = rotaryTable_r;
start_angle = start_angle + interval_angle;
content.card.setScaleXY(this.initRotaryTableScale);
}
}
......@@ -746,15 +882,50 @@ export class PlayComponent implements OnInit, OnDestroy {
* 获取卡片
* @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();
{
//卡片
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();
{
//卡片
choiceCard.init(this.images.get('choice_card'));
//卡片
contentCard.init(this.images.get('card'));
choiceCard.alpha = 0;
card_bg.addChild(choiceCard);
contentCard.setScaleXY(this.mapScale);
choiceCard.setScaleXY(card_scacle);
contentObj.card_choice = choiceCard;
}
//图片存在,则渲染图片
if(content.pic_url){
......@@ -765,13 +936,15 @@ export class PlayComponent implements OnInit, OnDestroy {
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.y = 0;
contentCard.addChild(content_pic);
choiceCard.addChild(content_pic);
}
else{
let content_val = new Label();
......@@ -783,89 +956,163 @@ export class PlayComponent implements OnInit, OnDestroy {
content_val.refreshSize();
this.setFontSize(contentCard.width, content_val);
this.setFontSize(contentCard.width - 60, content_val);
content_val.refreshSize();
content_val.x = - content_val.getBoundingBox().width/2;
contentCard.addChild(content_val);
choiceCard.addChild(content_val);
}
contentCard.childDepandAlpha = true;
return contentCard;
choiceCard.childDepandAlpha = false;
return card_bg;
}
setFontSize(parWidth, contentVal: Label){
setFontSize(parWidth, label: Label){
if(!contentVal){
if(!label){
return;
}
let changed = false;
let w = label.width;
let h = label.height;
let r = Math.sqrt( w * w + h * h)/2;
//如果宽度超过,则缩小字体
if(r > parWidth/2){
this.shrinkFont(parWidth, label);
}
else{
this.magnifyingFontSize(parWidth, label);
}
}
shrinkFont(parWidth, label: Label){
if(!label){
return;
}
let w = contentVal.width;
let w = label.width;
let h = contentVal.height;
let h = label.height;
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;
contentVal.fontSize = fontSize;
contentVal.refreshSize();
label.fontSize = fontSize;
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;
}
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;
//如果宽度超过,则缩小字体
if(r < (parWidth - 40)/2){
if(r < parWidth/2){
let fontSize = contentVal.fontSize;
let fontSize = label.fontSize;
fontSize = fontSize + 2;
contentVal.fontSize = fontSize;
label.fontSize = fontSize;
contentVal.refreshSize();
label.refreshSize();
this.setFontSize(parWidth, contentVal);
this.setFontSize(parWidth, label);
}
}
changed = true;
/**
* 设置阴影
* @param itemPic
*/
setShadow(itemPic){
if(!itemPic){
return;
}
return changed;
let y = itemPic.y;
console.log('card ', itemPic);
//设置阴影
if(y > -30){
const shadow_pic = new MySprite();
shadow_pic.init(this.images.get('shadow'));
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});
}
}
/**
* 设置阴影
* @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) {
......@@ -879,7 +1126,7 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
if(this.curContent){
if(this.curContent && this.curContent.card){
if(this.checkClickTarget(this.curContent.card)){
this.playAudio(this.curContent.audio_url);
......@@ -916,89 +1163,236 @@ export class PlayComponent implements OnInit, OnDestroy {
}
resetGame(){
this.rotate_shadow_pic.alpha = 0;
initGame(){
this.choic_shadow_pic.alpha = 0;
this.playingStatus = true;
this.choic_shadow_pic.setScaleXY(0);
//产生转速倍数
this.temp_multiple = this.multiple * (1 + Math.random());
if(this.first){
//当前内容存在,则旋转回去
if(this.curContent){
//旋转
let card_rotation = this.curContent.card.rotation;
this.first = false;
this.playGame();
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.rotaryTable.rotation = 0;
//重置音频
const audio = this.audioObj[this.curContent.audio_url];
if(audio){
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){
let t_content = this.curContents[i];
//旋转角度重置
t_content.card.rotation = 0;
t_content.card.alpha = 1;
t_content.card.x = t_content.initX;
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(content.card, {scaleX:content.initScale, scaleY:content.initScale}, 0.5, ()=>{
if(i == this.curContents.length - 1){
this.canTouch = true;
this.playGame();
}
});
}
//由小变大
tweenChange(this.rotaryTable, {scaleX:this.mapScale, scaleY:this.mapScale}, 0.5, ()=>{
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);
}
}
}
playGame(){
this.playAudio('playing', false, ()=>{
this.setBtnGoText("GO");
});
this.setBtnGoText("···");
this.setBtnGoText("· · ·");
//音频长度
const audio = this.audioObj['playing'];
let duration = Math.ceil(audio.duration);
this.times = this.times + 1;
let angle = duration * 20 * this.temp_multiple;
//隐藏小卡片阴影
for(let i = 0; i < this.shadows.length; ++i){
this.shadows[i].pic.alpha = 0;
}
let angle = duration * 360;
//显示旋转阴影
this.rotate_shadow_pic.alpha = 1;
rotateItem(this.rotaryTable, angle, duration,()=>{
this.rotate(this.rotaryTable, angle, duration, ()=>{
this.playAudio('stop');
//抽取卡片
this.drawCard();
this.rotate_shadow_pic.alpha = 0;
this.playingStatus = false;
//设置阴影
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.drawCard();
});
})
}
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);
//重置旋转角度
this.rotaryTable.rotation = 0;
//console.log('this.rotaryTable:', this.rotaryTable);
});
}
/**
* 抽取卡片
*/
drawCard(){
this.curContent = this.getRandomItemFromArr(this.curContents);
this.playAudio('pop-up');
......@@ -1015,15 +1409,19 @@ export class PlayComponent implements OnInit, OnDestroy {
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, ()=>{
//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){
......@@ -1032,13 +1430,50 @@ export class PlayComponent implements OnInit, OnDestroy {
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){
......@@ -1056,6 +1491,6 @@ export class PlayComponent implements OnInit, OnDestroy {
setBtnGoText(text){
this.btn_go_val.text = text;
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 = [
['lion', "assets/play/lion.png"],
['monkey', "assets/play/monkey.png"],
['bg', "assets/play/bg.png"],
['btn_go', "assets/play/btn_go.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