Commit 2933a3fd authored by limingzhe's avatar limingzhe

first

parent 058295b3
......@@ -2,87 +2,66 @@
<div class="model-content">
<div nz-row nzType="flex" nzJustify="start" nzAlign="middle">
<div *ngFor="let it of picArr; let i = index"
nz-col nzSpan="8" >
<div *ngFor="let it of picArr; let i = index"
nz-col nzSpan="8" >
<div class="item-box">
<div class="item-box border" >
<app-upload-image-with-preview
style="width: 100%"
[picUrl]="it.pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, it)"
></app-upload-image-with-preview>
<div style="display: flex; align-items: center; padding-bottom: 0.5vw">
<span style="padding-right: 20px">item-{{i+1}} </span>
<span> 类型:</span>
<nz-radio-group [(ngModel)]="it.optionType" (ngModelChange)="save()">
<label nz-radio nzValue="A">文本</label>
<label nz-radio nzValue="B">图片</label>
</nz-radio-group>
</div>
<div style="display: flex; justify-items: center; padding-top: 10px">
<app-audio-recorder
[audioUrl]="it.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it)">
</app-audio-recorder>
<div *ngIf="it.optionType == 'A'" style="width: 100%">
<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">
<i nz-icon type="close"></i>
</button>
</div>
</div>
<input type="text" nz-input placeholder="input text" [(ngModel)]="it.text" (blur)="saveItem()">
<!--<h5> id-{{i+1}} </h5>-->
</div>
<!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
<!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<div *ngIf="it.optionType == 'B'" style="width: 100%">
<app-upload-image-with-preview
style="width: 100%"
[picUrl]="it.pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, it)"
></app-upload-image-with-preview>
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
</div>
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--question:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['q_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<div style="display: flex; justify-items: center; padding-top: 10px">
<app-audio-recorder
[audioUrl]="it.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it)">
</app-audio-recorder>
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">
<i nz-icon type="close"></i>
</button>
</div>
<!--<span style="width: 80px;">-->
<!--answer:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['a_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
</div>
</div>
<!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
<!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
<!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
<!--</nz-radio-group>-->
</div>
</div>
......@@ -92,7 +71,7 @@
<button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"
(click)="addPic()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
Add
Add Option
</button>
<!--</div>-->
......
......@@ -22,7 +22,7 @@
padding: 10px;
padding-bottom: 5vw;
padding-top: 5vw;
padding-top: 2vw;
}
......@@ -50,5 +50,12 @@
}
.border {
border-style: solid;
border-radius: 15px;
height: 30vw;
}
}
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core';
import {
Component,
EventEmitter,
Input,
OnDestroy,
OnChanges,
OnInit,
Output,
ApplicationRef,
ChangeDetectorRef
} from '@angular/core';
......@@ -14,10 +24,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
_item: any;
KEY = 'hw_000';
KEY = 'dfzx_13';
questionType = 'A';
// @Input()
......@@ -35,7 +46,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
constructor(private appRef: ApplicationRef) {
constructor(private appRef: ApplicationRef,
public changeDetectorRef: ChangeDetectorRef) {
}
......@@ -60,6 +72,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
console.log('~data:', data);
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}, this.KEY);
......@@ -83,6 +99,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item.contentObj.picArr = this.picArr;
}
if (!this.item.contentObj.questionType) {
this.item.contentObj.questionType = 'A';
}
console.log('item:' , this.item);
// this.picArr = this.getDefaultPicArr();
// this.item.contentObj.picArr = this.picArr;
......@@ -169,6 +189,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.picArr.push({
pic_url: '',
audio_url: '',
optionType: 'A'
// text: '',
// radioValue: 'A'
});
......
import TWEEN from '@tweenjs/tween.js';
import {del} from 'selenium-webdriver/http';
import construct = Reflect.construct;
class Sprite {
......@@ -49,14 +50,6 @@ export class MySprite extends Sprite {
skewX = 0;
skewY = 0;
_shadowFlag = false;
_shadowColor;
_shadowOffsetX = 0;
_shadowOffsetY = 0;
_shadowBlur = 5;
_radius = 0;
children = [this];
childDepandVisible = true;
......@@ -83,21 +76,6 @@ export class MySprite extends Sprite {
}
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
this._shadowFlag = true;
this._shadowColor = color;
this._shadowOffsetX = offX;
this._shadowOffsetY = offY;
this._shadowBlur = blur;
}
setRadius(r) {
this._radius = r;
}
update($event = null) {
if (!this.visible && this.childDepandVisible) {
......@@ -116,8 +94,6 @@ export class MySprite extends Sprite {
this.updateChildren();
this.ctx.restore();
}
drawInit() {
......@@ -133,48 +109,12 @@ export class MySprite extends Sprite {
this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
if (this._radius) {
const r = this._radius;
const w = this.width;
const h = this.height;
this.ctx.lineTo(-w / 2, h / 2); // 创建水平线
this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
this.ctx.clip();
}
}
drawSelf() {
if (this._shadowFlag) {
this.ctx.shadowOffsetX = this._shadowOffsetX;
this.ctx.shadowOffsetY = this._shadowOffsetY;
this.ctx.shadowBlur = this._shadowBlur;
this.ctx.shadowColor = this._shadowColor;
} else {
this.ctx.shadowOffsetX = 0;
this.ctx.shadowOffsetY = 0;
this.ctx.shadowBlur = null;
this.ctx.shadowColor = null;
}
if (this.img) {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
}
updateChildren() {
......@@ -517,7 +457,7 @@ export class Label extends MySprite {
_outLineColor;
constructor(ctx = null) {
constructor(ctx) {
super(ctx);
this.init();
}
......@@ -573,10 +513,10 @@ export class Label extends MySprite {
this._shadowFlag = true;
this._shadowColor = color;
// 将阴影向右移动15px,向上移动10px
this._shadowOffsetX = 5;
this._shadowOffsetY = 5;
this._shadowOffsetX = offX;
this._shadowOffsetY = offY;
// 轻微模糊阴影
this._shadowBlur = 5;
this._shadowBlur = blur;
}
setOutline(width = 5, color = '#ffffff') {
......@@ -594,15 +534,15 @@ export class Label extends MySprite {
if (!this.text) { return; }
// if (this._shadowFlag) {
//
// this.ctx.shadowColor = this._shadowColor;
// // 将阴影向右移动15px,向上移动10px
// this.ctx.shadowOffsetX = this._shadowOffsetX;
// this.ctx.shadowOffsetY = this._shadowOffsetY;
// // 轻微模糊阴影
// this.ctx.shadowBlur = this._shadowBlur;
// }
if (this._shadowFlag) {
this.ctx.shadowColor = this._shadowColor;
// 将阴影向右移动15px,向上移动10px
this.ctx.shadowOffsetX = this._shadowOffsetX;
this.ctx.shadowOffsetY = this._shadowOffsetY;
// 轻微模糊阴影
this.ctx.shadowBlur = this._shadowBlur;
}
......@@ -1081,7 +1021,6 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
}
tween.start();
return tween;
}
......@@ -1119,7 +1058,6 @@ export function scaleItem(item, scale, time = 0.8, callBack = null, easing = nul
}
tween.start();
return tween;
}
......@@ -1389,27 +1327,6 @@ export function delayCall(callback, second) {
.start();
}
export function formatTime(fmt, date) {
// "yyyy-MM-dd HH:mm:ss";
const o = {
"M+": date.getMonth() + 1, // 月份
"d+": date.getDate(), // 日
"h+": date.getHours(), // 小时
"m+": date.getMinutes(), // 分
"s+": date.getSeconds(), // 秒
"q+": Math.floor((date.getMonth() + 3) / 3), // 季度
"S": date.getMilliseconds() // 毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1)
? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
export function getMinScale(item, maxLen) {
const sx = maxLen / item.width;
const sy = maxLen / item.height;
......@@ -1418,128 +1335,161 @@ export function getMinScale(item, maxLen) {
}
// --------------- custom class --------------------
export class Wheel extends MySprite {
export function jelly(item, time = 0.7) {
wheelNum;
wheelLen;
wheelColorArr;
itemArr;
itemLen = 100;
curItem;
initWheel(num, len, wheelColorArr) {
this.wheelNum = num;
this.wheelLen = len;
this.wheelColorArr = wheelColorArr;
this.itemArr = [];
if (item.jellyTween) {
TWEEN.remove(item.jellyTween);
}
const t = time / 9;
const baseSX = item.scaleX;
const baseSY = item.scaleY;
let index = 0;
showLightItem(item) {
for (let i = 0; i < this.itemArr.length; i++) {
if (this.itemArr[i] == item) {
this.curItem = item;
} else {
tweenChange(this.itemArr[i], {alpha: 0.3}, 0.2);
}
}
}
showAllItem() {
for (let i = 0; i < this.itemArr.length; i++) {
this.itemArr[i].alpha = 1;
const run = () => {
if (index >= arr.length) {
item.jellyTween = null;
return;
}
const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
};
const arr = [
[baseSX * 1.1, baseSY * 0.9, t],
[baseSX * 0.98, baseSY * 1.02, t * 2],
[baseSX * 1.02, baseSY * 0.98, t * 2],
[baseSX * 0.99, baseSY * 1.01, t * 2],
[baseSX * 1.0, baseSY * 1.0, t * 2],
];
run();
}
}
addItem(item, mapScale) {
if (this.itemArr.length >= this.wheelNum) {
return;
}
export function showPopParticle(img, pos, parent) {
const r = this.wheelLen - this.itemLen * mapScale / 3 * 2;
const itemLen = this.itemLen;
const angle = Math.round( 360 / this.wheelNum * 100 ) / 100 ;
const targetAngle = 90 - angle / 2 + angle * this.itemArr.length; // + angle / 2;
const pos = getPosByAngle(targetAngle, r);
item.x = pos.x;
item.y = pos.y;
const num = 20;
for (let i = 0; i < num; i ++) {
if (item.text) {
item.setMaxSize(itemLen);
} else {
const s = getMinScale(item, itemLen);
item.setScaleXY(s * mapScale);
}
const particle = new MySprite();
particle.init(img);
particle.x = pos.x;
particle.y = pos.y;
parent.addChild(particle);
item.rotation = -targetAngle + 180;
const randomR = 360 * Math.random();
particle.rotation = randomR;
const randomS = 0.5 + Math.random() * 0.5;
particle.setScaleXY(randomS);
const randomX = Math.random() * 20 - 10;
particle.x += randomX;
this.addChild(item);
this.itemArr.push(item);
const randomY = Math.random() * 20 - 10;
particle.y += randomY;
const randomL = 40 + Math.random() * 40;
const randomA = 360 * Math.random();
const randomT = getPosByAngle(randomA, randomL);
moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, 0.4, () => {
}, TWEEN.Easing.Exponential.Out);
scaleItem(particle, 0, 0.6, () => {
// const circle = new ShapeCircle(this.ctx);
// circle.setRadius(20);
// circle.x = pos.x;
// circle.y = pos.y;
// this.addChild(circle);
});
}
}
drawWheel() {
export function shake(item, time = 0.5, callback = null, rate = 1) {
const ctx = this.ctx;
if (item.shakeTween) {
return;
}
const w = ctx.canvas.width;
const h = ctx.canvas.height;
item.shakeTween = true;
const offX = 15 * item.scaleX * rate;
const offY = 15 * item.scaleX * rate;
const baseX = item.x;
const baseY = item.y;
const easing = TWEEN.Easing.Sinusoidal.InOut;
/*分成几等分*/
const num = this.wheelNum;
/*一份多少弧度*/
const angle = Math.PI * 2 / num;
/*原点坐标*/
const x0 = 0; // w / 2;
const y0 = 0; // h / 2;
const move4 = () => {
moveItem(item, baseX, baseY, time / 4, () => {
item.shakeTween = false;
if (callback) {
callback();
let firstColor;
let lastColor;
let colorId = 0;
let tmpIndex = 0;
const colorArr = this.wheelColorArr.concat();
/*获取随机颜色*/
const getRandomColor = () => {
// const r = Math.floor(Math.random() * 256);
// const g = Math.floor(Math.random() * 256);
// const b = Math.floor(Math.random() * 256);
// return 'rgb(' + r + ',' + g + ',' + b + ')';
if (tmpIndex == this.wheelNum - 1) {
removeItemFromArr(colorArr, firstColor);
removeItemFromArr(colorArr, lastColor);
}
}, easing);
};
const move3 = () => {
moveItem(item, baseX + offX / 4, baseY + offY / 4, time / 4, () => {
move4();
}, easing);
};
if (colorId >= colorArr.length) {
colorId = 0;
}
const color = colorArr[colorId];
colorId ++;
tmpIndex ++;
if (!firstColor) {
firstColor = color;
}
lastColor = color;
const move2 = () => {
moveItem(item, baseX - offX / 4 * 3, baseY - offY / 4 * 3, time / 4, () => {
move3();
}, easing);
};
const move1 = () => {
moveItem(item, baseX + offX, baseY + offY, time / 8, () => {
move2();
}, easing);
};
return color;
move1();
};
/*上一次绘制的结束弧度等于当前次的起始弧度*/
//var startAngle = 0;
for (let i = 0; i < num; i++) {
const startAngle = i * angle;
const endAngle = (i + 1) * angle;
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.arc(x0, y0, this.wheelLen, startAngle, endAngle);
/*随机颜色*/
ctx.fillStyle = getRandomColor();
ctx.fill();
}
}
drawSelf() {
super.drawSelf();
this.drawWheel();
}
}
// --------------- custom class --------------------
......@@ -19,8 +19,6 @@
src: url("../../assets/font/BRLNSDB.TTF") ;
}
//
//
//@font-face
//{
......
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
import {
getAngleByPos,
MySprite,
getPosByAngle,
Label,
MyAnimation,
moveItem,
randomSortByArr,
scaleItem,
rotateItem,
removeItemFromArr,
ShapeRect,
tweenChange,
hideItem,
showItem,
BitMapLabel,
ColorSpr,
removeItemFromArr, ShapeRect, alphaItem, circleMove, ShapeCircle, Wheel, delayCall, RichText, getMinScale
} from './Unit';
import {res, resAudio} from './resources';
......@@ -16,8 +24,8 @@ import {debounceTime} from 'rxjs/operators';
import * as _ from 'lodash';
import TWEEN from '@tweenjs/tween.js';
import {del} from 'selenium-webdriver/http';
import {text} from "@angular/core/src/render3";
@Component({
......@@ -62,6 +70,15 @@ export class PlayComponent implements OnInit, OnDestroy {
rawImages = new Map(res);
rawAudios = new Map(resAudio);
// 声音
bgAudio = new Audio();
successAudio = new Audio();
wrongAudio = new Audio();
rightAudio = new Audio();
titleAudio = new Audio();
images = new Map();
animationId: any;
......@@ -79,25 +96,106 @@ export class PlayComponent implements OnInit, OnDestroy {
canTouch = true;
KEY = 'hw_000';
KEY = 'dfzx_13';
// -----
picArr;
itemBgArr;
ballArr;
lightIndex = 0;
grouoLightIndex = 0;
curLight;
goBtn;
wheel;
arrow;
lightDelayTime = 0;
questionBg;
answerLabelArr;
questionLabel;
questionLabel2;
questionPicRect;
textBgArr;
picBgArr;
answerPicArr;
idArr;
answerTypeArr = ['A', 'B', 'C', 'D'];
answerTitleArr;
lightDelayId;
rightFlag;
ballGroupArr;
animaStopRun;
animaNewStopRun;
runBtn;
itemArr;
wheelBottom;
pageLabel;
leftBtn;
rightBtn;
bgLayer;
curPageIndex;
hotZoneArr;
picRect;
closeBtn;
itemBg;
curSong;
oldFrameColorId;
curCard;
bottomCard;
picW = 370;
picH = 260;
mask;
ball;
stick;
robot;
pageW = 840;
page1;
page2;
arm1;
arm2;
centerPageArr;
pageOffX = 100;
curPic;
hotZoneArr;
roleArr;
picIndex = 0;
curData;
bgTop;
topImg;
curWordArr;
wordMoveFlag;
maxScore;
bottomY;
leftScore;
rightScore;
leftScoreLabel;
rightScoreLabel;
addScoreNum = 20;
leftWin;
rightWin;
startPageArr = [];
bgArr;
rightArr;
title;
startBtn;
starArr;
wand;
light;
replayBtn;
endPageArr;
gameEndFlag;
showPetalFlag;
......@@ -109,7 +207,6 @@ export class PlayComponent implements OnInit, OnDestroy {
@HostListener('window:resize', ['$event'])
onResize(event) {
this.winResizeEventStream.next();
}
......@@ -154,18 +251,29 @@ export class PlayComponent implements OnInit, OnDestroy {
initDefaultData() {
let picArr = this.data.contentObj.picArr;
// console.log('picArr: ', picArr);
const picArr = this.data.contentObj.picArr;
if (!picArr || picArr.length == 0) {
const picArr = [];
for (let i = 0; i < 2; i++) {
picArr.push({
'pic_url': 'assets/play/default/pic.jpg',
'audio_url': 'assets/play/default/audio.mp3'
});
}
picArr.push(
{
optionType: "A",
text: 'one',
audio_url: 'assets/play/default/1.mp3'
},
{
optionType: "A",
text: 'two',
audio_url: 'assets/play/default/2.mp3'
},
{
optionType: "A",
text: 'three',
audio_url: 'assets/play/default/3.mp3'
}
);
this.data.contentObj.picArr = picArr;
......@@ -175,9 +283,10 @@ export class PlayComponent implements OnInit, OnDestroy {
}
ngOnDestroy() {
window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId);
this.bgAudio.pause();
this.gameEndFlag = true;
clearTimeout(this.lightDelayId);
}
initData() {
......@@ -206,22 +315,17 @@ export class PlayComponent implements OnInit, OnDestroy {
this.canTouch = true;
this.curPageIndex = 0;
// this.downFlag = false;
this.endPageArr = [];
// this.clockUpdateFlag = false;
this.renderArr = [];
if (!this.data.contentObj.picArr) {
this.data.contentObj.picArr = [];
}
this.picArr = this.data.contentObj.picArr;
this.picIndex = 0;
// this.picArr = randomSortByArr(this.picArr);
//
// // this.picArr = randomSortByArr(this.picArr);
// this.picIndex = 0;
//
}
......@@ -260,7 +364,7 @@ export class PlayComponent implements OnInit, OnDestroy {
if (audioUrl) {
// console.log('audioUrl:', audioUrl);
console.log('audioUrl:', audioUrl);
const audio = new Audio();
audio.src = audioUrl;
audio.load();
......@@ -269,10 +373,10 @@ export class PlayComponent implements OnInit, OnDestroy {
};
let arr = contentObj.picArr;
const arr = contentObj.picArr;
if (arr) {
// console.log('arr: ', arr);
console.log('arr: ', arr);
for (let i = 0; i < arr.length; i++) {
addUrlToAudioObj(arr[i].audio_url);
}
......@@ -281,9 +385,6 @@ export class PlayComponent implements OnInit, OnDestroy {
const audioObj = this.audioObj;
const addOneAudio = (key, url, vlomue = 1, loop = false, callback = null) => {
......@@ -303,15 +404,16 @@ export class PlayComponent implements OnInit, OnDestroy {
};
addOneAudio('click', this.rawAudios.get('click'), 0.3);
// addOneAudio('angry', this.rawAudios.get('angry'), 1);
// addOneAudio('cow_start', this.rawAudios.get('cow_start'), 1);
// addOneAudio('eat', this.rawAudios.get('eat'), 1);
// addOneAudio('grass', this.rawAudios.get('grass'), 1);
// addOneAudio('happy', this.rawAudios.get('happy'), 1);
// addOneAudio('right', this.rawAudios.get('right'), 1);
// addOneAudio('wrong', this.rawAudios.get('wrong'), 1);
// addOneAudio('bg', this.rawAudios.get('audio_bg'), 1, true);
addOneAudio('tip', this.rawAudios.get('tip'), 0.5);
addOneAudio('wheel_run', this.rawAudios.get('wheel_run'), 0.5);
// addOneAudio('click_1', this.rawAudios.get('audio_click_level_1'), 0.2);
// addOneAudio('click_2', this.rawAudios.get('audio_click_level_2'));
// addOneAudio('wrong', this.rawAudios.get('audio_wrong'));
// addOneAudio('right', this.rawAudios.get('audio_right'));
// addOneAudio('tip', this.rawAudios.get('audio_tip'));
// addOneAudio('show_window', this.rawAudios.get('audio_show_window'), 0.5);
// addOneAudio('wheel_run', this.rawAudios.get('audio_wheel_run'), 0.5);
//
......@@ -358,15 +460,15 @@ export class PlayComponent implements OnInit, OnDestroy {
};
let arr = this.data.contentObj.picArr;
const arr = this.data.contentObj.picArr;
if (arr) {
for (let i = 0; i < arr.length; i++) {
addPicUrl( arr[i].pic_url);
}
}
}
......@@ -427,8 +529,6 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initView();
}
initCtx() {
......@@ -439,432 +539,1941 @@ export class PlayComponent implements OnInit, OnDestroy {
window['curCtx'] = this.ctx;
// console.log('this.ctx.canvas w: ', this.ctx.canvas.width);
// console.log('this.ctx.canvas h: ', this.ctx.canvas.height);
}
initView() {
this.initBg();
this.initPic();
this.initBottomRight();
this.refreshPageLabel();
this.initWheel();
this.initArrow();
// this.showStartAnima();
//
// this.initLightAnimaNew();
//
// this.initQuestionWindow();
//
// this.playAudio('bg');
}
initBottomRight() {
showStartAnima() {
const px = this.canvasWidth - 100 * this.mapScale;
const py = this.canvasHeight - 50 * this.mapScale;
const offX = 40 * this.mapScale;
const go = new MySprite(this.ctx);
go.init(this.images.get('go'));
go.setScaleXY(this.mapScale);
go.x = this.canvasWidth + go.width * go.scaleX;
go.y = this.canvasHeight - go.height / 2 * go.scaleY - 30 * this.mapScale;
this.renderArr.push(go);
this.goBtn = go;
const targetX = this.canvasWidth - go.width / 2 * go.scaleX - 30 * this.mapScale;
moveItem(go, targetX, go.y, 0.7, () => {
}, TWEEN.Easing.Cubic.Out);
const leftBtn = new MySprite();
leftBtn.init(this.images.get('btn_left'));
leftBtn.setScaleXY(this.mapScale);
leftBtn.x = px - offX;
leftBtn.y = py;
this.playAudio('enter');
const rightBtn = new MySprite();
rightBtn.init(this.images.get('btn_right'));
rightBtn.setScaleXY(this.mapScale);
rightBtn.x = px + offX;
rightBtn.y = py;
}
this.renderArr.push(leftBtn);
this.renderArr.push(rightBtn);
const textBg = new MySprite();
textBg.init(this.images.get('text_bg'));
textBg.setScaleXY(this.mapScale);
textBg.x = px;
textBg.y = py - 65 * this.mapScale;
this.renderArr.push(textBg);
initLightAnima() {
clearTimeout(this.lightDelayId);
if (this.animaStopRun) {
return;
}
const label = new Label();
label.text = '0 / 0';
label.fontName = 'BRLNSDB';
label.fontSize = 24;
label.fontColor = '#ffffff';
label.textAlign = 'center';
label.setMaxSize( textBg.width * textBg.scaleX * 0.9 );
textBg.addChild(label);
const delayTime = this.lightDelayTime;
this.leftBtn = leftBtn;
this.rightBtn = rightBtn;
this.pageLabel = label;
if (this.picArr.length <= 1) {
this.leftBtn.visible = false;
this.rightBtn.visible = false;
textBg.visible = false;
}
}
// delayCall(delayTime, () => {
this.lightDelayId = setTimeout(() => {
refreshPageLabel() {
if (this.animaStopRun) {
return;
}
const label = this.pageLabel;
label.text = (this.curPageIndex + 1) + ' / ' + this.picArr.length;
if (this.curLight) {
hideItem(this.curLight, 0.02, null, TWEEN.Easing.Cubic.Out);
}
this.showAudio();
}
this.curLight = this.ballArr[this.lightIndex].light;
showAudio() {
const data = this.picArr[this.curPageIndex];
const audio = this.audioObj[data.audio_url];
if (audio) {
audio.play();
}
}
showItem(this.curLight, 0.02, () => {
this.initLightAnima();
}, TWEEN.Easing.Cubic.Out);
this.lightIndex--;
if (this.lightIndex < 0) {
this.lightIndex = this.ballArr.length - 1;
}
// });
}, delayTime * 1000);
}
initLightAnimaNew() {
// console.log(' in initLightAnimaNew');
initPic() {
clearTimeout(this.lightDelayId);
if (this.animaNewStopRun) {
return;
}
for (let i = 0; i < this.picArr.length; i++) {
const delayTime = this.lightDelayTime;
// delayCall(delayTime, () => {
const data = this.picArr[i];
const pic = new MySprite();
pic.init(this.images.get(data.pic_url));
// pic.x = this.canvasWidth / 2;
// pic.y = this.canvasHeight / 2;
const maxW = this.canvasWidth * 0.9;
const maxH = this.canvasHeight * 0.9;
const sx = maxW / pic.width;
const sy = maxH / pic.height;
const s = Math.min(sx, sy);
pic.setScaleXY(s);
// pic.setRadius(50 * this.mapScale);
const picBg = new ShapeRect();
picBg.setSize(pic.width * pic.scaleX, pic.height * pic.scaleY);
picBg.x = this.canvasWidth / 2 + this.canvasWidth * i;
picBg.y = this.canvasHeight / 2;
picBg.init();
picBg.fillColor = '#ffffff';
// picBg.setRadius(50 * this.mapScale);
picBg.setShadow(0, 10, 20, 'rgba(0,0,0,0.3)');
// picBg.alpha = 0;
// this.renderArr.push(picBg);
// this.renderArr.push(picShadow);
picBg.addChild(pic);
this.bgLayer.addChild(picBg);
}
this.lightDelayId = setTimeout(() => {
// if (this.curLight) {
// hideItem(this.curLight, 0.02, null, TWEEN.Easing.Cubic.Out);
// }
//
if (this.animaNewStopRun) {
return;
}
this.lightDelayTime = 1;
for (let i = 0; i < this.ballGroupArr.length; i++) {
if (i != this.grouoLightIndex) {
const arr = this.ballGroupArr[i].arr;
for (let j = 0; j < arr.length; j++) {
hideItem(arr[j], 0.02);
}
}
}
// this.curLight = this.ballArr[this.lightIndex].light;
const lightArr = this.ballGroupArr[this.grouoLightIndex].arr;
for (let i = 0; i < lightArr.length; i++) {
}
if (i == lightArr.length - 1) {
showItem(lightArr[i], 0.02, () => {
this.initLightAnimaNew();
}, TWEEN.Easing.Cubic.Out);
} else {
showItem(lightArr[i], 0.02, () => {
}, TWEEN.Easing.Cubic.Out);
}
}
// showItem(this.curLight, 0.02, () => {
// this.initLightAnima();
// }, TWEEN.Easing.Cubic.Out);
this.grouoLightIndex--;
if (this.grouoLightIndex < 0) {
this.grouoLightIndex = this.ballGroupArr.length - 1;
}
// this.lightIndex--;
// if (this.lightIndex < 0) {
// this.lightIndex = this.ballArr.length - 1;
// }
// });
}, delayTime * 1000);
}
initQuestionWindow() {
const mask = new ShapeRect(this.ctx);
mask.setSize(this.canvasWidth, this.canvasHeight);
mask.fillColor = '#000000';
mask.alpha = 0.7;
mask.visible = false;
this.mask = mask;
initBg() {
this.bgArr = [];
const bg = new MySprite();
bg.init(this.images.get('bg'));
const bg = new MySprite(this.ctx);
bg.init(this.images.get('question_bg'));
bg.setScaleXY(this.mapScale);
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
const sx = this.canvasWidth / bg.width;
const sy = this.canvasHeight / bg.height;
const s = Math.max(sx, sy);
bg.setScaleXY(s);
this.renderArr.push(bg);
mask.addChild(bg);
this.questionBg = bg;
const w = 1020;
const h = 230;
const w2 = 740;
const labelRect1 = new ShapeRect(this.ctx);
labelRect1.setSize(w2, h);
labelRect1.alpha = 0;
labelRect1.x = -bg.width / 2 + 75;
labelRect1.y = -bg.height / 2 + 60;
bg.addChild(labelRect1);
const richText = new RichText(this.ctx);
richText.text = '';
richText.disH = 0;
richText.fontName = 'RoundedBold';
richText.width = w2;
richText.x = labelRect1.x; // + labelRect1.width / 2;
richText.y = labelRect1.y + labelRect1.height / 2 - richText.fontSize / 2;
richText.fontSize = 48;
bg.addChild(richText);
this.questionLabel = richText;
const picRect = new ShapeRect(this.ctx);
picRect.setSize(h, h);
picRect.alpha = 0;
picRect.x = labelRect1.x + w - picRect.width;
picRect.y = labelRect1.y;
bg.addChild(picRect);
this.questionPicRect = picRect;
// const labelRect2 = new ShapeRect(this.ctx);
// labelRect2.setSize(w, h);
// labelRect2.alpha = 0.3;
// labelRect2.x = labelRect1.x;
// labelRect2.y = labelRect1.y;
// bg.addChild(labelRect2);
const richText2 = new RichText(this.ctx);
richText2.text = '';
richText2.disH = 0;
richText2.fontName = 'RoundedBold';
richText2.width = w;
richText2.x = labelRect1.x; // + labelRect1.width / 2;
richText2.y = labelRect1.y + labelRect1.height / 2 - richText.fontSize / 2;
richText2.fontSize = 48;
bg.addChild(richText2);
this.questionLabel2 = richText2;
const textBgH = 81;
const disH = 5;
const offX = labelRect1.x;
const offY = labelRect1.y + labelRect1.height + textBgH / 2 + 15;
this.textBgArr = [];
this.answerLabelArr = [];
const keyArr = ['a', 'b', 'c', 'd'];
for (let i = 0; i < 4; i++) {
const key = 'text_bg_' + keyArr[i];
const textBg = new MySprite(this.ctx);
textBg.init(this.images.get(key));
textBg.x = offX + textBg.width / 2;
textBg.y = offY + i * (textBgH + disH);
bg.addChild(textBg, 2);
this.textBgArr.push(textBg);
const label = new Label(this.ctx);
label.fontName = 'RoundedBold';
label.text = 'aaaaaaaa';
label.fontColor = '#000000';
// label.textAlign = 'center';
label.fontSize = 50;
label.setMaxSize(textBg.width - 230);
label.refreshSize();
label.x = -textBg.width / 2 + 90;
textBg.addChild(label);
const rightBg = new MySprite(this.ctx);
rightBg.init(this.images.get('text_right'));
rightBg.x = textBg.x;
rightBg.y = textBg.y;
bg.addChild(rightBg, 1);
rightBg.visible = false;
textBg['rightBg'] = rightBg;
const wrongBg = new MySprite(this.ctx);
wrongBg.init(this.images.get('text_wrong'));
wrongBg.x = textBg.x;
wrongBg.y = textBg.y;
bg.addChild(wrongBg, 1);
wrongBg.visible = false;
textBg['wrongBg'] = wrongBg;
this.answerLabelArr.push(label);
}
this.bgLayer = new MySprite();
this.renderArr.push(this.bgLayer);
}
this.picBgArr = [];
this.answerTitleArr = [];
const picBgW = 236;
const disW = (w - picBgW * 4) / 3;
for (let i = 0; i < 4; i ++) {
const key = 'pic_bg_' + keyArr[i];
const picBg = new MySprite(this.ctx);
picBg.init(this.images.get(key));
picBg.x = offX + picBg.width / 2 + i * (picBgW + disW);
picBg.y = offY + picBg.height / 2 - textBgH / 2;
bg.addChild(picBg);
this.picBgArr.push(picBg);
const rightBg = new MySprite(this.ctx);
rightBg.init(this.images.get('pic_right'));
rightBg.x = picBg.x;
rightBg.y = picBg.y;
bg.addChild(rightBg, 1);
rightBg.visible = false;
picBg['rightBg'] = rightBg;
const wrongBg = new MySprite(this.ctx);
wrongBg.init(this.images.get('pic_wrong'));
wrongBg.x = picBg.x;
wrongBg.y = picBg.y;
bg.addChild(wrongBg, 1);
wrongBg.visible = false;
picBg['wrongBg'] = wrongBg;
const textKey = 'text_' + keyArr[i];
const title = new MySprite(this.ctx);
title.init(this.images.get(textKey));
title.x = picBg.x;
title.y = picBg.y - picBg.height / 2 + 39;
bg.addChild(title);
this.answerTitleArr.push(title);
}
this.hideArr(this.textBgArr);
mapDown(event) {
const closeBtn = new MySprite(this.ctx);
closeBtn.init(this.images.get('close_btn'));
bg.addChild(closeBtn);
closeBtn.x = bg.width / 2 - 25;
closeBtn.y = -bg.height / 2 + 50;
this.closeBtn = closeBtn;
if (!this.canTouch) {
return;
}
if (this.checkClickTarget(this.leftBtn)) {
this.lastPageClick();
return;
}
}
if (this.checkClickTarget(this.rightBtn)) {
this.nextPageClick();
return;
}
initItemView() {
}
initHotZone() {
mapMove(event) {
let curBgRect;
if (this.bg) {
curBgRect = this.bg.getBoundingBox();
}
}
let oldBgRect = this.data.contentObj.bgItem.rect;
if (!oldBgRect) {
oldBgRect = curBgRect;
}
const rate = curBgRect.width / oldBgRect.width;
mapUp(event) {
// this.imgArr = [];
// const arr = this.data.contentObj.imgItemArr;
this.hotZoneArr = [];
const arr = this.data.contentObj.hotZoneItemArr;
if (!arr) return;
}
for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i]));
// const img = {pic_url: data.pic_url};
data.rect.x *= rate;
data.rect.y *= rate;
data.rect.width *= rate;
data.rect.height *= rate;
nextPageClick() {
console.log(' in leftBtnClick');
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
if (this.curPageIndex >= this.picArr.length - 1) {
return;
const hotZone = this.getHotZoneItem(data);
hotZone.alpha = 0;
this.hotZoneArr.push(hotZone);
// hotZone['audio'] = this.audioObj[data.audio_url];
// this.imgArr.push(img);
}
this.curPageIndex ++;
this.changePageByIndex();
//
//
// const hotZoneItemArr = this.data.contentObj.hotZoneItemArr;
// if (!hotZoneItemArr) {
// return;
// }
//
// if (!this.bg) {
// return;
// }
//
// const bgRect = this.bg.getBoundingBox();
// const bgItem = this.data.contentObj.bgItem;
//
// const rate = bgRect.width / bgItem.rect.width;
//
//
// for (let i = 0; i < hotZoneItemArr.length; i++) {
//
// const tmpData = hotZoneItemArr[i];
// const shapeRect = new ShapeRect(this.ctx);
// shapeRect.anchorX = 0;
// shapeRect.anchorY = 0;
// shapeRect.setSize(tmpData.rect.width, tmpData.rect.height);
// shapeRect.setScaleXY(this.bg.scaleX);
// shapeRect.x = (bgItem.rect.x - bgRect.x + tmpData.rect.x ) / rate;
// shapeRect.y = (bgItem.rect.y - bgRect.y + tmpData.rect.y ) / rate;
//
// // shapeRect.x = tmpData.rect.x - this.bg.width / 2;
// // shapeRect.y = tmpData.rect.y - this.bg.height / 2;
// // this.bg.addChild(shapeRect);
//
// this.renderArr.push(shapeRect);
// }
}
lastPageClick() {
console.log(' in rightBtnClick');
getHotZoneItem(data) {
const saveRect = data.rect;
const item = new ShapeRect(this.ctx);
item.setSize(saveRect.width, saveRect.height);
item.x = saveRect.x ;
item.y = saveRect.y ;
item['data'] = data;
if (this.curPageIndex <= 0) {
return;
}
this.renderArr.push(item);
this.curPageIndex --;
// console.log('data: ', data);
this.changePageByIndex();
return item;
}
changePageByIndex() {
console.log(' in changePageByIndex');
this.canTouch = false;
moveItem(this.bgLayer, -this.curPageIndex * this.canvasWidth, 0, 1, () => {
this.canTouch = true;
this.refreshPageLabel();
// this.resetCurData();
}, TWEEN.Easing.Cubic.Out);
initCard() {
const card = new MySprite(this.ctx);
card.init(this.images.get(this.getFrameColor()));
card.setScaleXY(this.mapScale);
card.x = this.canvasWidth / 2;
card.y = this.canvasHeight / 2;
this.addPic(card);
this.playAudio('click', true);
}
this.renderArr.push(card);
this.curCard = card;
this.addBottomCard();
}
getFrameColor() {
let arr = ['1', '2', '3'];
if (this.oldFrameColorId) {
removeItemFromArr(arr, this.oldFrameColorId);
}
arr = randomSortByArr(arr);
const colorId = arr[0];
this.oldFrameColorId = colorId;
return 'frame_' + colorId;
}
addPic(card) {
const curData = this.picArr[this.picIndex];
const w = 340;
const h = 340;
const pic = new MySprite(this.ctx);
pic.init(this.images.get(curData.pic_url));
const sx = w / pic.width;
const sy = h / pic.height;
const s = Math.min(sx, sy);
pic.setScaleXY(s);
pic.x = 5;
card.addChild(pic);
card.data = curData;
update() {
this.picIndex ++;
if (this.picIndex >= this.picArr.length) {
this.picIndex = 0;
}
}
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
initRobot() {
const robot = new MySprite(this.ctx);
robot.init(this.images.get('robot'));
robot.setScaleXY(this.mapScale);
robot.x = this.canvasWidth / 2 - 50 * this.mapScale;
robot.y = this.canvasHeight / 2 + 50 * this.mapScale;
this.renderArr.push(robot);
this.robot = robot;
const stick = new MySprite(this.ctx);
stick.init(this.images.get('stick'));
stick.anchorY = 0.95;
stick.x = robot.width / 2 + stick.width / 2 - 5;
stick.y = -25;
robot.addChild(stick);
this.stick = stick;
const ball = new MySprite(this.ctx);
ball.init(this.images.get('ball'));
ball.x = stick.x;
ball.y = stick.y - stick.height;
robot.addChild(ball);
this.ball = ball;
const mask = new MySprite(this.ctx);
mask.init(this.images.get('mask'));
mask.x = 31;
mask.y = 2;
robot.addChild(mask);
this.mask = mask;
// const w = 800;
// const h = 260;
// const rect = new ShapeRect(this.ctx);
// rect.setSize(w, h);
// rect.anchorX = 0.5;
// rect.anchorY = 0.5;
// mask.addChild(rect);
TWEEN.update();
}
this.updateArr(this.renderArr);
}
initBg() {
this.bgArr = [];
const bg = new MySprite(this.ctx);
bg.init(this.images.get('bg'));
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
const sx = this.canvasWidth / bg.width;
const sy = this.canvasHeight / bg.height;
const s = Math.max(sx, sy);
bg.setScaleXY(s);
this.bgArr.push(bg);
updateItem(item) {
if (item) {
item.update();
}
}
updateArr(arr) {
if (!arr) {
return;
}
for (let i = 0; i < arr.length; i++) {
arr[i].update(this);
}
// this.itemBgArr = [];
//
// const itemBgW = 459 * this.mapScale;
// const itemBgH = 342 * this.mapScale;
// const disW = 30 * this.mapScale;
// const disH = -25 * this.mapScale;
// const totalW = itemBgW * 2 + disW;
// const totalH = itemBgH * 2 + disH;
// const offX = this.canvasWidth / 2 - totalW / 2 + itemBgW / 2;
// const offY = this.canvasHeight / 2 - totalH / 2 + itemBgH / 2 + 10 * this.mapScale;
// for (let i = 0; i < 2; i ++) {
//
// for (let j = 0; j < 2; j++) {
//
// const itemBg = new MySprite(this.ctx);
// itemBg.init(this.images.get('item_bg'));
// itemBg.x = offX + (itemBgW + disW) * j;
// itemBg.y = offY + (itemBgH + disH) * i;
// itemBg.setScaleXY(this.mapScale);
// this.renderArr.push(itemBg);
// this.itemBgArr.push(itemBg);
// }
//
// }
//
//
}
initWheel() {
initHotZone() {
const wheelBottom = new MySprite(this.ctx);
wheelBottom.init(this.images.get('wheel_bottom'));
wheelBottom.x = this.canvasWidth / 2;
wheelBottom.y = this.canvasHeight / 2;
wheelBottom.setScaleXY(this.mapScale);
this.wheelBottom = wheelBottom;
let curBgRect;
if (this.bg) {
curBgRect = this.bg.getBoundingBox();
}
const num = this.picArr.length;
const colorArr = ['#FFF7CD', '#FFE190', '#FFF0A7'];
const len = wheelBottom.width / 2 * wheelBottom.scaleX * 0.78;
const wheel = new Wheel(this.ctx);
wheel.initWheel(num, len, colorArr);
wheel.x = wheelBottom.x;
wheel.y = wheelBottom.y - 5;
this.renderArr.push(wheel);
this.wheel = wheel;
let oldBgRect = this.data.contentObj.bgItem.rect;
if (!oldBgRect) {
oldBgRect = curBgRect;
}
const mask = new MySprite();
mask.init(this.images.get('mask'));
mask.setScaleXY(this.mapScale);
wheel.addChild(mask);
const rate = curBgRect.width / oldBgRect.width;
this.renderArr.push(wheelBottom);
// this.imgArr = [];
// const arr = this.data.contentObj.imgItemArr;
this.hotZoneArr = [];
const arr = this.data.contentObj.hotZoneItemArr;
if (!arr) return;
this.itemArr = [];
for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i]));
// const img = {pic_url: data.pic_url};
console.log('this.picArr.length: ', this.picArr.length);
for (let i = 0; i < this.picArr.length; i++) {
data.rect.x *= rate;
data.rect.y *= rate;
data.rect.width *= rate;
data.rect.height *= rate;
const picData = this.picArr[i];
let pic;
if (picData.optionType == 'B') {
pic = new MySprite(this.ctx);
pic.init(this.images.get(picData.pic_url));
} else {
const label = new Label(this.ctx);
label.text = picData.text;
label.fontName = 'BRLNSDB';
label.fontColor = '#000000';
label.textAlign = 'center';
label.fontSize = 48 * this.mapScale;
label.refreshSize();
pic = label;
}
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
pic['data'] = picData;
const hotZone = this.getHotZoneItem(data);
hotZone.alpha = 0;
this.hotZoneArr.push(hotZone);
this.wheel.addItem(pic, this.mapScale);
this.itemArr.push(pic);
}
}
const startBtn = new MySprite();
startBtn.init(this.images.get('start_btn'));
wheelBottom.addChild(startBtn);
this.goBtn = startBtn;
getHotZoneItem(data) {
const saveRect = data.rect;
const item = new ShapeRect(this.ctx);
item.setSize(saveRect.width, saveRect.height);
item.x = saveRect.x ;
item.y = saveRect.y ;
item['data'] = data;
this.renderArr.push(item);
const startBtn2 = new MySprite();
startBtn2.init(this.images.get('start_btn_2'));
wheelBottom.addChild(startBtn2);
this.startBtn = startBtn2;
startBtn2.visible = false;
return item;
const runBtn = new MySprite();
runBtn.init(this.images.get('run_btn'));
wheelBottom.addChild(runBtn);
this.runBtn = runBtn;
runBtn.visible = false;
}
showEndPatal() {
this.endPageArr = [];
this.showPetalFlag = true;
this.addPetal();
}
initArrow() {
stopEndPatal() {
this.endPageArr = [];
this.showPetalFlag = false;
const arrow = new MySprite();
arrow.init(this.images.get('arrow'));
arrow.setScaleXY(this.mapScale);
arrow.x = this.canvasWidth / 2;
arrow.y = arrow.height / 2 * arrow.scaleY;
this.renderArr.push(arrow);
this.arrow = arrow;
}
addPetal() {
hideArrow() {
if (!this.showPetalFlag) {
return;
}
moveItem(this.arrow, this.arrow.x, -this.arrow.height / 2 * this.arrow.scaleY, 0.3, () => {
const petal = this.getPetal();
}, TWEEN.Easing.Cubic.Out);
}
showArrow() {
moveItem(this.arrow, this.arrow.x, this.arrow.height / 2 * this.arrow.scaleY, 0.3, () => {
this.canTouch = true;
}, TWEEN.Easing.Cubic.Out);
this.playAudio('tip');
}
resetArm() {
this.arm1.page1.removeChildren();
this.arm1.page2.removeChildren();
this.arm2.page1.removeChildren();
this.arm2.page2.removeChildren();
this.arm1.x = this.arm1.baseX;
this.arm1.y = this.arm1.baseY;
this.arm2.x = this.arm2.baseX;
this.arm2.y = this.arm2.baseY;
this.arm1.page1.visible = true;
this.arm2.page1.visible = true;
this.arm1.page2.visible = false;
this.arm2.page2.visible = false;
this.picIndex ++ ;
if (this.picIndex >= this.picArr.length) {
this.picIndex = 0;
this.picArr = randomSortByArr(this.picArr);
}
this.setPagePoint();
this.initPic();
}
initPic() {
const w = 370; // * this.mapScale;
const h = 260;
const itemBgArr = this.itemBgArr;
// console.log('picArr:', this.picArr);
for (let i = 0; i < itemBgArr.length; i++) {
const itemBg = itemBgArr[i];
const picData = this.picArr[i];
if (picData) {
const picUrl = picData.pic_url;
// console.log('pirUrl: ', picUrl);
const pic = new MySprite(this.ctx);
pic.init(this.images.get(picUrl));
const sx = w / pic.width;
const sy = h / pic.height;
const s = Math.min(sx, sy);
pic.setScaleXY(s);
pic.x = -1;
pic.y = -9;
itemBg.addChild(pic);
itemBg['pic'] = pic;
}
const iconKey = 'icon_' + (i + 1);
const icon = new MySprite(this.ctx);
icon.init(this.images.get(iconKey));
icon.x = - itemBg.width / 2 + 40;
icon.y = - itemBg.height / 2 + 40;
itemBg.addChild(icon);
}
}
initArm() {
const pageOffX = this.pageOffX;
const arm1 = new MySprite(this.ctx);
arm1.init(this.images.get('arm_1_1'), 0, 1);
arm1.setScaleXY(this.mapScale);
arm1.x = - arm1.width * arm1.scaleX - this.pageW / 2 * this.mapScale;
arm1.y = this.canvasHeight + 60 * this.mapScale;
this.renderArr.push(arm1);
const page1 = new MySprite(this.ctx);
page1.init(this.images.get('page_1'), 0);
page1.x = arm1.width - pageOffX;
page1.y = - arm1.height + 80;
arm1.addChild(page1);
page1.alpha = 1;
const page1_2 = new MySprite(this.ctx);
page1_2.init(this.images.get('page_1_2'), 0);
page1_2.x = page1.x;
page1_2.y = page1.y;
page1_2.visible = false;
arm1.addChild(page1_2);
arm1['page1'] = page1;
arm1['page2'] = page1_2;
arm1['baseX'] = arm1.x;
arm1['baseY'] = arm1.y;
const finger = new MySprite(this.ctx);
finger.init(this.images.get('finger_1_1'), 0, 1);
arm1.addChild(finger);
const arm2 = new MySprite(this.ctx);
arm2.init(this.images.get('arm_2_1'), 1, 1);
arm2.setScaleXY(this.mapScale);
arm2.x = this.canvasWidth + arm2.width * arm2.scaleX + this.pageW / 2 * this.mapScale;
arm2.y = arm1.y;
this.renderArr.push(arm2);
const page2 = new MySprite(this.ctx);
page2.init(this.images.get('page_2'), 1);
page2.x = -arm2.width + pageOffX;
page2.y = - arm2.height + 80;
page2.alpha = 1;
arm2.addChild(page2);
const page2_2 = new MySprite(this.ctx);
page2_2.init(this.images.get('page_2_2'), 1);
page2_2.x = page2.x;
page2_2.y = page2.y;
page2_2.visible = false;
arm2.addChild(page2_2);
arm2['baseX'] = arm2.x;
arm2['baseY'] = arm2.y;
arm2['page1'] = page2;
arm2['page2'] = page2_2;
const finger2 = new MySprite(this.ctx);
finger2.init(this.images.get('finger_2_1'), 1, 1);
arm2.addChild(finger2);
const offX = this.canvasWidth / 2 - this.pageW / 2 * this.mapScale;
const tx = offX - (arm1.width) * arm1.scaleX + pageOffX * arm1.scaleX;
// moveItem(arm1, tx, arm1.y);
//
// moveItem(arm2, this.canvasWidth - tx, arm2.y);
this.page1 = page1;
this.page2 = page2;
this.arm1 = arm1;
this.arm2 = arm2;
}
setPagePoint() {
const page1 = this.page1;
const page2 = this.page2;
const curData = this.picArr[this.picIndex];
console.log('this.picArr: ', this.picArr);
console.log('curData: ', curData);
if (!curData) {
return;
}
const wordArr1 = curData.wordArr_1;
const wordArr2 = curData.wordArr_2;
const centerW = 60;
const edge = 20;
const maxW = page1.width - (centerW + edge * 2);
let num = wordArr1.length;
let disW = 20;
let circleW = 68;
let totalW = edge * 2 + circleW * num + disW * (num - 1);
let s = 1;
if (totalW >= maxW) {
s = maxW / totalW;
totalW = maxW;
}
disW *= s;
circleW *= s;
let offX = (maxW - totalW) / 2 + edge + circleW / 2;
// const disW = (w - circleW * 3) / 4;
// const offX = disW + circleW / 2;
for (let i = 0; i < wordArr1.length; i++) {
const tmpData = wordArr1[i];
let color = 'green';
if (tmpData.color) {
color = tmpData.color;
}
const point = new MySprite(this.ctx);
const key = 'point_' + color;
point.init(this.images.get(key));
point.setScaleXY(s);
point.x = offX + i * (circleW + disW);
page1.addChild(point);
}
num = wordArr2.length;
disW = 20;
circleW = 68;
totalW = edge * 2 + circleW * num + disW * (num - 1);
s = 1;
if (totalW >= maxW) {
s = maxW / totalW;
totalW = maxW;
}
disW *= s;
circleW *= s;
offX = (maxW - totalW) / 2 + edge + circleW / 2;
for (let i = 0; i < wordArr2.length; i++) {
const tmpData = wordArr2[i];
let color = 'green';
if (tmpData.color) {
color = tmpData.color;
}
const point = new MySprite(this.ctx);
const key = 'point_' + color;
point.init(this.images.get(key));
point.setScaleXY(s);
point.x = (offX + centerW - page2.width) + i * (circleW + disW);
page2.addChild(point);
}
}
initCenterPage() {
this.centerPageArr = [];
const offX = this.canvasWidth / 2 - this.pageW / 2 * this.mapScale;
const tx = offX - (this.arm1.width) * this.arm1.scaleX + this.pageOffX * this.arm1.scaleX;
const arm1_2 = new MySprite(this.ctx);
arm1_2.init(this.images.get('arm_1_2'), 0, 1);
arm1_2.setScaleXY(this.mapScale);
arm1_2.x = tx;
arm1_2.y = this.arm1.y;
// arm1_2.visible = false;
this.centerPageArr.push(arm1_2);
const finger = new MySprite(this.ctx);
finger.init(this.images.get('finger_1_2'), 0, 1);
arm1_2.addChild(finger, -2);
const arm2_2 = new MySprite(this.ctx);
arm2_2.init(this.images.get('arm_2_2'), 1, 1);
arm2_2.setScaleXY(this.mapScale);
arm2_2.x = this.canvasWidth - tx;
arm2_2.y = this.arm2.y;
// arm2_2.visible = false;
this.centerPageArr.push(arm2_2);
const finger2 = new MySprite(this.ctx);
finger2.init(this.images.get('finger_2_2'), 1, 1);
arm2_2.addChild(finger2, -2);
const centerPage = new MySprite(this.ctx);
centerPage.init(this.images.get('center_page'), 0);
centerPage.x = this.page1.x;
centerPage.y = this.page1.y;
arm1_2.addChild(centerPage, -1);
this.hideArr(this.centerPageArr);
// this.hideArr(this.centerPageArr);
}
initStartPage() {
this.starArr = [];
const maskLayer = new ShapeRect(this.ctx);
maskLayer.init(this.images.get(''));
maskLayer.setSize(this.canvasWidth, this.canvasHeight);
maskLayer.x = this.canvasWidth / 2;
maskLayer.y = this.canvasHeight / 2;
maskLayer.fillColor = '#000000';
maskLayer.alpha = 0.8;
this.startPageArr.push(maskLayer);
const startBtn = new MySprite(this.ctx);
startBtn.init(this.images.get('start_btn'));
startBtn.x = this.canvasWidth / 2;
startBtn.y = this.canvasHeight / 5 * 3;
startBtn.setScaleXY(this.mapScale);
this.startPageArr.push(startBtn);
this.startBtn = startBtn;
}
initEndPage() {
const maskLayer = new ShapeRect(this.ctx);
maskLayer.init(this.images.get(''));
maskLayer.setSize(this.canvasWidth, this.canvasHeight);
maskLayer.x = this.canvasWidth / 2;
maskLayer.y = this.canvasHeight / 2;
maskLayer.fillColor = '#000000';
maskLayer.alpha = 0.8;
this.endPageArr.push(maskLayer);
const leftWin = new MySprite(this.ctx);
leftWin.init(this.images.get('left_win'));
leftWin.x = this.canvasWidth / 2;
leftWin.y = this.canvasHeight / 2.5;
leftWin.setScaleXY(this.mapScale);
this.endPageArr.push(leftWin);
const rightWin = new MySprite(this.ctx);
rightWin.init(this.images.get('right_win'));
rightWin.x = this.canvasWidth / 2;
rightWin.y = this.canvasHeight / 2.5;
rightWin.setScaleXY(this.mapScale);
this.endPageArr.push(rightWin);
this.leftWin = leftWin;
this.rightWin = rightWin;
// const light = new MySprite(this.ctx);
// light.init(this.images.get('light_png'));
// light.x = this.canvasWidth / 2;
// light.y = this.canvasHeight / 5 * 2;
// light.setScaleXY(this.mapScale);
// this.endPageArr.push(light);
// this.light = light;
//
// const hand = new MySprite(this.ctx);
// hand.init(this.images.get('hand_png'));
// hand.x = this.canvasWidth / 2;
// hand.y = light.y;
// hand.setScaleXY(this.mapScale);
// this.endPageArr.push(hand);
// this.hand = hand;
const replayBtn = new MySprite(this.ctx);
replayBtn.init(this.images.get('replay_btn'));
replayBtn.x = this.canvasWidth / 2;
replayBtn.y = this.canvasHeight / 5 * 3.5;
replayBtn.setScaleXY(this.mapScale);
this.endPageArr.push(replayBtn);
this.replayBtn = replayBtn;
this.hideArr(this.endPageArr);
// const lightAction = () => {
// light.rotation = 0;
// rotateItem(light, 360, 10, () => {
// lightAction();
// });
// };
//
// lightAction();
}
initScore() {
const addLabelShadow = (label) => {
const labelShadow = new Label(this.ctx);
labelShadow.init();
labelShadow.text = label.text;
labelShadow.fontSize = label.fontSize;
labelShadow.fontName = label.fontName;
labelShadow.fontColor = '#e4688f';
labelShadow.textAlign = 'center';
labelShadow.y = 3;
labelShadow.setShadow(0, 2, 2, 'rgba(154, 23, 58, 0.5)');
label.addChild(labelShadow, -1);
label.shadowLabel = labelShadow;
};
const labelLeft = new Label(this.ctx);
labelLeft.init();
labelLeft.text = '0';
labelLeft.fontSize = 60;
labelLeft.fontName = 'BRLNSDB';
labelLeft.fontColor = '#fef9ff';
labelLeft.textAlign = 'center';
labelLeft.x = - this.bgTop.width / 4;
labelLeft.y = this.bgTop.height / 5;
labelLeft.refreshSize();
addLabelShadow(labelLeft);
this.bgTop.addChild(labelLeft);
this.leftScoreLabel = labelLeft;
const labelRight = new Label(this.ctx);
labelRight.init();
labelRight.text = '0';
labelRight.fontSize = 60;
labelRight.fontName = 'BRLNSDB';
labelRight.fontColor = '#fef9ff';
labelRight.textAlign = 'center';
labelRight.x = this.bgTop.width / 4;
labelRight.y = this.bgTop.height / 5;
labelRight.refreshSize();
addLabelShadow(labelRight);
this.bgTop.addChild(labelRight);
this.rightScoreLabel = labelRight;
// console.log('label.width: ', label.width);
}
showEndPage() {
this.showArr(this.endPageArr);
this.canTouch = true;
this.gameEndFlag = true;
this.showEndPatal();
this.successAudio.play();
if (this.leftScore >= this.maxScore) {
this.rightWin.visible = false;
} else {
this.leftWin.visible = false;
}
}
showEndPatal() {
this.showPetalFlag = true;
this.addPetal();
}
addPetal() {
if (!this.showPetalFlag) {
return;
}
const petal = this.getPetal();
this.endPageArr.push(petal);
moveItem(petal, petal.x, this.canvasHeight + petal.height * petal.scaleY, petal['time'], () => {
removeItemFromArr(this.endPageArr, petal);
});
moveItem(petal, petal.x, this.canvasHeight + petal.height * petal.scaleY, petal['time'], () => {
removeItemFromArr(this.endPageArr, petal);
});
rotateItem(petal, petal['tr'], petal['time']);
setTimeout(() => {
this.addPetal();
}, 100);
}
getPetal() {
const petal = new MySprite(this.ctx);
const id = Math.ceil( Math.random() * 3 );
petal.init(this.images.get('petal_' + id));
const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale;
petal.setScaleXY(randomS);
const randomR = Math.random() * 360;
petal.rotation = randomR;
const randomX = Math.random() * this.canvasWidth;
petal.x = randomX;
petal.y = -petal.height / 2 * petal.scaleY;
const randomT = 2 + Math.random() * 5;
petal['time'] = randomT;
let randomTR = 360 * Math.random(); // - 180;
if (Math.random() < 0.5) { randomTR *= -1; }
petal['tr'] = randomTR;
return petal;
}
gameEnd() {
this.showEndPage();
}
mapDown(event) {
if (!this.canTouch) {
return;
}
//
//
// if (this.mask.visible) {
//
// if (this.checkClickTarget(this.closeBtn)) {
// this.closeBtnClick();
// return;
// }
//
// if (this.textBgArr[0].visible) {
//
// for (let i = 0; i < this.textBgArr.length; i++) {
// if (this.checkClickTarget(this.textBgArr[i])) {
// this.clickTextBg(i);
// return;
// }
// }
//
// } else {
//
// for (let i = 0; i < this.picBgArr.length; i++) {
// if (this.checkClickTarget(this.picBgArr[i])) {
// this.clickPicBg(i);
// return;
// }
// }
// }
//
//
// } else {
if (this.checkClickTarget(this.startBtn)) {
this.goBtnClick();
return;
}
if (this.checkClickTarget(this.wheelBottom)) {
this.clickWheel();
return;
}
// }
}
clickWheel() {
// console.log( ' in clickWheel');
// console.log('wheel r: ', this.wheel.rotation);
let angle = getAngleByPos(this.wheel.x, this.wheel.y, this.mx, this.my);
// console.log('angle: ', angle);
// const oneAngle = 360 / this.picArr.length;
// angle += (270 + oneAngle / 2 + this.wheel.rotation % oneAngle);
// angle = angle % 360;
if (this.wheel.curItem) {
const oneAngle = 360 / this.picArr.length;
if (angle < oneAngle || angle > (360 - oneAngle)) {
const data = this.wheel.curItem.data;
const audio = this.audioObj[data.audio_url];
if (audio) {
audio.play();
}
}
}
}
clickTextBg(index) {
if (this.rightFlag) {
return;
}
const data = this.picArr[this.picIndex];
if (index == Number(data.answerId)) {
this.textBgArr[index].rightBg.visible = true;
this.rightFlag = true;
this.playAudio('right');
} else {
this.textBgArr[index].wrongBg.visible = true;
this.playAudio('wrong');
}
}
clickPicBg(index) {
if (this.rightFlag) {
return;
}
const data = this.picArr[this.picIndex];
if (index == Number(data.answerId)) {
this.picBgArr[index].rightBg.visible = true;
this.rightFlag = true;
this.playAudio('right');
} else {
this.picBgArr[index].wrongBg.visible = true;
this.playAudio('wrong');
}
}
closeBtnClick() {
this.mask.visible = false;
// this.grouoLightIndex = 0;
this.animaNewStopRun = false;
// this.lightDelayTime = 1;
for (let i = 0; i < this.ballArr.length; i++) {
this.ballArr[i].light.alpha = 0;
}
this.initLightAnimaNew();
this.playAudio('click_1');
}
goBtnClick() {
this.canTouch = false;
this.wheelRun();
this.hideArrow();
// this.playAudio('click_1');
// this.playAudio('bg');
}
getNextItemIndex() {
if (!this.idArr || this.idArr.length <= 0) {
this.idArr = [];
for (let i = 0; i < this.picArr.length; i++) {
this.idArr.push(i);
}
this.idArr = randomSortByArr(this.idArr);
}
return this.idArr.pop();
}
wheelRun() {
this.wheel.showAllItem();
const rateArea = 0.8;
const num = this.picArr.length;
const id = this.getNextItemIndex();
const angle = 360 / num ; // this.picArr.length;
const targetAngle = 360 * 4 + id * angle - 90 - (angle * (1 - rateArea) / 2 + angle * rateArea * Math.random());
// console.log('id: ', id);
this.picIndex = id;
this.lightDelayTime = 0;
rotateItem(this.wheel, 360 * 11, 2.2 , () => {
this.wheel.rotation = this.wheel.rotation % 360;
rotateItem(this.wheel, targetAngle, 1.6, () => {
this.wheel.rotation = this.wheel.rotation % 360;
// this.showAllLight();
// this.playAudio('tip');
// moveItem(this.arrow, this.arrow.x, this.arrow.y - 20 * this.mapScale, 0.5, ( ) => {
//
// setTimeout(() => {
// this.showQuestionWindow();
// }, 0.7 * 1000);
//
// }, TWEEN.Easing.Elastic.Out);
const item = this.itemArr[id];
this.wheel.showLightItem(item);
this.goBtn.visible = true;
this.runBtn.visible = false;
this.showArrow();
}, TWEEN.Easing.Sinusoidal.Out);
});
// moveItem(this.arrow, this.arrow.x, this.arrow.baseY, 0.3, ( ) => {
//
// }, TWEEN.Easing.Cubic.Out);
//
//
//
// this.animaStopRun = false;
// this.animaNewStopRun = true;
// for (let i = 0; i < this.ballArr.length; i++) {
// this.ballArr[i].light.alpha = 0;
// }
// this.lightDelayTime = 0;
// this.initLightAnima();
//
this.playAudio('wheel_run');
this.goBtn.visible = false;
this.runBtn.visible = true;
}
rotateItem(petal, petal['tr'], petal['time']);
showAllLight() {
this.animaStopRun = true;
// clearTimeout(this.lightDelayId);
setTimeout(() => {
this.addPetal();
}, 200);
for (let i = 0; i < this.ballArr.length; i++) {
showItem(this.ballArr[i].light, 0.02);
// this.ballArr[i].light.alpha = 1;
}
}, 0.03 * 1000);
}
showQuestionWindow() {
getPetal() {
const petal = new MySprite(this.ctx);
this.setQuestionWindowData();
this.mask.visible = true;
const id = Math.ceil( Math.random() * 3 );
petal.init(this.images.get('petal_' + id));
const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale;
petal.setScaleXY(randomS);
const randomR = Math.random() * 360;
petal.rotation = randomR;
const randomX = Math.random() * this.canvasWidth;
petal.x = randomX;
petal.y = -petal.height / 2 * petal.scaleY;
this.questionBg.setScaleXY(this.mapScale * 0.9);
const randomT = 2 + Math.random() * 5;
petal['time'] = randomT;
scaleItem(this.questionBg, this.mapScale, 0.5, () => {
this.canTouch = true;
}, TWEEN.Easing.Elastic.Out);
this.playAudio('show_window');
}
setQuestionWindowData() {
this.rightFlag = false;
const data = this.picArr[this.picIndex];
if (data.question_pic_url) {
this.questionLabel.text = data.question;
this.questionLabel.visible = true;
this.questionLabel2.visible = false;
} else {
this.questionLabel2.text = data.question;
this.questionLabel2.visible = true;
this.questionLabel.visible = false;
}
const answerArr = data.answerArr;
if (data.answerType == 'A') {
this.showArr(this.textBgArr);
this.hideArr(this.picBgArr);
this.hideArr(this.answerTitleArr);
} else {
this.showArr(this.picBgArr);
this.showArr(this.answerTitleArr);
this.hideArr(this.textBgArr);
}
for (let i = 0; i < answerArr.length; i++) {
this.textBgArr[i].rightBg.visible = false;
this.textBgArr[i].wrongBg.visible = false;
if (this.answerLabelArr[i] && answerArr[i].text) {
this.answerLabelArr[i].text = answerArr[i].text;
} else {
this.answerLabelArr[i].text = '';
}
}
if (data.question_pic_url) {
const picRect = this.questionPicRect;
picRect.removeChildren();
const pic = new MySprite(this.ctx);
pic.init(this.images.get(data.question_pic_url));
pic.setScaleXY(getMinScale(pic, picRect.width));
pic.x = picRect.width / 2;
pic.y = picRect.height / 2;
picRect.addChild(pic);
this.questionPicRect.visible = true;
} else {
this.questionPicRect.visible = false;
}
const picLen = 206;
for (let i = 0; i < 4; i++) {
const picBg = this.picBgArr[i];
picBg.removeChildren();
picBg.wrongBg.visible = false;
picBg.rightBg.visible = false;
const picUrl = answerArr[i].pic_url;
if (picUrl) {
const pic = new MySprite(this.ctx);
pic.init(this.images.get(picUrl));
pic.y = 35;
pic.setScaleXY(getMinScale(pic, picLen));
picBg.addChild(pic);
}
}
}
clickItem(index) {
const curData = this.picArr[index];
console.log("curData: ", curData);
const audio = this.audioObj[curData.audio_url];
if (audio) {
audio.play();
}
}
changeCard() {
this.canTouch = false;
const x = this.canvasWidth * 1.5;
const y = this.canvasHeight * - 0.7;
moveItem(this.curCard, x, y, 1, () => {
// this.canTouch = true;
}, TWEEN.Easing.Sinusoidal.Out);
rotateItem(this.curCard, 150);
this.bottomCard.visible = true;
scaleItem(this.bottomCard, this.mapScale, 0.6, () => {
this.canTouch = true;
}, TWEEN.Easing.Elastic.Out);
this.curCard = this.bottomCard;
this.addBottomCard();
}
addBottomCard() {
const bottomCard = new MySprite(this.ctx);
bottomCard.init(this.images.get(this.getFrameColor()));
bottomCard.setScaleXY(this.mapScale * 0.95);
bottomCard.x = this.canvasWidth / 2;
bottomCard.y = this.canvasHeight / 2;
bottomCard.visible = false;
this.addPic(bottomCard);
this.renderArr.unshift(bottomCard);
this.bottomCard = bottomCard;
}
moveArm1() {
this.canTouch = false;
const arm1 = this.arm1;
const offX = this.canvasWidth / 2 - this.pageW / 2 * this.mapScale;
const tx = offX - (arm1.width) * arm1.scaleX + this.pageOffX * arm1.scaleX;
moveItem(this.arm1, tx, arm1.y, 0.8, () => {
this.canTouch = true;
this.clickLeft();
} );
}
moveArm2() {
const arm1 = this.arm1;
const arm2 = this.arm2;
const offX = this.canvasWidth / 2 - this.pageW / 2 * this.mapScale;
const tx = offX - (arm1.width) * arm1.scaleX + this.pageOffX * arm1.scaleX;
this.canTouch = false;
moveItem(arm2, this.canvasWidth - tx, arm2.y, 0.8, () => {
this.canTouch = true;
this.clickRight();
} );
}
clickTitle() {
this.titleAudio.play();
}
clickEmpty() {
this.moveDown();
}
clickBall() {
// console.log('in clickBall');
this.canTouch = false;
const down = () => {
const targetY = this.stick.y + this.stick.height;
tweenChange(this.ball, {y: targetY}, 0.8, () => {
up();
}, TWEEN.Easing.Quadratic.In, () => {
this.stick.scaleY = (this.stick.y - this.ball.y) / this.stick.height;
});
if (this.curPic) {
hideItem(this.curPic, 0.7);
showItem(this.mask, 0.7);
}
};
const up = () => {
const targetY = this.stick.y - this.stick.height;
tweenChange(this.ball, {y: targetY}, 0.8, () => {
this.canTouch = true;
}, TWEEN.Easing.Quadratic.Out, () => {
this.stick.scaleY = (this.stick.y - this.ball.y) / this.stick.height;
});
this.showPic();
};
down();
}
showPic() {
this.mask.removeChildren();
const data = this.picArr[this.picIndex];
this.curData = data;
const curPic = new MySprite(this.ctx);
curPic.init(this.images.get(data.pic_url));
const sx = this.picW / curPic.width;
const sy = this.picH / curPic.height;
const s = Math.min(sx, sy);
curPic.setScaleXY(s);
this.robot.addChild(curPic);
curPic.x = this.mask.x;
curPic.y = this.mask.y;
this.curPic = curPic;
curPic.alpha = 0;
showItem(curPic);
hideItem(this.mask);
this.picIndex ++;
if (this.picIndex >= this.picArr.length) {
this.picIndex = 0;
}
}
clickPic() {
// console.log('in clickPic');
const curData = this.curData;
const audio = this.audioObj[curData.audio_url];
if (audio) {
audio.play();
}
}
clickLeft() {
const curData = this.picArr[this.picIndex];
const audio = this.audioObj[curData.word_1_audio_url];
if (audio) {
audio.play();
}
}
clickRight() {
const curData = this.picArr[this.picIndex];
const audio = this.audioObj[curData.word_2_audio_url];
if (audio) {
audio.play();
}
}
clickCenter() {
console.log(' in clickCenter');
this.canTouch = false;
this.arm1.visible = false;
this.arm2.visible = false;
this.showArr(this.centerPageArr);
setTimeout(() => {
this.arm1.visible = true;
this.arm2.visible = true;
this.hideArr(this.centerPageArr);
this.arm1.page1.visible = false;
this.arm1.page2.visible = true;
this.arm2.page1.visible = false;
this.arm2.page2.visible = true;
this.canTouch = true;
}, 0.25 * 1000);
// this.arm1.centerSpr.visible = true;
// this.arm1.centerSpr.x = this.arm1.x;
// this.arm1.centerSpr.y = this.arm1.y;
}
mapMove(event) {
}
mapUp(event) {
let randomTR = 360 * Math.random(); // - 180;
if (Math.random() < 0.5) { randomTR *= -1; }
petal['tr'] = randomTR;
return petal;
}
moveDown() {
this.canTouch = false;
const data = {y: this.arm1.y};
const tween = tweenChange(data, {y: this.arm1.y + this.canvasHeight}, 1,
() => {
this.canTouch = true;
this.resetArm();
},
TWEEN.Easing.Quadratic.In,
(item, progress) => {
this.arm1.y = item.y;
this.arm2.y = item.y;
});
}
update() {
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
TWEEN.update();
// this.updateWordArr();
//
this.updateArr(this.bgArr);
this.updateArr(this.renderArr);
//
//
// this.updateItem(this.mask);
}
updateItem(item) {
if (item) {
item.update();
}
}
updateArr(arr) {
if (!arr) {
return;
}
for (let i = 0; i < arr.length; i++) {
arr[i].update(this);
}
}
......@@ -971,23 +2580,13 @@ export class PlayComponent implements OnInit, OnDestroy {
addMouseListener();
addTouchListener();
}
}
playAudio(key, now = false, callback = null) {
playAudio(key) {
const audio = this.audioObj[key];
if (audio) {
if (now) {
audio.pause();
audio.currentTime = 0;
}
if (callback) {
audio.onended = () => {
callback();
};
}
audio.play();
}
}
......@@ -1074,7 +2673,7 @@ export class PlayComponent implements OnInit, OnDestroy {
resolve();
};
audio.onerror = () => {
reject();
reject;
};
audio.src = url;
audio.load();
......
const res = [
['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
['text_bg', "assets/play/text_bg.png"],
['wheel_bottom', "assets/play/wheel_bottom.png"],
['start_btn', "assets/play/start_btn.png"],
['start_btn_2', "assets/play/start_btn2.png"],
['run_btn', "assets/play/run_btn.png"],
['arrow', "assets/play/arrow.png"],
['mask', "assets/play/mask.png"],
];
......@@ -13,9 +17,16 @@ const res = [
const resAudio = [
// ['click', "assets/play/music/click.mp3"],
// ['audio_bg', "assets/play/music/bg.mp3"],
['tip', "assets/play/music/tip.mp3"],
['wheel_run', "assets/play/music/wheel_run.mp3"],
// ['audio_click_level_1', "assets/play/music/click_level_1.mp3"],
// ['audio_click_level_2', "assets/play/music/click_level_2.mp3"],
// ['audio_right', "assets/play/music/right.mp3"],
// ['audio_wrong', "assets/play/music/wrong.mp3"],
// ['audio_show_window', "assets/play/music/show_window.mp3"],
// ['audio_tip', "assets/play/music/tip.mp3"],
// ['audio_wheel_run', "assets/play/music/wheel_run.mp3"],
];
......
src/assets/play/bg.jpg

25.8 KB | W: | H:

src/assets/play/bg.jpg

124 KB | W: | H:

src/assets/play/bg.jpg
src/assets/play/bg.jpg
src/assets/play/bg.jpg
src/assets/play/bg.jpg
  • 2-up
  • Swipe
  • Onion skin
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