Commit fda77d27 authored by 邵世尧's avatar 邵世尧

提交

parent d381f1ce
<div class="model-content"> <div class="model-content">
<div style="position: absolute;left: 100px;top:20px;width: 500px;"> <div style="position: absolute;left: 100px;top:20px;width: 500px;">
<nz-radio-group [(ngModel)]="side"> <nz-radio-group [(ngModel)]="side" (ngModelChange)="sidec()">
<label nz-radio nzValue="A"(click)="sideB()">默认背面</label> <label nz-radio nzValue="A">默认背面</label>
<label nz-radio nzValue="B"(click)="sideA()">默认正面</label> <label nz-radio nzValue="B">默认正面</label>
</nz-radio-group> </nz-radio-group>
<div *ngFor="let it of picArr; let i = index" class="card-item" style="padding: 0.5vw;"> <div *ngFor="let it of picArr; let i = index" class="card-item" style="padding: 0.5vw;">
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<div *ngIf="it.optionTypeA == 'A'" style="width: 60%"> <div *ngIf="it.optionTypeA == 'A'" style="width: 60%">
<input style="width: 80%; margin-bottom: 0.5vw" type="text" nz-input placeholder="" [(ngModel)]="it.title" (blur)="saveItem()"> <input style="width: 80%; margin-bottom: 0.5vw" type="text" nz-input placeholder="" [(ngModel)]="it.title" (blur)="save()">
</div> </div>
......
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core'; import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef, ViewChild, ElementRef} from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
...@@ -8,194 +9,162 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -8,194 +9,162 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
styleUrls: ['./form.component.css'] styleUrls: ['./form.component.css']
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
picArr = [];
_item: any;
saveKey = 'ssy003';
radioValue;
side
// @Input() // @Input()
set item(item) { item;
this._item = item; @ViewChild('videoContainer')
// this.init(); videoContainer: ElementRef;
@ViewChild('videoNode')
} videoNode: ElementRef;
get item() {
return this._item;
}
@Output() @Output()
update = new EventEmitter(); update = new EventEmitter();
intervalId;
picArr;
side
saveKey = 'ssy003';
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
constructor(private nzMessageService: NzMessageService,
private appRef: ApplicationRef,
public changeDetectorRef: ChangeDetectorRef) {
} }
ngOnInit() {
this.item = {}; ngOnChanges() {
this.item.contentObj = {};
}
ngOnInit() {
const getData = (<any> window).courseware.getData; const getData = (<any> window).courseware.getData;
getData((data) => { getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
} else { } else {
this.item = {}; this.item = {};
}
if ( !this.item.contentObj ) {
this.item.contentObj = {}; this.item.contentObj = {};
}
if(this.item.sideA==1){
this.side='B';
}
else if(this.item.sideB==1){
this.side='A';
} }
console.log('~data:', data);
this.initDefaultData();
console.log('data:', data);
this.init(); this.init();
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
this.refresh();
// this.initDefaultData();
this.refresh();
}, this.saveKey); }, this.saveKey);
// this.initData();
}
ngOnChanges() {
}
ngOnDestroy() {
} }
sidec(){
if(this.side=="A"){
this.item.sideA=0;
this.item.sideB=1;
}
if(this.side=="B"){
this.item.sideA=1;
this.item.sideB=0;
}
this.save();
}
initDefaultData() {
init() {
const picArr = this.item.contentObj.picArr;
if (!picArr) {
const picArr = [];
for (let i = 0; i < 6; i ++) {
picArr.push({
pic_url: '',
audio_url: '',
title:'',
sideA:'',
sideB:''
});
}
if (this.item.contentObj.picArr) { this.item.contentObj.picArr = picArr;
this.picArr = this.item.contentObj.picArr;
} else {
this.picArr = this.getDefaultPicArr();
this.item.contentObj.picArr = this.picArr;
} }
}
console.log('item:' , this.item);
// this.picArr = this.getDefaultPicArr();
// this.item.contentObj.picArr = this.picArr;
// console.log('this.item:;', this.picArr);
}
cardItemData(){ ngOnDestroy() {
return { console.log('in ngOnDestory');
title: "",
pic_url: "",
audio_url: ""
};
} }
sideA(){
this.item.sideA=1;
this.item.sideB=0;
this.picArr=[];
this.item.contentObj.picArr = this.picArr;
for(let i=0;i<6;i++){ init() {
let item = this.cardItemData();
this.picArr.push(item); this.picArr = this.item.contentObj.picArr || [];
}
this.saveItem();
}
sideB(){
this.item.sideB=1;
this.item.sideA=0;
this.picArr=[];
this.item.contentObj.picArr = this.picArr; this.item.contentObj.picArr = this.picArr;
for(let i=0;i<6;i++){
let item = this.cardItemData();
this.picArr.push(item);
}
this.saveItem();
console.log('init~data:', this.picArr);
} }
getDefaultPicArr() {
let arr = [];
return arr;
}
addItem6() {
this.picArr=[];
this.item.contentObj.picArr = this.picArr;
for(let i=0;i<6;i++){
let item = this.cardItemData();
this.picArr.push(item);
}
this.saveItem();
console.log('init~data:', this.picArr);
}
onImageUploadSuccessByItem(e, item, id = null) {
onImageUploadSuccessByItem(e, item) { if (id != null) {
item.pic_url = e.url; item[id + '_pic_url'] = e.url;
this.save(); } else {
} item.pic_url = e.url;
}
onAudioUploadSuccessByItem(e, item) {
item.audio_url = e.url;
this.save();
}
radioClick(it, radioValue) { this.save();
it.radioValue = radioValue; // this.update.emit(this.item);
this.saveItem(); // console.log('this.item: ', this.item);
} }
clickCheckBox() {
console.log(' in clickCheckBox');
this.saveItem();
}
saveItem() {
console.log(' in saveItem'); onAudioUploadSuccessByItem(e, item, id = null) {
if (id != null) {
item[id + '_audio_url'] = e.url;
} else {
item.audio_url = e.url;
}
// this.update.emit(this.item); // this.update.emit(this.item);
this.save(); this.save();
} }
save() { save() {
(<any> window).courseware.setData(this.item, null, this.saveKey); (<any> window).courseware.setData(this.item, null, this.saveKey);
console.log('side'+this.item);
this.refresh(); this.refresh();
} }
...@@ -203,8 +172,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -203,8 +172,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
setTimeout(() => { setTimeout(() => {
this.appRef.tick(); this.appRef.tick();
}, 1); }, 1);
console.log("===========================================================================================");
} }
} }
...@@ -28,7 +28,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -28,7 +28,6 @@ export class PlayComponent implements OnInit, OnDestroy {
// 数据 // 数据
data; data;
ctx; ctx;
canvasWidth = 1280; // canvas实际宽度 canvasWidth = 1280; // canvas实际宽度
...@@ -60,14 +59,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -60,14 +59,11 @@ export class PlayComponent implements OnInit, OnDestroy {
saveKey = 'ssy003'; saveKey = 'ssy003';
picIndex = 0; picIndex = 0;
cardArr = []; cardArr = [];
picArr picArr
canTouch =true;
canTouch = true;
curPic; curPic;
...@@ -130,9 +126,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -130,9 +126,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initCtx(); this.initCtx();
this.initData(); this.initData();
// this.randomItemCard();
this.initView(); this.initView();
console.log("qqqqqqqqqqqqqqqqqq");
} }
...@@ -577,6 +572,8 @@ initImg() { ...@@ -577,6 +572,8 @@ initImg() {
/** /**
* 初始化数据 * 初始化数据
*/ */
...@@ -600,7 +597,7 @@ initImg() { ...@@ -600,7 +597,7 @@ initImg() {
this.renderArr = []; this.renderArr = [];
if (!this.data.contentObj.picArr) { if (!this.data.contentObj.picArr) {
...@@ -629,9 +626,9 @@ initImg() { ...@@ -629,9 +626,9 @@ initImg() {
//声明骰子 //声明骰子
this.stouzi(); this.stouzi();
//骰子呼吸动画 //骰子呼吸动画
}
} a
a
big(){ big(){
const tween=tweenChange(this.tz, {scaleX: 1.1, scaleY: 1.1}, 1 , ()=>{ const tween=tweenChange(this.tz, {scaleX: 1.1, scaleY: 1.1}, 1 , ()=>{
...@@ -667,9 +664,12 @@ stouzi(){ ...@@ -667,9 +664,12 @@ stouzi(){
this.t.init(this.images.get("t1")); this.t.init(this.images.get("t1"));
this.startBorder.addChild(this.tz); // this.startBorder.addChild(this.tz);
this.tz.setScaleXY(this.mapScale/1.2); this.tz.setScaleXY(this.mapScale/1.2);
this.tz.y=-50; this.tz.y=this.canvasHeight/2.5;
this.tz.x=this.canvasWidth/2;
this.renderArr.push(this.tz);
} }
...@@ -690,12 +690,15 @@ startBtn(){ ...@@ -690,12 +690,15 @@ startBtn(){
this.Btn.addChild(this.stn); this.Btn.addChild(this.stn);
this.Btn.addChild(this.retn); this.Btn.addChild(this.retn);
this.startBorder.addChild(this.Btn); // this.startBorder.addChild(this.Btn);
this.stn.visible=true; this.stn.visible=true;
this.retn.visible=false; this.retn.visible=false;
this.Btn.setScaleXY(this.mapScale/1.5); this.Btn.setScaleXY(this.mapScale/1.5);
this.b=0; this.b=0;
this.Btn.y=200; this.Btn.y=this.canvasHeight/1.2;
this.Btn.x=this.canvasWidth/2;
this.renderArr.push(this.Btn);
...@@ -779,547 +782,558 @@ getPetal() { ...@@ -779,547 +782,558 @@ getPetal() {
bg bg
startBorder startBorder
bgLayer bgLayer
initBg() {
this.bgLayer = new MySprite();
this.renderArr.push(this.bgLayer);
const bg = new ShapeRect();
bg.fillColor = '#75d100';
bg.setSize(this.canvasWidth, this.canvasHeight);
this.renderArr.push(bg);
this.bg = bg;
//把图片填充入背景,全覆盖
this.startBorder = new MySprite();
this.startBorder.init(this.images.get('BG'));
this.startBorder.x = this.canvasWidth / 2 ;
this.startBorder.y = this.canvasHeight / 2 ;
const sx = this.canvasWidth / this.startBorder.width;
const sy = this.canvasHeight / this.startBorder.height;
const s=Math.max(sx,sy);
console.log(s+"s");
this.startBorder.setScaleXY(s);
this.renderArr.push(this.startBorder);
}
count=0;
active=1;
last
mapDown(event) {
//点击按钮,骰子竖直跳下来,卡片弹出来
if (this.checkClickTarget(this.stn)&&(this.b==0)) {
this.canTouch=false;
count=0;
this.big(); active=1;
this.startGame(); last
return; mapDown(event) {
} if (!this.canTouch) {
if (this.checkClickTarget(this.retn)&&(this.b==1)) { return;
}
console.log("bbbbb"+this.b);
this.canTouch = false;
for(let i=0;i<this.cardArr.length;i++){ //点击开始按钮,骰子竖直跳下来,卡片弹出来
tweenChange(this.cardArr[i], {scaleX: 0, scaleY: 0}, 0.3, ()=>{ if (this.checkClickTarget(this.stn)&&(this.b==0)) {
}); this.canTouch=false;
}
this.big();
this.startGame();
setTimeout(() => {
this.canTouch=true;
}, 1600);
return;
}
//点击重新开始按钮
if (this.checkClickTarget(this.retn)&&(this.b==1)) {
this.canTouch=false;
for(let i=0;i<this.cardArr.length;i++){
tweenChange(this.cardArr[i], {scaleX: 0, scaleY: 0}, 0.3, ()=>{
});
}
this.tz.visible=true;
this.tz.setScaleXY(this.mapScale/1.5);
this.tz.y=-50;
// this.big();
this.tz.visible=true;
this.tz.setScaleXY(this.mapScale/1.5);
this.tz.y=-50;
this.startGame();
// this.big(); setTimeout(() => {
this.canTouch=true;
}, 1600);
}
this.startGame();
}
//点击骰子,随机选卡]
if (this.checkClickTarget( this.t)) {
console.log(this.canTouch+"-----00000000000");
this.a.stop();
this.w.stop();
this.canTouch = false;
console.log(this.canTouch+"-----0000000000011111111");
this.starttouzi();
//点击骰子,随机选卡]
return;
}
//点击图片正面的动作
for(let i=0;i<this.cardArr.length;i++){
let card = this.cardArr[i];
let cardBg = card.children[1];
console.log("i"+i); if (this.checkClickTarget( this.t)) {
this.canTouch=false;
if (this.checkClickTarget(cardBg)&&(this.bs[i]==1)){
console.log("contc"+this.countc);
this.countc++;
let lcard;
lcard=this.cardArr[this.x];
if(this.countc==1){
} this.a.stop();
else{ this.w.stop();
const audio = this.audioObj[lcard["audio_url"]];
audio.pause(); this.starttouzi();
audio.currentTime = 0; setTimeout(() => {
this.canTouch=true;
} }, 1900);
this.playAudio(card["audio_url"]);
this.x=i;
console.log("i-"+i);
this.playAudio(card["audio_url"]);
return;
return; }
}
//点击图片正面的动作
for(let i=0;i<this.cardArr.length;i++){
let card = this.cardArr[i];
let cardBg = card.children[1];
console.log("i"+i);
if (this.checkClickTarget(cardBg)&&(this.bs[i]==1)){
console.log("contc"+this.countc);
this.countc++;
let lcard;
lcard=this.cardArr[this.x];
if(this.countc==1){
}
else{
const audio = this.audioObj[lcard["audio_url"]];
audio.pause();
audio.currentTime = 0;
}
}
}
countc=0;
x
starttouzi(){
this.count++; this.playAudio(card["audio_url"]);
this.x=i;
//骰子转动,给一个随机数
this.canTouch = false; console.log("i-"+i);
this.tAnimation(); this.playAudio(card["audio_url"]);
if(this.count!=1){
hideItem(this.faguang[this.last]);
return;
} }
if(this.count==6){
this.count=0;
setTimeout(() => {
//骰子消失
console.log("消失骰子数"+this.t);
// hideItem(this.tz);
this.tz.visible=false;
//重新开始按钮
this.stn.visible=false;
this.retn.visible=true;
this.b=1;
setTimeout(() => {
tweenChange(this.Btn, {scaleX: 1, scaleY: 1}, 0.3 , ()=>{
});
}, 180);
}, 1800); }
} }
countc=0;
x
} starttouzi(){
b
btnIn1(item){ this.count++;
this.playAudio("sm-in");
tweenChange(item, {y: 200}, .3);
} //骰子转动,给一个随机数
btnOut(item){ this.canTouch = false;
this.playAudio("sm-out"); this.tAnimation();
let out = this.canvasWidth+200*this.mapScale; if(this.count!=1){
tweenChange(item, {y: out}, 3);
}
//开始游戏
startGame(){
this.canTouch = false;
this.playAudio("start");
//生成随机数组
if(this.count==0){
this.randomtz();
}
//按钮消失
tweenChange(this.Btn, {scaleX: 1.2, scaleY: 1.2}, 0.3 , ()=>{
});
setTimeout(() => {
tweenChange(this.Btn, {scaleX: 0, scaleY: 0}, 0.3 , ()=>{
});
}, 180);
//卡片弹出来
setTimeout(() => {
this.initCard();
}, 180);
//骰子掉下来
setTimeout(() => {
this.touzi();
}, 300);
}
tz
t;
randomt
touzi(){
//骰子掉下来
this.btnIn1(this.tz);
}
fancard(){
this.overCard(this.cardArr[this.randomt],()=>{
});
} hideItem(this.faguang[this.last]);
tAnimation(){
this.randomt = this.newball[0]; }
this.playAudio("touzi"); if(this.count==6){
this.canTouch = false; this.canTouch = false;
console.log("this.a"+this.a); this.count=0;
setTimeout(() => {
//骰子消失
// hideItem(this.tz);
this.tz.visible=false;
//重新开始按钮
this.stn.visible=false;
this.retn.visible=true;
this.b=1;
setTimeout(() => {
tweenChange(this.Btn, {scaleX: 1, scaleY: 1}, 0.3 , ()=>{
});
}, 180);
}, 1300);
}
console.log(this.t[this.randomt]+"kongmei22222222"); }
const animation=new MyAnimation(); b
for(let j=0;j<2;j++){ btnIn1(item){
for(let i=0;i<6;i++){ this.playAudio("sm-in");
const imgobj=this.images.get('touzi'+i); tweenChange(item, {y: this.canvasHeight-100*this.mapScale}, .3);
animation. addFrameByImg(imgobj); }
btnOut(item){
} this.playAudio("sm-out");
} let out = this.canvasWidth+200*this.mapScale;
tweenChange(item, {y: out}, 3);
animation.delayPerUnit=0.09; }
//骰子旋转 //开始游戏
animation.play(); startGame(){
this.canTouch = false;
this.playAudio("start");
//生成随机数组
if(this.count==0){
this.randomtz();
}
//按钮消失
tweenChange(this.Btn, {scaleX: 1.2, scaleY: 1.2}, 0.3 , ()=>{
});
setTimeout(() => {
tweenChange(this.Btn, {scaleX: 0, scaleY: 0}, 0.3 , ()=>{
});
}, 180);
//卡片弹出来
setTimeout(() => {
this.initCard();
animation.playEnd=() => { }, 180);
if(this.data.sideA==1) //骰子掉下来
{ setTimeout(() => {
//默认正面 this.touzi();
this.bs[this.randomt]=0;
} }, 300);
if(this.data.sideB==1){ }
this.bs[ this.randomt]=1;
}
animation.stop();
console.log("---------"+this.randomt);
let x=3;
// this.t.init(this.images.get("t"+x));
this.t.init(this.images.get("t"+(this.randomt+1)));
alphaItem(this.faguang[this.randomt],1); tz
this.last=this.randomt; t;
this.overCard(this.cardArr[this.randomt],()=>{ randomt
//发光特效 touzi(){
//this.cardArr[this.randomt].faguang.visible=true;
// this.cardArr[this.randomt].children[]
//骰子掉下来
let rect = this.cardArr[this.randomt].getBoundingBox(); this.btnIn1(this.tz);
rect.x=this.cardArr[this.randomt].x-120;
rect.y=this.cardArr[this.randomt].y-140;
rect.width=250;
rect.height=250;
console.log("rect"+rect.width);
console.log("cardx"+this.cardArr[this.randomt].x);
console.log("cardy"+this.cardArr[this.randomt].y);
showBlingBling(this.images.get('ss'), rect, this.bgLayer, this.mapScale*1.5, 1, 0.05, 1.5);
});
this.newball.splice(0,1); }
this.a.start();
this.w.start();
};
fancard(){
this.overCard(this.cardArr[this.randomt],()=>{
});
this.tz.addChild(animation); }
tAnimation(){
}
ss1 this.randomt = this.newball[0];
ss2 this.playAudio("touzi");
ss3
ss4
oldball
newball
randomtz(){
this.oldball=[0,1,2,3,4,5];
this.oldball=randomSortByArr(this.oldball);
this.newball=this.oldball;
}
endPageArr;
showPetalFlag;
initCard(){
this.randomItemCard();
// this.cardArr = randomSortByArr(this.cardArr); //重新排序卡片组
this.initItemCard();//设定卡片的位置
//卡片恢复之前的状态
for(let i=0;i<this.cardArr.length;i++){
let card = this.cardArr[i];
card.setScaleXY(this.mapScale);
card.alpha = 1;
}
this.StartAnimation(this.cardArr);
}
initItemCard(){
const picLength = this.cardArr.length;
const top = (120)*this.mapScale;//第一排 console.log("this.a"+this.a);
const top2 = (212+160)*this.mapScale;//第二排
const allWidth = ((picLength/2)*280+(picLength/2-1)*80)*this.mapScale;
const drawItem = (index)=>{
//设置卡片间距
let itemBack = this.cardArr[index];
itemBack.x = (this.canvasWidth-allWidth)/2+((Math.floor(index/2)*(253+55))+200)*this.mapScale;
if(index%2==0){
itemBack.y = top;
}else{
itemBack.y = top2;
}
itemBack.setScaleXY(this.mapScale);
this.renderArr.push(itemBack);
};
const drawItem2 = (index)=>{
let itemBack = this.cardArr[index];
//itemBack.x = ((this.canvasWidth-allWidth)/2)*this.mapScale;
if(index%2==0){
itemBack.x = top*2+100;
}else{
itemBack.x = top2*2-170;
}
itemBack.y = top*2-30;
itemBack.setScaleXY(this.mapScale);
this.renderArr.push(itemBack);
};
if(picLength==2){
for(let i=0;i<picLength;i++){
drawItem2(i);
}
}else{
for(let i=0;i<picLength;i++){
drawItem(i);
}
}
}
StartAnimation(cardArr){
//卡片渐进显示
/*for(let i=0;i<cardArr.length;i++){
tweenChange(cardArr[i], {alpha: 1}, 0.3, ()=>{
setTimeout(() => {
this.playAudio("sm-back");
this.overCard(cardArr[i],()=>{
this.canTouch = true;
});
}, 1000);
});
}*/
for(let i=0;i<cardArr.length;i++){
tweenChange(cardArr[i], {scaleX: 0, scaleY: 0}, 0, ()=>{ const animation=new MyAnimation();
for(let j=0;j<2;j++){
for(let i=0;i<6;i++){
const imgobj=this.images.get('touzi'+i);
animation. addFrameByImg(imgobj);
}
}
animation.delayPerUnit=0.09;
//骰子旋转
animation.play();
animation.playEnd=() => {
if(this.data.sideA==1)
{
//默认正面
this.bs[this.randomt]=0;
}
if(this.data.sideB==1){
this.bs[ this.randomt]=1;
}
animation.stop();
let x=3;
// this.t.init(this.images.get("t"+x));
this.t.init(this.images.get("t"+(this.randomt+1)));
alphaItem(this.faguang[this.randomt],1);
this.last=this.randomt;
this.overCard(this.cardArr[this.randomt],()=>{
//发光特效
//this.cardArr[this.randomt].faguang.visible=true;
// this.cardArr[this.randomt].children[]
let rect = this.cardArr[this.randomt].getBoundingBox();
rect.x=this.cardArr[this.randomt].x-120;
rect.y=this.cardArr[this.randomt].y-140;
rect.width=250;
rect.height=250;
showBlingBling(this.images.get('ss'), rect, this.bgLayer, this.mapScale*1.5, 1, 0.05, 1.5);
}); });
setTimeout(() => {
tweenChange(cardArr[i], {scaleX: 0.5, scaleY: 0.5}, 0.3); this.newball.splice(0,1);
this.a.start();
this.w.start();
};
this.tz.addChild(animation);
}
ss1
ss2
ss3
ss4
oldball
newball
randomtz(){
this.oldball=[0,1,2,3,4,5];
this.oldball=randomSortByArr(this.oldball);
this.newball=this.oldball;
}
endPageArr;
showPetalFlag;
initCard(){
this.randomItemCard();
// this.cardArr = randomSortByArr(this.cardArr); //重新排序卡片组
this.initItemCard();//设定卡片的位置
}, 1000); //卡片恢复之前的状态
} for(let i=0;i<this.cardArr.length;i++){
} let card = this.cardArr[i];
card.setScaleXY(this.mapScale);
overCard(item , callback?: any){ card.alpha = 1;
let w = item.scaleX; }
this.playAudio("card"); this.StartAnimation(this.cardArr);
tweenChange(item, {scaleX: 0}, 0.3,()=>{ }
item.children[2].visible = !item.children[2].visible; initItemCard(){
tweenChange(item, {scaleX: w}, 0.3,()=>{
callback&&callback(); const picLength = this.cardArr.length;
});
}); const top = (120)*this.mapScale;//卡片第一排距离头顶的距离
} const top2 = (212+160)*this.mapScale;//卡片第二排距离头顶的距离
q
front=[]
back=[]
bs=[];
faguang=[]
randomItemCard(){
this.cardArr = [];
for(let i=0;i<6;i++){
let item = this.picArr[i];
let pic = new MySprite();
//初始化设置为隐藏
pic.alpha = 1;
pic.childDepandAlpha = true;
//声明正反面的对象
this.back[i] = new MySprite();
this.front[i] = new MySprite();
this.faguang[i]=new MySprite();
this.faguang[i].alpha=0;
//设置索引 const allWidth = ((picLength/2)*280+(picLength/2-1)*80)*this.mapScale;//卡片总宽
pic["index"] = i;
this.faguang[i].init(this.images.get("发光")); const drawItem = (index)=>{
//设置卡片间距
let itemBack = this.cardArr[index];
let bgRect = new ShapeRect();
bgRect.setSize(390, 390); if(index<3){
bgRect.init(); itemBack.y = top;
bgRect.fillColor = '#ff83fa';
this.front[i].addChild(bgRect, -1); itemBack.x = (this.canvasWidth-allWidth)/2+(((index)*(253+55))+200)*this.mapScale;//剩余的宽加
this.q=bgRect;
}else{
itemBack.y = top2;
itemBack.x = (this.canvasWidth-allWidth)/2+(((index-3)*(253+55))+200)*this.mapScale;//剩余的宽加
}
itemBack.setScaleXY(this.mapScale);
this.renderArr.push(itemBack);
};
//把设置好的正反面变量放到卡片组里
if(this.data.sideA==1){
//如果选择默认是正面,bs=0
for(let i=0;i<this.picArr.length;i++){
this.bs[i]=1;
}
pic.addChild(this.back[i]); for(let i=0;i<6;i++){
pic.addChild(this.front[i]); drawItem(i);
}
}
StartAnimation(cardArr){
//卡片渐进显示
/*for(let i=0;i<cardArr.length;i++){
tweenChange(cardArr[i], {alpha: 1}, 0.3, ()=>{
setTimeout(() => {
this.playAudio("sm-back");
this.overCard(cardArr[i],()=>{
this.canTouch = true;
});
}, 1000);
});
}*/
} for(let i=0;i<cardArr.length;i++){
else if(this.data.sideB==1){ tweenChange(cardArr[i], {scaleX: 0, scaleY: 0}, 0, ()=>{
for(let i=0;i<this.picArr.length;i++){
this.bs[i]=0; });
} setTimeout(() => {
tweenChange(cardArr[i], {scaleX: 0.5, scaleY: 0.5}, 0.3);
pic.addChild(this.front[i]);
pic.addChild(this.back[i]); }, 1000);
}
}
overCard(item , callback?: any){
let w = item.scaleX;
this.playAudio("card");
tweenChange(item, {scaleX: 0}, 0.3,()=>{
item.children[2].visible = !item.children[2].visible;
tweenChange(item, {scaleX: w}, 0.3,()=>{
callback&&callback();
});
});
}
q
front=[]
back=[]
bs=[];
faguang=[]
randomItemCard(){
} this.cardArr = [];
for(let i=0;i<6;i++){
//音频路径做属性保存,方便点击卡片播放
if(item.audio_url){ let item = this.picArr[i];
pic["audio_url"] = item.audio_url; let pic = new MySprite();
console.log(item.audio_url+"pic-audio");
//初始化设置为隐藏
} pic.alpha = 1;
const maxLen = 400; pic.childDepandAlpha = true;
if(item.pic_url){ //声明正反面的对象
let pic = new MySprite(); this.back[i] = new MySprite();
pic.init(this.images.get(item.pic_url)); this.front[i] = new MySprite();
this.faguang[i]=new MySprite();
//如果是横图设置图片填充卡片正面的比例 this.faguang[i].alpha=0;
if(pic.width>pic.height){
pic.setScaleXY(getMinScale(pic, maxLen)); //设置索引
pic.x=2; pic["index"] = i;
this.front[i].addChild(pic); this.faguang[i].init(this.images.get("发光"));
}
//如果是竖图设置图片填充卡片正面的比例 let bgRect = new ShapeRect();
if(pic.width<=pic.height&&(pic.width+40)>=pic.height){ bgRect.setSize(390, 390);
pic.setScaleXY(getMinScale(pic, maxLen-80)); bgRect.init();
pic.x=0; bgRect.fillColor = '#ff83fa';
pic.y=-3; this.front[i].addChild(bgRect, -1);
this.q=bgRect;
}
//如果是正方图设置图片填充卡片正面的比例
if(pic.width<=pic.height&&(pic.width+40)<pic.height){
pic.setScaleXY(getMinScale(pic, maxLen-60)); //把设置好的正反面变量放到卡片组里
pic.x=-5;
pic.y=-6; if(this.data.sideA==1){
}
this.front[i].addChild(pic);
}else{ //如果选择默认是正面,bs=0
const label = new Label(); for(let i=0;i<this.picArr.length;i++){
label.text = item.title; this.bs[i]=1;
label.fontName = 'BRLNSDB'; }
label.fontColor = '#ed3a33';
label.fontSize = 200;
label.textAlign = 'center'; pic.addChild(this.back[i]);
pic.addChild(this.front[i]);
}
else if(this.data.sideB==1){
for(let i=0;i<this.picArr.length;i++){
this.bs[i]=0;
}
pic.addChild(this.front[i]);
pic.addChild(this.back[i]);
}
//音频路径做属性保存,方便点击卡片播放
if(item.audio_url){
pic["audio_url"] = item.audio_url;
console.log(item.audio_url+"pic-audio");
}
const maxLen = 400;
if(item.pic_url){
let pic = new MySprite();
pic.init(this.images.get(item.pic_url));
//如果是横图设置图片填充卡片正面的比例
if(pic.width>pic.height){
pic.setScaleXY(getMinScale(pic, maxLen));
pic.x=2;
this.front[i].addChild(pic);
}
//如果是竖图设置图片填充卡片正面的比例
if(pic.width<=pic.height&&(pic.width+40)>=pic.height){
pic.setScaleXY(getMinScale(pic, maxLen-80));
pic.x=0;
pic.y=-3;
}
//如果是正方图设置图片填充卡片正面的比例
if(pic.width<=pic.height&&(pic.width+40)<pic.height){
pic.setScaleXY(getMinScale(pic, maxLen-60));
pic.x=-5;
pic.y=-6;
}
this.front[i].addChild(pic);
}else{
const label = new Label();
label.text = item.title;
label.fontName = 'BRLNSDB';
label.fontColor = '#ed3a33';
label.fontSize = 200;
label.textAlign = 'center';
label.setMaxSize((bgRect.width - 20)+10);
console.log(bgRect.width - 20+"卡片文字位置");
this.front[i].addChild(label);
}
this.front[i].addChild(this.faguang[i],-1);
this.back[i].addChild(this.faguang[i],-1);
this.cardArr.push(pic);
this.cardArr[i].alpha=1;
label.setMaxSize((bgRect.width - 20)+10); }
console.log(bgRect.width - 20+"卡片文字位置"); this.back[0].init(this.images.get("back0"));
this.front[i].addChild(label); this.back[4].init(this.images.get("back0"));
} this.back[1].init(this.images.get("back1"));
this.front[i].addChild(this.faguang[i],-1); this.back[5].init(this.images.get("back1"));
this.back[i].addChild(this.faguang[i],-1); this.back[3].init(this.images.get("back2"));
this.cardArr.push(pic); this.back[2].init(this.images.get("back2"));
this.cardArr[i].alpha=1; this.front[0].init(this.images.get("front0"));
this.front[4].init(this.images.get("front0"));
this.front[1].init(this.images.get("front1"));
this.front[5].init(this.images.get("front1"));
this.front[3].init(this.images.get("front2"));
this.front[2].init(this.images.get("front2"));
}
initBg() {
this.bgLayer = new MySprite();
this.renderArr.push(this.bgLayer);
const bg = new ShapeRect();
bg.fillColor = '#75d100';
bg.setSize(this.canvasWidth, this.canvasHeight);
this.renderArr.push(bg);
this.bg = bg;
} //把图片填充入背景,全覆盖
this.back[0].init(this.images.get("back0")); this.startBorder = new MySprite();
this.back[4].init(this.images.get("back0")); this.startBorder.init(this.images.get('BG'));
this.back[1].init(this.images.get("back1")); this.startBorder.x = this.canvasWidth / 2 ;
this.back[5].init(this.images.get("back1")); this.startBorder.y = this.canvasHeight / 2 ;
this.back[3].init(this.images.get("back2")); const sx = this.canvasWidth / this.startBorder.width;
this.back[2].init(this.images.get("back2")); const sy = this.canvasHeight / this.startBorder.height;
this.front[0].init(this.images.get("front0")); const s=Math.max(sx,sy);
this.front[4].init(this.images.get("front0")); console.log(s+"s");
this.front[1].init(this.images.get("front1")); this.startBorder.setScaleXY(s);
this.front[5].init(this.images.get("front1")); this.renderArr.push(this.startBorder);
this.front[3].init(this.images.get("front2"));
this.front[2].init(this.images.get("front2"));
} }
mapMove(event) { mapMove(event) {
} }
...@@ -1350,4 +1364,4 @@ faguang=[] ...@@ -1350,4 +1364,4 @@ faguang=[]
} }
\ 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