Commit 987a5093 authored by limingzhe's avatar limingzhe

first

parent baec353a
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
"nedb": "^1.8.0", "nedb": "^1.8.0",
"ng-lottie": "^0.3.1", "ng-lottie": "^0.3.1",
"ng-zorro-antd": "^7.2.0", "ng-zorro-antd": "^7.2.0",
"npm": "^6.5.0", "npm": "^6.13.4",
"rxjs": "^6.3.3", "rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3", "rxjs-compat": "^6.3.3",
"rxjs-tslint": "^0.1.6", "rxjs-tslint": "^0.1.6",
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
"zone.js": "^0.8.26" "zone.js": "^0.8.26"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^0.11.4", "@angular-devkit/build-angular": "^0.803.20",
"@angular/cli": "^7.2.10", "@angular/cli": "^7.2.10",
"@angular/compiler-cli": "^7.2.10", "@angular/compiler-cli": "^7.2.10",
"@angular/language-service": "^7.2.10", "@angular/language-service": "^7.2.10",
......
...@@ -4,99 +4,17 @@ ...@@ -4,99 +4,17 @@
<div *ngFor="let it of picArr; let i = index" <div style="padding: 3vw; display: flex; align-items: center">
nz-col nzSpan="8" >
<span style="padding-right: 1vw"> 人数: </span>
<nz-radio-group [(ngModel)]="item.contentObj.type" (ngModelChange)="log(item.contentObj.type)">
<div class="item-box"> <div nz-row nzType="flex" nzJustify="space-around" nzAlign="middle">
<div *ngFor="let pic of picArr; let i = index" nz-col nzSpan="6">
<label nz-radio nzValue={{i}}> {{pic.text}} </label>
<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; justify-items: center; padding-top: 10px">
<app-audio-recorder
[audioUrl]="it.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it)">
</app-audio-recorder>
<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">
<i nz-icon type="close"></i>
</button>
</div> </div>
</div>
<!--<h5> id-{{i+1}} </h5>-->
<!--<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>-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--<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; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--answer:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['a_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
<!--</app-audio-recorder>-->
<!--</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>
</nz-radio-group>
<div nz-col nzSpan="8" class="add-btn-box" >
<!--<div style="width: 100%; height: 100%;">-->
<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
</button>
<!--</div>-->
</div> </div>
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
.item-box{ .item-box{
width: 100%; //margin: auto;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
flex-direction: column; flex-direction: column;
padding: 10px; padding: 10px;
padding-bottom: 5vw; padding-bottom: 2vw;
padding-top: 5vw; padding-top: 3vw;
} }
...@@ -41,14 +41,21 @@ ...@@ -41,14 +41,21 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
//width: 180px; //width: 180px;
height: 20vw; height: 15vw;
//background: #FFDC00; //background: #FFDC00;
padding: 10px; padding: 10px;
padding-top: 5vw; padding-top: 1vw;
} }
} }
.border {
border-radius: 20px;
border-style: dashed;
}
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';
...@@ -10,15 +20,18 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,15 +20,18 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
picArr = []; picArr = [];
optionArr = [];
_item: any; _item: any;
KEY = 'hw_000'; KEY = 'dfzx_17';
answerType = 'A';
refreshTimeId;
refreshLabel = 0;
// @Input() // @Input()
set item(item) { set item(item) {
...@@ -35,7 +48,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -35,7 +48,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
constructor(private appRef: ApplicationRef) {
constructor(private appRef: ApplicationRef,
public changeDetectorRef: ChangeDetectorRef) {
} }
...@@ -60,6 +76,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -60,6 +76,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
console.log('~data:', data); console.log('~data:', data);
this.init(); this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh(); this.refresh();
}, this.KEY); }, this.KEY);
...@@ -71,6 +91,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -71,6 +91,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
ngOnDestroy() { ngOnDestroy() {
clearTimeout( this.refreshTimeId);
} }
...@@ -81,17 +103,36 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -81,17 +103,36 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} else { } else {
this.picArr = this.getDefaultPicArr(); this.picArr = this.getDefaultPicArr();
this.item.contentObj.picArr = this.picArr; this.item.contentObj.picArr = this.picArr;
this.item.contentObj.type = 0;
} }
console.log('item:' , this.item); }
// this.picArr = this.getDefaultPicArr();
// this.item.contentObj.picArr = this.picArr; startRefresh() {
// console.log('this.item:;', this.picArr);
this.refreshTimeId = setTimeout(() => {
this.refreshLabel ++;
this.startRefresh();
this.refresh();
}, 1000);
} }
getDefaultPicArr() { getDefaultPicArr() {
const arr = []; const arr = [
{
text: '一人',
type: '0'
},
{
text: '两人',
type: '1'
}
];
// for (let i = 0; i < 4; i ++) { // for (let i = 0; i < 4; i ++) {
// const data = {}; // const data = {};
// data['pic_url'] = ''; // data['pic_url'] = '';
...@@ -126,10 +167,26 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -126,10 +167,26 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
// this.update.emit(this.item); // this.update.emit(this.item);
this.refreshOptionsPicArr();
this.save(); this.save();
} }
deleteOption(data) {
const index = this.optionArr.indexOf(data);
if (index !== -1) {
this.optionArr.splice(index, 1);
}
this.save();
}
refreshOptionsPicArr() {
for (let i = 0; i < this.optionArr.length; i++) {
const option = this.optionArr[i];
option.picArr = this.getOptionPicArr();
}
}
...@@ -166,15 +223,54 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -166,15 +223,54 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
addPic() { addPic() {
this.picArr.push({
const data = {
text: '',
pic_url: '', pic_url: '',
audio_url: '', audio_url: '',
// text: '', // text: '',
// radioValue: 'A' // radioValue: 'A'
}); };
this.picArr.push(data);
this.refreshOptionsPicArr();
this.saveItem(); this.saveItem();
}
addOption() {
const data = {
text: '',
pic_url: '',
audio_url: '',
type: '0'
};
data['picArr'] = this.getOptionPicArr();
this.optionArr.push(data);
this.saveItem();
}
getOptionPicArr() {
const arr = [];
for (let i = 0; i < this.picArr.length; i++) {
const data = {};
data['label'] = '类别-' + (i + 1);
data['value'] = i;
arr.push(data);
} }
return arr;
}
radioClick(it, radioValue) { radioClick(it, radioValue) {
it.radioValue = radioValue; it.radioValue = radioValue;
...@@ -189,10 +285,18 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -189,10 +285,18 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
saveItem() { saveItem() {
console.log(' in saveItem');
// this.update.emit(this.item); // this.update.emit(this.item);
this.save(); this.save();
} }
log(a) {
console.log('a:', a);
this.save();
}
save() { save() {
(<any> window).courseware.setData(this.item, null, this.KEY); (<any> window).courseware.setData(this.item, null, this.KEY);
......
...@@ -1378,7 +1378,7 @@ export function getPosDistance(sx, sy, ex, ey) { ...@@ -1378,7 +1378,7 @@ export function getPosDistance(sx, sy, ex, ey) {
return len; return len;
} }
export function delayCall(callback, second) { export function delayCall(item, callback, second) {
const tween = new TWEEN.Tween(this) const tween = new TWEEN.Tween(this)
.delay(second * 1000) .delay(second * 1000)
.onComplete(() => { .onComplete(() => {
...@@ -1543,3 +1543,54 @@ export function shake(item, time = 0.5, callback = null, rate = 1) { ...@@ -1543,3 +1543,54 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
// --------------- custom class -------------------- // --------------- custom class --------------------
export function showBlingBling(starImg, rectArea, parent, mapScale = 1, num = 30, disTime = 0.1, showTime = 3) {
const timeId = setInterval(() => {
showBlingStar(starImg, num, rectArea, parent, mapScale);
}, disTime * 1000);
//
// const tmpObj = {};
// tmpObj['timeId'] = timeId;
setTimeout(() => {
clearInterval(timeId);
}, showTime * 1000);
}
function showBlingStar(starImg, num, rectArea, parent, mapScale) {
for (let i = 0; i < num; i++) {
const star = new MySprite();
star.init(starImg);
const px = rectArea.x + Math.random() * rectArea.width;
const py = rectArea.y + Math.random() * rectArea.height;
star.x = px;
star.y = py;
const randomS = (0.1 + Math.random() * 0.8) * mapScale;
star.setScaleXY(0);
parent.addChild(star);
scaleItem(star, randomS, 0.3, () => {
setTimeout(() => {
scaleItem(star, 0, 0.3, () => {
parent.removeChild(star);
});
}, 100 + Math.random() * 200);
});
}
}
...@@ -6,7 +6,7 @@ import { ...@@ -6,7 +6,7 @@ import {
moveItem, moveItem,
rotateItem, rotateItem,
removeItemFromArr, removeItemFromArr,
ShapeRect, ShapeRect, tweenChange, scaleItem, hideItem, showBlingBling,
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import {res, resAudio} from './resources';
...@@ -20,6 +20,7 @@ import TWEEN from '@tweenjs/tween.js'; ...@@ -20,6 +20,7 @@ import TWEEN from '@tweenjs/tween.js';
@Component({ @Component({
selector: 'app-play', selector: 'app-play',
templateUrl: './play.component.html', templateUrl: './play.component.html',
...@@ -79,17 +80,55 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -79,17 +80,55 @@ export class PlayComponent implements OnInit, OnDestroy {
canTouch = true; canTouch = true;
KEY = 'hw_000'; KEY = 'dfzx_17';
// ----- // -----
picArr; picArr;
pageLabel; pageLabel;
leftBtn; leftBtn;
rightBtn; rightBtn;
bgLayer; bgLayer;
curPageIndex; curPageIndex;
letter;
bread;
panel;
breadLayer;
downFlag;
moveFlag;
dotArr;
curPosArr;
curPosIndex;
posDataIndex;
posDataArr;
curLine;
lineArr;
breadBtn;
panelBtn;
circleArr;
playSoundFlag;
timeIdArr = [];
roleNumber;
leftLayer;
rightLayer;
leftTypeItemArr;
leftColorItemArr;
rightColorItemArr;
rightTypeItemArr;
leftRole;
rightRole;
leftSexBtn;
rightSexBtn;
unselectAlpha = 0.3;
leftTypeIndex = 0;
rightTypeIndex = 0;
touchAreaMinLen = 15;
drawLineWidth = 31;
drawLineColor;
hotZoneArr; hotZoneArr;
...@@ -154,22 +193,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -154,22 +193,10 @@ export class PlayComponent implements OnInit, OnDestroy {
initDefaultData() { initDefaultData() {
let picArr = this.data.contentObj.picArr; if (!this.data.contentObj.type) {
// console.log('picArr: ', picArr); this.data.contentObj.type = '1';
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'
});
} }
this.data.contentObj.picArr = picArr;
}
} }
...@@ -203,11 +230,24 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -203,11 +230,24 @@ export class PlayComponent implements OnInit, OnDestroy {
for (let i = 0; i < this.timeIdArr.length; i++) {
clearTimeout( this.timeIdArr[i] );
}
this.leftTypeIndex = 0;
this.rightTypeIndex = 0;
this.canTouch = true; this.canTouch = true;
this.playSoundFlag = false;
this.circleArr = [];
this.lineArr = [];
this.dotArr = [];
this.curPageIndex = 0; this.curPageIndex = 0;
this.roleNumber = Number(this.data.contentObj.type) + 1;
// this.downFlag = false; // this.downFlag = false;
...@@ -222,6 +262,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -222,6 +262,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.picIndex = 0; this.picIndex = 0;
this.letter = this.data.contentObj.letter;
} }
...@@ -278,6 +319,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -278,6 +319,13 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
arr = contentObj.hotZoneItemArr;
if (arr) {
for (let i = 0; i < arr.length; i++) {
addUrlToAudioObj(arr[i].audio_url);
}
}
...@@ -303,7 +351,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -303,7 +351,10 @@ export class PlayComponent implements OnInit, OnDestroy {
}; };
addOneAudio('click', this.rawAudios.get('click'), 0.3); addOneAudio('click', this.rawAudios.get('click'), 0.5);
addOneAudio('click_2', this.rawAudios.get('click_2'), 0.2);
addOneAudio('click_3', this.rawAudios.get('click_3'), 0.5);
addOneAudio('star', this.rawAudios.get('star'), 0.5);
// addOneAudio('angry', this.rawAudios.get('angry'), 1); // addOneAudio('angry', this.rawAudios.get('angry'), 1);
// addOneAudio('cow_start', this.rawAudios.get('cow_start'), 1); // addOneAudio('cow_start', this.rawAudios.get('cow_start'), 1);
// addOneAudio('eat', this.rawAudios.get('eat'), 1); // addOneAudio('eat', this.rawAudios.get('eat'), 1);
...@@ -351,23 +402,27 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -351,23 +402,27 @@ export class PlayComponent implements OnInit, OnDestroy {
if (contentObj) { if (contentObj) {
const addPicUrl = (url) => { // const addPicUrl = (url) => {
if (url) { // if (url) {
this.rawImages.set(url, url); // this.rawImages.set(url, url);
} // }
}; // };
//
//
let arr = this.data.contentObj.picArr; // let arr = this.data.contentObj.picArr;
if (arr) { // if (arr) {
//
// for (let i = 0; i < arr.length; i++) {
// addPicUrl( arr[i].pic_url);
// }
// }
//
//
// addPicUrl(contentObj.bgItem.url);
//
for (let i = 0; i < arr.length; i++) {
addPicUrl( arr[i].pic_url);
} }
}
}
// this.initFontImg(); // this.initFontImg();
...@@ -446,126 +501,308 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -446,126 +501,308 @@ export class PlayComponent implements OnInit, OnDestroy {
initView() { initView() {
this.initBg(); this.initBg();
this.initPic();
this.initBottomRight();
this.refreshPageLabel(); this.initLeftPart();
if (this.roleNumber == 2) {
this.leftLayer.x = 0;
this.initRightPart();
}
// this.initHotZone();
// // this.setHotZoneCircle();
// this.initCircleParticle();
//
//
// this.initBreadLayer();
// this.initLetterDot();
// this.createLine();
//
//
// this.breadLayer.visible = false;
// this.panel.visible = true;
//
//
// this.initSmallLetter();
// this.initSmallPanel();
}
initLeftPart() {
const leftLayer = new MySprite();
leftLayer.width = this.canvasWidth;
leftLayer.height = this.canvasHeight;
this.renderArr.push(leftLayer);
this.leftLayer = leftLayer;
const panel = new MySprite();
panel.init(this.images.get('panel'));
panel.setScaleXY(this.mapScale);
panel.x = this.canvasWidth / 4;
panel.y = this.canvasHeight - 60 * this.mapScale;
leftLayer.addChild(panel);
this.leftColorItemArr = [];
const dotW = 52;
let edge = 40;
let dis = (panel.width - edge * 2 - dotW * 5) / 4;
let offX = edge + dotW / 2 - panel.width / 2;
for (let i = 0; i < 5; i ++) {
const key = 'color_' + (i + 1);
const colorDot = new MySprite();
colorDot.init(this.images.get(key));
colorDot.x = offX + (dotW + dis) * i;
panel.addChild(colorDot);
this.leftColorItemArr.push(colorDot);
}
this.leftTypeItemArr = [];
edge = 15;
const iconW = 70;
dis = (panel.width - edge * 2 - iconW * 4) / 3;
offX = edge + iconW / 2 - panel.width / 2;
for (let i = 0; i < 4; i ++) {
const key = 'icon_' + (i + 1);
const icon = new MySprite();
icon.init(this.images.get(key));
icon.x = offX + (iconW + dis) * i;
icon.y = -panel.height - 0;
panel.addChild(icon);
icon.childDepandAlpha = true;
icon.alpha = this.unselectAlpha;
this.leftTypeItemArr.push(icon);
const selectIcon = new MySprite();
selectIcon.init(this.images.get('icon'));
selectIcon.x = icon.width / 2 - 5;
selectIcon.y = -icon.height / 2 + 10;
selectIcon.visible = false;
icon.addChild(selectIcon);
icon['icon'] = selectIcon;
}
const roleW = 292;
const role = new MySprite();
role.init(this.images.get('boy'));
role.setScaleXY(roleW / role.width * this.mapScale);
role.x = panel.x;
role.y = panel.y - 370 * this.mapScale;
leftLayer.addChild(role);
role['type'] = 'boy';
this.leftRole = role;
const sexIcon = new MySprite();
sexIcon.init(this.images.get('icon_girl'));
sexIcon.setScaleXY(0.8 * this.mapScale);
sexIcon.x = role.x - 220 * this.mapScale;
sexIcon.y = role.y - 140 * this.mapScale;
sexIcon.setShadow(0, 5, 10, 'rgba(0,0,0,0.7)');
leftLayer.addChild(sexIcon);
this.leftSexBtn = sexIcon;
leftLayer.x = this.canvasWidth / 4;
let shapeRect = new ShapeRect();
shapeRect.setSize(690, 400);
shapeRect.x = 22 - role.width / 2;
shapeRect.y = 22 - role.height / 2;
shapeRect.alpha = 0.3;
shapeRect.visible = false;
role.addChild(shapeRect);
role['rect_0'] = shapeRect;
shapeRect = new ShapeRect();
shapeRect.setSize(450, 410);
shapeRect.x = 140 - role.width / 2;
shapeRect.y = 600 - role.height / 2;
shapeRect.alpha = 0.3;
shapeRect.visible = false;
role.addChild(shapeRect);
role['rect_1'] = shapeRect;
shapeRect = new ShapeRect();
shapeRect.setSize(438, 309);
shapeRect.x = 139 - role.width / 2;
shapeRect.y = 863 - role.height / 2;
shapeRect.alpha = 0.3;
shapeRect.visible = false;
role.addChild(shapeRect);
role['rect_2'] = shapeRect;
shapeRect = new ShapeRect();
shapeRect.setSize(408, 176);
shapeRect.x = 161 - role.width / 2;
shapeRect.y = 1144 - role.height / 2;
shapeRect.alpha = 0.3;
shapeRect.visible = false;
role.addChild(shapeRect);
role['rect_3'] = shapeRect;
}
initRightPart() {
const rightLayer = new MySprite();
rightLayer.width = this.canvasWidth;
rightLayer.height = this.canvasHeight;
this.renderArr.push(rightLayer);
this.rightLayer = rightLayer;
const panel = new MySprite();
panel.init(this.images.get('panel'));
panel.setScaleXY(this.mapScale);
panel.x = this.canvasWidth / 4;
panel.y = this.canvasHeight - 60 * this.mapScale;
rightLayer.addChild(panel);
this.rightColorItemArr = [];
const dotW = 52;
let edge = 40;
let dis = (panel.width - edge * 2 - dotW * 5) / 4;
let offX = edge + dotW / 2 - panel.width / 2;
for (let i = 0; i < 5; i ++) {
const key = 'color_' + (i + 1);
const colorDot = new MySprite();
colorDot.init(this.images.get(key));
colorDot.x = offX + (dotW + dis) * i;
panel.addChild(colorDot);
this.rightColorItemArr.push(colorDot);
} }
initBottomRight() { this.rightTypeItemArr = [];
edge = 15;
const iconW = 70;
dis = (panel.width - edge * 2 - iconW * 4) / 3;
offX = edge + iconW / 2 - panel.width / 2;
for (let i = 0; i < 4; i ++) {
const key = 'icon_' + (i + 1);
const icon = new MySprite();
icon.init(this.images.get(key));
icon.x = offX + (iconW + dis) * i;
icon.y = -panel.height - 0;
panel.addChild(icon);
icon.childDepandAlpha = true;
icon.alpha = this.unselectAlpha;
this.rightTypeItemArr.push(icon);
const px = this.canvasWidth - 100 * this.mapScale; const selectIcon = new MySprite();
const py = this.canvasHeight - 50 * this.mapScale; selectIcon.init(this.images.get('icon'));
const offX = 40 * this.mapScale; selectIcon.x = icon.width / 2 - 5;
selectIcon.y = -icon.height / 2 + 10;
selectIcon.visible = false;
icon.addChild(selectIcon);
icon['icon'] = selectIcon;
}
const leftBtn = new MySprite(); const roleW = 292;
leftBtn.init(this.images.get('btn_left')); const role = new MySprite();
leftBtn.setScaleXY(this.mapScale); role.init(this.images.get('girl'));
leftBtn.x = px - offX; role.setScaleXY(roleW / role.width * this.mapScale);
leftBtn.y = py; role.x = panel.x;
role.y = panel.y - 370 * this.mapScale;
rightLayer.addChild(role);
role['type'] = 'girl';
this.rightRole = role;
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); const sexIcon = new MySprite();
this.renderArr.push(rightBtn); sexIcon.init(this.images.get('icon_boy'));
sexIcon.setScaleXY(0.8 * this.mapScale);
sexIcon.x = role.x - 220 * this.mapScale;
sexIcon.y = role.y - 140 * this.mapScale;
sexIcon.setShadow(0, 5, 10, 'rgba(0,0,0,0.7)');
rightLayer.addChild(sexIcon);
this.rightSexBtn = sexIcon;
const textBg = new MySprite(); rightLayer.x = this.canvasWidth / 2;
textBg.init(this.images.get('text_bg'));
textBg.setScaleXY(this.mapScale);
textBg.x = px;
textBg.y = py - 65 * this.mapScale;
this.renderArr.push(textBg);
let shapeRect = new ShapeRect();
shapeRect.setSize(690, 400);
shapeRect.x = 22 - role.width / 2;
shapeRect.y = 22 - role.height / 2;
shapeRect.alpha = 0.3;
shapeRect.visible = false;
role.addChild(shapeRect);
role['rect_0'] = shapeRect;
const label = new Label(); shapeRect = new ShapeRect();
label.text = '0 / 0'; shapeRect.setSize(450, 410);
label.fontName = 'BRLNSDB'; shapeRect.x = 140 - role.width / 2;
label.fontSize = 24; shapeRect.y = 600 - role.height / 2;
label.fontColor = '#ffffff'; shapeRect.alpha = 0.3;
label.textAlign = 'center'; shapeRect.visible = false;
label.setMaxSize( textBg.width * textBg.scaleX * 0.9 ); role.addChild(shapeRect);
textBg.addChild(label); role['rect_1'] = shapeRect;
shapeRect = new ShapeRect();
shapeRect.setSize(438, 309);
shapeRect.x = 139 - role.width / 2;
shapeRect.y = 863 - role.height / 2;
shapeRect.alpha = 0.3;
shapeRect.visible = false;
role.addChild(shapeRect);
role['rect_2'] = shapeRect;
this.leftBtn = leftBtn; shapeRect = new ShapeRect();
this.rightBtn = rightBtn; shapeRect.setSize(408, 176);
this.pageLabel = label; shapeRect.x = 161 - role.width / 2;
shapeRect.y = 1144 - role.height / 2;
shapeRect.alpha = 0.3;
shapeRect.visible = false;
role.addChild(shapeRect);
role['rect_3'] = shapeRect;
if (this.picArr.length <= 1) {
this.leftBtn.visible = false;
this.rightBtn.visible = false;
textBg.visible = false;
}
} }
refreshPageLabel() {
const label = this.pageLabel;
label.text = (this.curPageIndex + 1) + ' / ' + this.picArr.length;
this.showAudio();
}
showAudio() {
const data = this.picArr[this.curPageIndex];
const audio = this.audioObj[data.audio_url];
if (audio) {
audio.play();
}
}
initPic() {
for (let i = 0; i < this.picArr.length; i++) {
const data = this.picArr[i]; initBg() {
const pic = new MySprite(); this.bgArr = [];
pic.init(this.images.get(data.pic_url));
// pic.x = this.canvasWidth / 2; const bg = new MySprite();
// pic.y = this.canvasHeight / 2; 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.renderArr.push(bg);
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.bgLayer = new MySprite();
// this.renderArr.push(this.bgLayer);
} }
...@@ -573,38 +810,66 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -573,38 +810,66 @@ export class PlayComponent implements OnInit, OnDestroy {
}
mapDown(event) {
if (!this.canTouch) {
return;
}
for (let i = 0; i < this.leftColorItemArr.length; i++) {
if (this.checkClickTarget( this.leftColorItemArr[i]) ) {
this.playAudio('click', true);
this.clickColorItemLeft(this.leftColorItemArr[i], i);
return;
}
}
for (let i = 0; i < this.leftTypeItemArr.length; i++) {
if (this.checkClickTarget( this.leftTypeItemArr[i]) ) {
this.playAudio('click_2', true);
this.clickTypeItemLeft(this.leftTypeItemArr[i], i);
return;
}
}
if (this.checkClickTarget(this.leftSexBtn)) {
this.playAudio('click_3', true);
this.clickSexBtn(this.leftRole, this.leftSexBtn);
return;
}
for (let i = 0; i < this.rightColorItemArr.length; i++) {
if (this.checkClickTarget( this.rightColorItemArr[i]) ) {
this.playAudio('click', true);
this.clickColorItemRight(this.rightColorItemArr[i], i);
return;
}
}
for (let i = 0; i < this.rightTypeItemArr.length; i++) {
if (this.checkClickTarget( this.rightTypeItemArr[i]) ) {
this.playAudio('click_2', true);
this.clickTypeItemRight(this.rightTypeItemArr[i], i);
return;
}
}
if (this.checkClickTarget(this.rightSexBtn)) {
this.playAudio('click_3', true);
this.clickSexBtn(this.rightRole, this.rightSexBtn);
return;
}
initBg() {
this.bgArr = [];
const bg = new MySprite();
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.renderArr.push(bg);
this.bgLayer = new MySprite();
this.renderArr.push(this.bgLayer);
} }
...@@ -612,88 +877,149 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -612,88 +877,149 @@ export class PlayComponent implements OnInit, OnDestroy {
mapMove(event) {
}
mapDown(event) { mapUp(event) {
if (!this.canTouch) {
return;
} }
if (this.checkClickTarget(this.leftBtn)) { clickSexBtn(role, sexBtn) {
this.lastPageClick();
return; if (role.type == 'boy') {
} role.init(this.images.get('girl'));
role.type = 'girl';
sexBtn.init(this.images.get('icon_boy'));
} else {
role.init(this.images.get('boy'));
role.type = 'boy';
sexBtn.init(this.images.get('icon_girl'));
if (this.checkClickTarget(this.rightBtn)) {
this.nextPageClick();
return;
} }
} }
clickColorItemLeft(colorItem, colorIndex) {
console.log('item: ', colorItem);
this.hideTypeItemArr(this.leftTypeItemArr);
const typeItem = this.leftTypeItemArr[this.leftTypeIndex];
typeItem.alpha = 1;
typeItem.icon.visible = true;
mapMove(event) { this.addItem(this.leftRole, colorIndex + 1, this.leftTypeIndex + 1);
let rect = this.leftRole['rect_' + this.leftTypeIndex].getBoundingBox();
if (!rect) {
this.leftRole.getBoundingBox();
} }
showBlingBling(this.images.get('star'), rect, this.bgLayer, this.mapScale, 1, 0.05, 1.5);
this.playAudio('star', true);
mapUp(event) {
} }
clickColorItemRight(colorItem, colorIndex) {
console.log('item: ', colorItem);
nextPageClick() { this.hideTypeItemArr(this.rightTypeItemArr);
console.log(' in leftBtnClick'); const typeItem = this.rightTypeItemArr[this.rightTypeIndex];
typeItem.alpha = 1;
if (this.curPageIndex >= this.picArr.length - 1) { typeItem.icon.visible = true;
return;
}
this.curPageIndex ++; this.addItem(this.rightRole, colorIndex + 1, this.rightTypeIndex + 1);
this.changePageByIndex();
let rect = this.rightRole['rect_' + this.rightTypeIndex].getBoundingBox();
if (!rect) {
this.rightRole.getBoundingBox();
}
showBlingBling(this.images.get('star'), rect, this.bgLayer, this.mapScale, 1, 0.05, 1.5);
this.playAudio('star', true);
} }
lastPageClick() {
console.log(' in rightBtnClick');
clickTypeItemLeft(item, index) {
console.log('item: ', item);
this.leftTypeIndex = index;
if (this.curPageIndex <= 0) { this.hideTypeItemArr(this.leftTypeItemArr);
return; item.alpha = 1;
} }
this.curPageIndex --; clickTypeItemRight(item, index) {
console.log('item: ', item);
this.rightTypeIndex = index;
this.hideTypeItemArr(this.rightTypeItemArr);
item.alpha = 1;
}
this.changePageByIndex();
hideTypeItemArr(arr) {
for (let i = 0; i < arr.length; i++) {
arr[i].alpha = this.unselectAlpha;
}
} }
changePageByIndex() {
console.log(' in changePageByIndex'); addItem(role, colorId, typeId) {
this.canTouch = false;
console.log(' in addItem');
moveItem(this.bgLayer, -this.curPageIndex * this.canvasWidth, 0, 1, () => { let type;
this.canTouch = true; let z = 0;
this.refreshPageLabel(); switch (typeId) {
// this.resetCurData(); case 1:
}, TWEEN.Easing.Cubic.Out); type = 'hat';
z = 4;
break;
case 2:
type = 'clothes';
z = 3;
break;
case 3:
type = 'pants';
z = 2;
break;
default:
type = 'shoes';
z = 1;
break;
}
let key = type + '_' + colorId;
if (!role[type]) {
role[type] = new MySprite();
role.addChild(role[type], z);
}
role[type].init(this.images.get(key));
// const key = 'hat_' + colorId;
// role.hat.init(this.images.get(key));
this.playAudio('click', true);
} }
...@@ -722,6 +1048,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -722,6 +1048,9 @@ export class PlayComponent implements OnInit, OnDestroy {
this.updateArr(this.renderArr); this.updateArr(this.renderArr);
this.updateItem(this.bgLayer);
} }
...@@ -748,6 +1077,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -748,6 +1077,17 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
checkArrItemClick(arr, callback) {
for (let i = 0; i < arr.length; i++) {
if (this.checkClickTarget(arr[i])) {
callback(arr[i]);
return true;
}
}
return false;
}
initHotZone() { initHotZone() {
...@@ -793,6 +1133,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -793,6 +1133,8 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
getHotZoneItem(data) { getHotZoneItem(data) {
const saveRect = data.rect; const saveRect = data.rect;
const item = new ShapeRect(this.ctx); const item = new ShapeRect(this.ctx);
...@@ -976,7 +1318,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -976,7 +1318,13 @@ export class PlayComponent implements OnInit, OnDestroy {
playAudio(key, now = false, callback = null) { playAudio(key, now = false, callback = null) {
const audio = this.audioObj[key]; let audio;
if (typeof key == 'string') {
audio = this.audioObj[key];
} else {
audio = key;
}
if (audio) { if (audio) {
if (now) { if (now) {
audio.pause(); audio.pause();
......
const res = [ const res = [
['bg', "assets/play/bg.jpg"], ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"], ['panel', "assets/play/panel.png"],
['btn_right', "assets/play/btn_right.png"],
['text_bg', "assets/play/text_bg.png"], ['color_1', "assets/play/color/1.png"],
['color_2', "assets/play/color/2.png"],
['color_3', "assets/play/color/3.png"],
['color_4', "assets/play/color/4.png"],
['color_5', "assets/play/color/5.png"],
['icon_1', "assets/play/icon/hat.png"],
['icon_2', "assets/play/icon/clothes.png"],
['icon_3', "assets/play/icon/pants.png"],
['icon_4', "assets/play/icon/shoes.png"],
['boy', "assets/play/boy.png"],
['girl', "assets/play/girl.png"],
['icon', "assets/play/icon/icon.png"],
['icon_boy', "assets/play/icon/boy.png"],
['icon_girl', "assets/play/icon/girl.png"],
['hat_1', "assets/play/hat/1.png"],
['hat_2', "assets/play/hat/2.png"],
['hat_3', "assets/play/hat/3.png"],
['hat_4', "assets/play/hat/4.png"],
['hat_5', "assets/play/hat/5.png"],
['clothes_1', "assets/play/clothes/1.png"],
['clothes_2', "assets/play/clothes/2.png"],
['clothes_3', "assets/play/clothes/3.png"],
['clothes_4', "assets/play/clothes/4.png"],
['clothes_5', "assets/play/clothes/5.png"],
['pants_1', "assets/play/pants/1.png"],
['pants_2', "assets/play/pants/2.png"],
['pants_3', "assets/play/pants/3.png"],
['pants_4', "assets/play/pants/4.png"],
['pants_5', "assets/play/pants/5.png"],
['shoes_1', "assets/play/shoes/1.png"],
['shoes_2', "assets/play/shoes/2.png"],
['shoes_3', "assets/play/shoes/3.png"],
['shoes_4', "assets/play/shoes/4.png"],
['shoes_5', "assets/play/shoes/5.png"],
['star', "assets/play/star.png"],
]; ];
...@@ -13,7 +57,10 @@ const res = [ ...@@ -13,7 +57,10 @@ const res = [
const resAudio = [ const resAudio = [
// ['click', "assets/play/music/click.mp3"], ['click', "assets/play/music/click.mp3"],
['click_2', "assets/play/music/click_2.mp3"],
['click_3', "assets/play/music/click_3.mp3"],
['star', "assets/play/music/star.mp3"],
......
src/assets/play/bg.jpg

25.8 KB | W: | H:

src/assets/play/bg.jpg

12.2 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
src/assets/play/default/pic.jpg

28.7 KB | W: | H:

src/assets/play/default/pic.jpg

28 KB | W: | H:

src/assets/play/default/pic.jpg
src/assets/play/default/pic.jpg
src/assets/play/default/pic.jpg
src/assets/play/default/pic.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