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.
{
"name": "ng-template-generator",
"version": "0.0.1",
"scripts": {
"start": "ng serve",
"scripts": {
"start": "ng serve",
"build": "ng build --build--optimizer --aot --base-href /JGT/v3/",
"publish": "node ./bin/publish.js"
"publish": "node ./bin/publish.js"
},
"private": true,
"dependencies": {
......@@ -43,7 +43,7 @@
"nedb": "^1.8.0",
"ng-lottie": "^0.3.1",
"ng-zorro-antd": "^7.2.0",
"npm": "^6.5.0",
"npm": "^6.13.4",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",
"rxjs-tslint": "^0.1.6",
......@@ -52,7 +52,7 @@
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.11.4",
"@angular-devkit/build-angular": "^0.803.20",
"@angular/cli": "^7.2.10",
"@angular/compiler-cli": "^7.2.10",
"@angular/language-service": "^7.2.10",
......
......@@ -4,99 +4,17 @@
<div *ngFor="let it of picArr; let i = index"
nz-col nzSpan="8" >
<div class="item-box">
<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 style="padding: 3vw; display: flex; align-items: center">
<span style="padding-right: 1vw"> 人数: </span>
<nz-radio-group [(ngModel)]="item.contentObj.type" (ngModelChange)="log(item.contentObj.type)">
<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>
</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-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>-->
</nz-radio-group>
</div>
......
......@@ -12,7 +12,7 @@
.item-box{
width: 100%;
//margin: auto;
display: flex;
align-items: center;
......@@ -21,8 +21,8 @@
flex-direction: column;
padding: 10px;
padding-bottom: 5vw;
padding-top: 5vw;
padding-bottom: 2vw;
padding-top: 3vw;
}
......@@ -41,14 +41,21 @@
align-items: center;
justify-content: center;
//width: 180px;
height: 20vw;
height: 15vw;
//background: #FFDC00;
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
export class FormComponent implements OnInit, OnChanges, OnDestroy {
picArr = [];
optionArr = [];
_item: any;
KEY = 'hw_000';
KEY = 'dfzx_17';
answerType = 'A';
refreshTimeId;
refreshLabel = 0;
// @Input()
set item(item) {
......@@ -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 {
console.log('~data:', data);
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}, this.KEY);
......@@ -71,6 +91,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
ngOnDestroy() {
clearTimeout( this.refreshTimeId);
}
......@@ -81,17 +103,36 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} else {
this.picArr = this.getDefaultPicArr();
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;
// console.log('this.item:;', this.picArr);
}
startRefresh() {
this.refreshTimeId = setTimeout(() => {
this.refreshLabel ++;
this.startRefresh();
this.refresh();
}, 1000);
}
getDefaultPicArr() {
const arr = [];
const arr = [
{
text: '一人',
type: '0'
},
{
text: '两人',
type: '1'
}
];
// for (let i = 0; i < 4; i ++) {
// const data = {};
// data['pic_url'] = '';
......@@ -126,10 +167,26 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
// this.update.emit(this.item);
this.refreshOptionsPicArr();
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,16 +223,55 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
addPic() {
this.picArr.push({
const data = {
text: '',
pic_url: '',
audio_url: '',
// text: '',
// radioValue: 'A'
});
};
this.picArr.push(data);
this.refreshOptionsPicArr();
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) {
it.radioValue = radioValue;
......@@ -189,10 +285,18 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
saveItem() {
console.log(' in saveItem');
// this.update.emit(this.item);
this.save();
}
log(a) {
console.log('a:', a);
this.save();
}
save() {
(<any> window).courseware.setData(this.item, null, this.KEY);
......
......@@ -1378,7 +1378,7 @@ export function getPosDistance(sx, sy, ex, ey) {
return len;
}
export function delayCall(callback, second) {
export function delayCall(item, callback, second) {
const tween = new TWEEN.Tween(this)
.delay(second * 1000)
.onComplete(() => {
......@@ -1543,3 +1543,54 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
// --------------- 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 {
moveItem,
rotateItem,
removeItemFromArr,
ShapeRect,
ShapeRect, tweenChange, scaleItem, hideItem, showBlingBling,
} from './Unit';
import {res, resAudio} from './resources';
......@@ -20,6 +20,7 @@ import TWEEN from '@tweenjs/tween.js';
@Component({
selector: 'app-play',
templateUrl: './play.component.html',
......@@ -79,17 +80,55 @@ export class PlayComponent implements OnInit, OnDestroy {
canTouch = true;
KEY = 'hw_000';
KEY = 'dfzx_17';
// -----
picArr;
pageLabel;
leftBtn;
rightBtn;
bgLayer;
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;
......@@ -154,24 +193,12 @@ export class PlayComponent implements OnInit, OnDestroy {
initDefaultData() {
let picArr = this.data.contentObj.picArr;
// console.log('picArr: ', 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'
});
}
this.data.contentObj.picArr = picArr;
if (!this.data.contentObj.type) {
this.data.contentObj.type = '1';
}
}
ngOnDestroy() {
......@@ -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.playSoundFlag = false;
this.circleArr = [];
this.lineArr = [];
this.dotArr = [];
this.curPageIndex = 0;
this.roleNumber = Number(this.data.contentObj.type) + 1;
// this.downFlag = false;
......@@ -222,6 +262,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.picIndex = 0;
this.letter = this.data.contentObj.letter;
}
......@@ -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 {
};
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('cow_start', this.rawAudios.get('cow_start'), 1);
// addOneAudio('eat', this.rawAudios.get('eat'), 1);
......@@ -351,25 +402,29 @@ export class PlayComponent implements OnInit, OnDestroy {
if (contentObj) {
const addPicUrl = (url) => {
if (url) {
this.rawImages.set(url, url);
}
};
let arr = this.data.contentObj.picArr;
if (arr) {
for (let i = 0; i < arr.length; i++) {
addPicUrl( arr[i].pic_url);
}
}
// const addPicUrl = (url) => {
// if (url) {
// this.rawImages.set(url, url);
// }
// };
//
//
// let arr = this.data.contentObj.picArr;
// if (arr) {
//
// for (let i = 0; i < arr.length; i++) {
// addPicUrl( arr[i].pic_url);
// }
// }
//
//
// addPicUrl(contentObj.bgItem.url);
//
}
// this.initFontImg();
......@@ -446,132 +501,272 @@ export class PlayComponent implements OnInit, OnDestroy {
initView() {
this.initBg();
this.initPic();
this.initBottomRight();
this.refreshPageLabel();
}
initBottomRight() {
const px = this.canvasWidth - 100 * this.mapScale;
const py = this.canvasHeight - 50 * this.mapScale;
const offX = 40 * this.mapScale;
const leftBtn = new MySprite();
leftBtn.init(this.images.get('btn_left'));
leftBtn.setScaleXY(this.mapScale);
leftBtn.x = px - offX;
leftBtn.y = py;
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);
this.initLeftPart();
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);
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);
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;
if (this.roleNumber == 2) {
this.leftLayer.x = 0;
this.initRightPart();
}
}
refreshPageLabel() {
const label = this.pageLabel;
label.text = (this.curPageIndex + 1) + ' / ' + this.picArr.length;
// this.initHotZone();
// // this.setHotZoneCircle();
// this.initCircleParticle();
//
//
// this.initBreadLayer();
// this.initLetterDot();
// this.createLine();
//
//
// this.breadLayer.visible = false;
// this.panel.visible = true;
//
//
// this.initSmallLetter();
// this.initSmallPanel();
this.showAudio();
}
showAudio() {
const data = this.picArr[this.curPageIndex];
const audio = this.audioObj[data.audio_url];
if (audio) {
audio.play();
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;
}
initPic() {
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;
}
for (let i = 0; i < this.picArr.length; i++) {
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;
initRightPart() {
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 rightLayer = new MySprite();
rightLayer.width = this.canvasWidth;
rightLayer.height = this.canvasHeight;
this.renderArr.push(rightLayer);
this.rightLayer = rightLayer;
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);
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);
picBg.addChild(pic);
this.bgLayer.addChild(picBg);
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);
}
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 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('girl'));
role.setScaleXY(roleW / role.width * this.mapScale);
role.x = panel.x;
role.y = panel.y - 370 * this.mapScale;
rightLayer.addChild(role);
role['type'] = 'girl';
this.rightRole = role;
const sexIcon = new MySprite();
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;
rightLayer.x = this.canvasWidth / 2;
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;
}
......@@ -587,7 +782,6 @@ export class PlayComponent implements OnInit, OnDestroy {
initBg() {
this.bgArr = [];
......@@ -603,8 +797,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderArr.push(bg);
this.bgLayer = new MySprite();
this.renderArr.push(this.bgLayer);
// this.renderArr.push(this.bgLayer);
}
......@@ -623,17 +820,57 @@ export class PlayComponent implements OnInit, OnDestroy {
}
if (this.checkClickTarget(this.leftBtn)) {
this.lastPageClick();
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;
}
if (this.checkClickTarget(this.rightBtn)) {
this.nextPageClick();
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;
}
}
......@@ -647,53 +884,142 @@ export class PlayComponent implements OnInit, OnDestroy {
mapUp(event) {
}
clickSexBtn(role, sexBtn) {
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'));
}
}
clickColorItemLeft(colorItem, colorIndex) {
console.log('item: ', colorItem);
nextPageClick() {
console.log(' in leftBtnClick');
this.hideTypeItemArr(this.leftTypeItemArr);
const typeItem = this.leftTypeItemArr[this.leftTypeIndex];
typeItem.alpha = 1;
if (this.curPageIndex >= this.picArr.length - 1) {
return;
typeItem.icon.visible = true;
this.addItem(this.leftRole, colorIndex + 1, this.leftTypeIndex + 1);
let rect = this.leftRole['rect_' + this.leftTypeIndex].getBoundingBox();
if (!rect) {
this.leftRole.getBoundingBox();
}
this.curPageIndex ++;
showBlingBling(this.images.get('star'), rect, this.bgLayer, this.mapScale, 1, 0.05, 1.5);
this.playAudio('star', true);
this.changePageByIndex();
}
lastPageClick() {
console.log(' in rightBtnClick');
clickColorItemRight(colorItem, colorIndex) {
console.log('item: ', colorItem);
this.hideTypeItemArr(this.rightTypeItemArr);
const typeItem = this.rightTypeItemArr[this.rightTypeIndex];
typeItem.alpha = 1;
if (this.curPageIndex <= 0) {
return;
typeItem.icon.visible = true;
this.addItem(this.rightRole, colorIndex + 1, this.rightTypeIndex + 1);
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);
}
clickTypeItemLeft(item, index) {
console.log('item: ', item);
this.leftTypeIndex = index;
this.hideTypeItemArr(this.leftTypeItemArr);
item.alpha = 1;
}
clickTypeItemRight(item, index) {
console.log('item: ', item);
this.rightTypeIndex = index;
this.hideTypeItemArr(this.rightTypeItemArr);
item.alpha = 1;
this.curPageIndex --;
}
this.changePageByIndex();
hideTypeItemArr(arr) {
for (let i = 0; i < arr.length; i++) {
arr[i].alpha = this.unselectAlpha;
}
}
changePageByIndex() {
console.log(' in changePageByIndex');
this.canTouch = false;
addItem(role, colorId, typeId) {
console.log(' in addItem');
let type;
let z = 0;
switch (typeId) {
case 1:
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);
}
moveItem(this.bgLayer, -this.curPageIndex * this.canvasWidth, 0, 1, () => {
this.canTouch = true;
this.refreshPageLabel();
// this.resetCurData();
}, TWEEN.Easing.Cubic.Out);
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 {
this.updateArr(this.renderArr);
this.updateItem(this.bgLayer);
}
......@@ -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() {
......@@ -793,6 +1133,8 @@ export class PlayComponent implements OnInit, OnDestroy {
}
getHotZoneItem(data) {
const saveRect = data.rect;
const item = new ShapeRect(this.ctx);
......@@ -976,7 +1318,13 @@ export class PlayComponent implements OnInit, OnDestroy {
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 (now) {
audio.pause();
......
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"],
['panel', "assets/play/panel.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 = [
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