Commit d6b41dec authored by limingzhe's avatar limingzhe

first

parent 058295b3
......@@ -11,6 +11,7 @@
<div class="item-box">
<span>item-{{i+1}}</span>
<app-upload-image-with-preview
style="width: 100%"
......@@ -20,16 +21,16 @@
<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; 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>
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
</div>
......@@ -84,23 +85,45 @@
</div>
<div nz-col nzSpan="8" class="add-btn-box" >
<div style="display: flex; justify-items: center">
<span style="padding-right: 5px">正确选项:</span>
<nz-radio-group [(ngModel)]="item.contentObj.type" (ngModelChange)="save()">
<label nz-radio nzValue="A">item-1</label>
<label nz-radio nzValue="B">item-2</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>-->
<div style="padding-top: 10px">
<app-audio-recorder
[audioUrl]="item.contentObj.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj)">
</app-audio-recorder>
</div>
</div>
<!--<div nz-col nzSpan="8" class="add-btn-box" >-->
<!--&lt;!&ndash;<div style="width: 100%; height: 100%;">&ndash;&gt;-->
<!--<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>-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--</div>-->
......
......@@ -43,6 +43,7 @@
//width: 180px;
height: 20vw;
//background: #FFDC00;
flex-direction: column;
padding: 10px;
padding-top: 5vw;
......
......@@ -14,7 +14,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
_item: any;
KEY = 'hw_000';
KEY = 'dfzx_11';
......@@ -83,6 +83,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item.contentObj.picArr = this.picArr;
}
if (!this.item.contentObj.type) {
this.item.contentObj.type = 'A';
}
console.log('item:' , this.item);
// this.picArr = this.getDefaultPicArr();
// this.item.contentObj.picArr = this.picArr;
......@@ -92,21 +96,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
getDefaultPicArr() {
const arr = [];
// for (let i = 0; i < 4; i ++) {
// const data = {};
// data['pic_url'] = '';
//
// const soundArr = [];
// for (let i = 0; i < 3; i++) {
// const tmpData = {};
// tmpData['answer'] = false;
// tmpData['audio_url'] = '';
// soundArr.push(tmpData);
// }
// data['soundArr'] = soundArr;
//
// arr.push(data);
// }
for (let i = 0; i < 2; i ++) {
const data = {};
data['pic_url'] = '';
arr.push(data);
}
return arr;
}
......
......@@ -158,6 +158,7 @@ export class MySprite extends Sprite {
if (this._shadowFlag) {
this.ctx.shadowOffsetX = this._shadowOffsetX;
this.ctx.shadowOffsetY = this._shadowOffsetY;
this.ctx.shadowBlur = this._shadowBlur;
......@@ -175,6 +176,8 @@ export class MySprite extends Sprite {
}
}
updateChildren() {
......@@ -502,15 +505,15 @@ export class Label extends MySprite {
fontSize = 40;
fontColor = '#000000';
fontWeight = 900;
maxWidth;
_maxWidth;
outline = 0;
outlineColor = '#ffffff';
_shadowFlag = false;
_shadowColor;
_shadowOffsetX;
_shadowOffsetY;
_shadowBlur;
// _shadowFlag = false;
// _shadowColor;
// _shadowOffsetX;
// _shadowOffsetY;
// _shadowBlur;
_outlineFlag = false;
_outLineWidth;
......@@ -541,7 +544,7 @@ export class Label extends MySprite {
setMaxSize(w) {
this.maxWidth = w;
this._maxWidth = w;
this.refreshSize();
if (this.width >= w) {
this.scaleX *= w / this.width;
......@@ -568,16 +571,16 @@ export class Label extends MySprite {
.start(); // Start the tween immediately.
}
setShadow(offX = 2, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') {
this._shadowFlag = true;
this._shadowColor = color;
// 将阴影向右移动15px,向上移动10px
this._shadowOffsetX = 5;
this._shadowOffsetY = 5;
// 轻微模糊阴影
this._shadowBlur = 5;
}
// setShadow(offX = 0, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') {
//
// this._shadowFlag = true;
// this._shadowColor = color;
// // 将阴影向右移动15px,向上移动10px
// this._shadowOffsetX = 5;
// this._shadowOffsetY = 5;
// // 轻微模糊阴影
// this._shadowBlur = 5;
// }
setOutline(width = 5, color = '#ffffff') {
......@@ -757,11 +760,7 @@ export class RichText extends Label {
disH = 30;
constructor(ctx) {
super(ctx);
// this.dataArr = dataArr;
}
......@@ -785,7 +784,7 @@ export class RichText extends Label {
const chr = this.text.split(' ');
let temp = '';
const row = [];
const w = selfW - 80;
const w = selfW;
const disH = (this.fontSize + this.disH) * this.scaleY;
......@@ -836,6 +835,40 @@ export class RichText extends Label {
export class LineRect extends MySprite {
lineColor = "#ffffff";
lineWidth = 10;
setSize(w, h) {
this.width = w;
this.height = h;
}
drawLine() {
this.ctx.beginPath();
this.ctx.moveTo(this._offX, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY + this.height);
this.ctx.lineTo(this._offX, this._offY + this.height);
this.ctx.closePath();
this.ctx.lineWidth = this.lineWidth;
// this.ctx.fillStyle = "rgb(2,33,42)"; //指定填充颜色
// this.ctx.fill(); //对多边形进行填充
this.ctx.strokeStyle = this.lineColor; // "#ffffff";
this.ctx.stroke();
}
drawSelf() {
super.drawSelf();
this.drawLine();
}
}
export class ShapeRect extends MySprite {
......@@ -1076,7 +1109,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
}
if (update) {
tween.onUpdate( (a, b) => {
update(a, b);
update(a, b);
});
}
......@@ -1129,7 +1162,7 @@ export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null)
if (callBack) {
tween.onComplete(() => {
callBack();
callBack();
});
}
if (easing) {
......@@ -1458,9 +1491,9 @@ export function jelly(item, time = 0.7) {
export function showPopParticle(img, pos, parent) {
export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
const num = 20;
for (let i = 0; i < num; i ++) {
const particle = new MySprite();
......@@ -1472,8 +1505,8 @@ export function showPopParticle(img, pos, parent) {
const randomR = 360 * Math.random();
particle.rotation = randomR;
const randomS = 0.5 + Math.random() * 0.5;
particle.setScaleXY(randomS);
const randomS = 0.3 + Math.random() * 0.7;
particle.setScaleXY(randomS );
const randomX = Math.random() * 20 - 10;
particle.x += randomX;
......@@ -1481,16 +1514,32 @@ export function showPopParticle(img, pos, parent) {
const randomY = Math.random() * 20 - 10;
particle.y += randomY;
const randomL = 40 + Math.random() * 40;
const randomL = minLen + Math.random() * (maxLen - minLen);
const randomA = 360 * Math.random();
const randomT = getPosByAngle(randomA, randomL);
moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, 0.4, () => {
moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, showTime, () => {
}, TWEEN.Easing.Exponential.Out);
scaleItem(particle, 0, 0.6, () => {
});
// scaleItem(particle, randomS, 0.6, () => {
//
// }, TWEEN.Easing.Exponential.Out);
//
// setTimeout(() => {
//
// hideItem(particle, 0.4, () => {
//
// }, TWEEN.Easing.Cubic.In);
//
// }, showTime * 0.5 * 1000);
}
}
......@@ -1532,7 +1581,7 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
};
const move1 = () => {
moveItem(item, baseX + offX, baseY + offY, time / 8, () => {
moveItem(item, baseX + offX, baseY + offY, time / 7.5, () => {
move2();
}, easing);
};
......
......@@ -6,7 +6,7 @@ import {
moveItem,
rotateItem,
removeItemFromArr,
ShapeRect,
ShapeRect, tweenChange,
} from './Unit';
import {res, resAudio} from './resources';
......@@ -79,10 +79,20 @@ export class PlayComponent implements OnInit, OnDestroy {
canTouch = true;
KEY = 'hw_000';
KEY = 'dfzx_11';
// -----
picArr;
picW = 500;
picH = 560;
book;
soundClose;
soundOpen;
audio;
showSoundFlag;
soundId;
pic1;
pic2;
pageLabel;
leftBtn;
......@@ -169,6 +179,9 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data.contentObj.picArr = picArr;
this.data.contentObj.audio_url = 'assets/play/default/audio.mp3';
this.data.contentObj.type = 'A';
}
......@@ -178,6 +191,7 @@ export class PlayComponent implements OnInit, OnDestroy {
window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId);
this.gameEndFlag = true;
clearTimeout(this.soundId);
}
initData() {
......@@ -209,6 +223,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.curPageIndex = 0;
this.showSoundFlag = false;
// this.downFlag = false;
this.endPageArr = [];
......@@ -273,11 +289,12 @@ export class PlayComponent implements OnInit, OnDestroy {
if (arr) {
// console.log('arr: ', arr);
for (let i = 0; i < arr.length; i++) {
addUrlToAudioObj(arr[i].audio_url);
}
// for (let i = 0; i < arr.length; i++) {
// addUrlToAudioObj(arr[i].audio_url);
// }
}
addUrlToAudioObj(contentObj.audio_url);
......@@ -303,8 +320,8 @@ export class PlayComponent implements OnInit, OnDestroy {
};
addOneAudio('click', this.rawAudios.get('click'), 0.3);
// addOneAudio('angry', this.rawAudios.get('angry'), 1);
addOneAudio('wrong', this.rawAudios.get('wrong'), 0.3);
addOneAudio('right', this.rawAudios.get('right'), 1);
// addOneAudio('cow_start', this.rawAudios.get('cow_start'), 1);
// addOneAudio('eat', this.rawAudios.get('eat'), 1);
// addOneAudio('grass', this.rawAudios.get('grass'), 1);
......@@ -447,10 +464,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initBg();
this.initPic();
this.initBottomRight();
this.refreshPageLabel();
this.initSound();
// this.initBottomRight();
//
//
// this.refreshPageLabel();
}
......@@ -531,51 +549,67 @@ export class PlayComponent implements OnInit, OnDestroy {
initPic() {
const offX = 320;
const offY = -20;
const pic1Data = this.picArr[0];
const pic1 = new MySprite();
pic1.init(this.images.get(pic1Data.pic_url));
let sx = this.picW / pic1.width;
let sy = this.picH / pic1.height;
let s = Math.min(sx, sy);
pic1.setScaleXY( s );
this.book.addChild(pic1);
pic1.x = - offX;
pic1.y = offY;
for (let i = 0; i < this.picArr.length; i++) {
const data = this.picArr[i];
const pic2Data = this.picArr[1];
const pic2 = new MySprite();
pic2.init(this.images.get(pic2Data.pic_url));
sx = this.picW / pic2.width;
sy = this.picH / pic2.height;
s = Math.min(sx, sy);
pic2.setScaleXY( s );
const pic = new MySprite();
pic.init(this.images.get(data.pic_url));
// pic.x = this.canvasWidth / 2;
// pic.y = this.canvasHeight / 2;
this.book.addChild(pic2);
pic2.x = offX;
pic2.y = offY;
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);
this.pic1 = pic1;
this.pic2 = pic2;
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);
}
}
initSound() {
const soundClose = new MySprite();
soundClose.setScaleXY(this.mapScale);
soundClose.init(this.images.get('sound_close'));
soundClose.x = this.canvasWidth - 60 * this.mapScale;
soundClose.y = this.canvasHeight - 50 * this.mapScale;
this.renderArr.push(soundClose);
this.soundClose = soundClose;
}
const soundOpen = new MySprite();
soundOpen.setScaleXY(this.mapScale);
soundOpen.init(this.images.get('sound_open'));
soundOpen.x = soundClose.x;
soundOpen.y = soundClose.y;
this.renderArr.push(soundOpen);
this.soundOpen = soundOpen;
soundClose.visible = false;
}
......@@ -592,17 +626,31 @@ export class PlayComponent implements OnInit, OnDestroy {
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);
// 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);
const bg = new ShapeRect();
bg.setSize(this.canvasWidth, this.canvasHeight);
bg.fillColor = 'rgba(75, 9, 9, 0.53)';
this.renderArr.push(bg);
const book = new MySprite();
book.init(this.images.get('book'));
book.x = this.canvasWidth / 2;
book.y = this.canvasHeight / 2;
book.setScaleXY(this.mapScale);
book.setShadow(0, 4, 9, 'rgba(0,0,0,0.75)');
bg.addChild(book);
this.book = book;
this.bgLayer = new MySprite();
this.renderArr.push(this.bgLayer);
......@@ -623,17 +671,26 @@ export class PlayComponent implements OnInit, OnDestroy {
}
if (this.checkClickTarget(this.leftBtn)) {
this.lastPageClick();
if (this.checkClickTarget(this.pic1)) {
this.clickPic1();
return;
}
if (this.checkClickTarget(this.rightBtn)) {
this.nextPageClick();
if (this.checkClickTarget(this.pic2)) {
this.clickPic2();
return;
}
if (this.soundClose) {
if (this.checkClickTarget(this.soundClose)) {
this.soundClick();
return;
}
}
}
......@@ -651,6 +708,119 @@ export class PlayComponent implements OnInit, OnDestroy {
}
clickPic1() {
if (this.gameEndFlag) {
return;
}
if (this.data.contentObj.type == 'A') {
this.showIcon(this.pic1);
} else {
this.playAudio('wrong', true);
}
}
clickPic2() {
if (this.gameEndFlag) {
return;
}
if (this.data.contentObj.type == 'B') {
this.showIcon(this.pic2);
} else {
this.playAudio('wrong', true);
}
}
showIcon(pic) {
const icon = new MySprite();
icon.init(this.images.get('correct'));
icon.x = pic.x;
icon.y = pic.y;
icon.x += -50;
icon.y += 150;
icon.setScaleXY(4);
icon.alpha = 0;
this.book.addChild(icon);
tweenChange(icon, {scaleX: 1, scaleY: 1, alpha: 1}, 0.7, () => {
}, TWEEN.Easing.Exponential.In);
this.gameEndFlag = true;
setTimeout(() => {
this.playAudio('right', true);
}, 600);
}
soundClick() {
if (this.showSoundFlag) {
return;
}
if (!this.audio) {
this.audio = this.audioObj[this.data.contentObj.audio_url];
this.audio.onended = () => {
this.closeSound();
};
}
this.audio.play();
this.showSound();
}
closeSound() {
this.showSoundFlag = false;
this.soundOpen.visible = true;
this.soundClose.visible = false;
}
showSound() {
this.showSoundFlag = true;
this.updateSound();
}
updateSound() {
if (!this.showSoundFlag) {
return;
}
let time = 300;
if (this.soundOpen.visible) {
this.soundOpen.visible = false;
this.soundClose.visible = true;
} else {
this.soundOpen.visible = true;
this.soundClose.visible = false;
}
this.soundId = setTimeout(() => {
this.updateSound();
}, time);
}
nextPageClick() {
console.log(' in leftBtnClick');
......
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"],
['book', "assets/play/book.png"],
['correct', "assets/play/correct.png"],
['sound_close', "assets/play/sound_close.png"],
['sound_open', "assets/play/sound_open.png"],
];
......@@ -13,7 +15,8 @@ const res = [
const resAudio = [
// ['click', "assets/play/music/click.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
['right', "assets/play/music/right.mp3"],
......
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