Commit 8371b586 authored by 范雪寒's avatar 范雪寒

feat: 主页面基本完成

parent e4ae1d3c
...@@ -38,6 +38,10 @@ ...@@ -38,6 +38,10 @@
<br><br> <br><br>
<span style="float: left; margin-left: 20px; margin-bottom: -15px; height: 30px; font-size: 18px;">标题:</span> <span style="float: left; margin-left: 20px; margin-bottom: -15px; height: 30px; font-size: 18px;">标题:</span>
<input style="float: left; margin-bottom: -15px; width: 250px;" type="text" nz-input [(ngModel)]="item.groupTitle[i]" (blur)="save()"> <input style="float: left; margin-bottom: -15px; width: 250px;" type="text" nz-input [(ngModel)]="item.groupTitle[i]" (blur)="save()">
<span style="float: left; height: 30px; margin-left: 10px; margin-bottom: -15px; font-size: 18px;">音频:</span>
<app-audio-recorder style="float: left; margin-bottom: -15px;" [audioUrl]="item.groupAudio[i]"
(audioUploaded)="onGroupAudioUploadSuccess($event, i)">
</app-audio-recorder>
<div *ngFor="let line of group; let j = index"> <div *ngFor="let line of group; let j = index">
<div style="width: 660px; float: left;" class="border"> <div style="width: 660px; float: left;" class="border">
...@@ -51,7 +55,7 @@ ...@@ -51,7 +55,7 @@
<br><br> <br><br>
<span style="float: left; height: 30px; font-size: 18px;">音频:</span> <span style="float: left; height: 30px; font-size: 18px;">音频:</span>
<app-audio-recorder style="float: left;" [audioUrl]="line.audio" <app-audio-recorder style="float: left;" [audioUrl]="line.audio"
(audioUploaded)="onMiddleAudioUploadSuccess($event)"> (audioUploaded)="onLineAudioUploadSuccess($event, i, j)">
</app-audio-recorder> </app-audio-recorder>
</div> </div>
<span style="float: none;">&nbsp;</span> <span style="float: none;">&nbsp;</span>
......
...@@ -47,6 +47,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -47,6 +47,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
totalAudio: '', totalAudio: '',
group: [[], [], [], []], group: [[], [], [], []],
groupTitle: ['', '', '', ''], groupTitle: ['', '', '', ''],
groupAudio: ['', '', '', ''],
}; };
// 获取存储的数据 // 获取存储的数据
...@@ -105,7 +106,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -105,7 +106,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
lineData.letterDataList = lineData.word.split('').map(letter => { lineData.letterDataList = lineData.word.split('').map(letter => {
return { return {
letter: letter, letter: letter,
color: '#000000', // 颜色 color: '#696363', // 颜色
line: false, // 下划线 line: false, // 下划线
number: 0, // 下划线下方的数字 number: 0, // 下划线下方的数字
group: 0, // 分组 group: 0, // 分组
...@@ -133,17 +134,17 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -133,17 +134,17 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
changeLetterBlack(groupIdx, lineIdx, letterIdx) { changeLetterBlack(groupIdx, lineIdx, letterIdx) {
this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#000000'; this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#696363';
this.save(); this.save();
} }
changeLetterRed(groupIdx, lineIdx, letterIdx) { changeLetterRed(groupIdx, lineIdx, letterIdx) {
this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#FF0000'; this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#c8161e';
this.save(); this.save();
} }
changeLetterGrey(groupIdx, lineIdx, letterIdx) { changeLetterGrey(groupIdx, lineIdx, letterIdx) {
this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#888888'; this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#b8aeae';
this.save(); this.save();
} }
...@@ -187,8 +188,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -187,8 +188,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
this.item.group[groupIdx][lineIdx].groups = new Array(maxGroup + 1).fill('0'); this.item.group[groupIdx][lineIdx].groups = new Array(maxGroup + 1).fill('0');
console.log('汪汪汪')
this.save(); this.save();
} }
...@@ -211,6 +210,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -211,6 +210,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save(); this.save();
} }
onGroupAudioUploadSuccess(e, groupIdx) {
this.item.groupAudio[groupIdx] = e.url;
this.save();
}
onLineAudioUploadSuccess(e, groupIdx, lineIdx) {
this.item.group[groupIdx][lineIdx].audio = e.url;
this.save();
}
/** /**
* 储存音频数据 * 储存音频数据
* @param e * @param e
......
...@@ -1640,9 +1640,15 @@ export function jelly(item, time = 0.7) { ...@@ -1640,9 +1640,15 @@ export function jelly(item, time = 0.7) {
TWEEN.remove(item.jellyTween); TWEEN.remove(item.jellyTween);
} }
const t = time / 9; const t = time / 8;
const baseSX = item.scaleX;
const baseSY = item.scaleY; if (!item.baseSX) {
item.baseSX = item.scaleX;
}
if (!item.baseSY) {
item.baseSY = item.scaleY;
}
let index = 0; let index = 0;
const run = () => { const run = () => {
...@@ -1659,11 +1665,11 @@ export function jelly(item, time = 0.7) { ...@@ -1659,11 +1665,11 @@ export function jelly(item, time = 0.7) {
}; };
const arr = [ const arr = [
[baseSX * 1.1, baseSY * 0.9, t], [item.baseSX * 1.1, item.baseSY * 0.9, t],
[baseSX * 0.98, baseSY * 1.02, t * 2], [item.baseSX * 0.98, item.baseSY * 1.02, t * 2],
[baseSX * 1.02, baseSY * 0.98, t * 2], [item.baseSX * 1.02, item.baseSY * 0.98, t * 2],
[baseSX * 0.99, baseSY * 1.01, t * 2], [item.baseSX * 0.99, item.baseSY * 1.01, t * 2],
[baseSX * 1.0, baseSY * 1.0, t * 2], [item.baseSX * 1.0, item.baseSY * 1.0, t],
]; ];
......
This diff is collapsed.
...@@ -50,6 +50,7 @@ export class Game { ...@@ -50,6 +50,7 @@ export class Game {
} }
_currentPlayingAudioName; _currentPlayingAudioName;
_currentPlayingAudioCallback;
playAudio(key, now = true, callback = null) { playAudio(key, now = true, callback = null) {
if (this._currentPlayingAudioName != '') { if (this._currentPlayingAudioName != '') {
...@@ -58,6 +59,10 @@ export class Game { ...@@ -58,6 +59,10 @@ export class Game {
if (now) { if (now) {
if (!audio.paused) { if (!audio.paused) {
audio.pause(); audio.pause();
if (this._currentPlayingAudioCallback) {
this._currentPlayingAudioCallback();
this._currentPlayingAudioCallback = null;
}
// audio.currentTime = 0; // audio.currentTime = 0;
} }
} }
...@@ -65,6 +70,7 @@ export class Game { ...@@ -65,6 +70,7 @@ export class Game {
} }
this._currentPlayingAudioName = key; this._currentPlayingAudioName = key;
this._currentPlayingAudioCallback = callback;
this._parent.playAudio(key, now, () => { this._parent.playAudio(key, now, () => {
this._currentPlayingAudioName = ''; this._currentPlayingAudioName = '';
if (callback) { if (callback) {
......
import { import {
Game, Game,
TouchSprite, TouchSprite,
RandomInt,
Between,
MyLabel, MyLabel,
blinkItem,
stopBlinkItem,
asyncDelayTime,
asyncTweenChange,
} from './Game'; } from './Game';
import { import {
Label,
jelly, jelly,
showPopParticle,
tweenChange,
rotateItem,
scaleItem,
delayCall,
hideItem,
showItem,
moveItem,
shake,
ShapeRect,
} from './../Unit'; } from './../Unit';
import TWEEN from '@tweenjs/tween.js';
import { defaultData } from './DefaultData'; import { defaultData } from './DefaultData';
export class MyGame extends Game { export class MyGame extends Game {
images = null; images = null;
...@@ -42,22 +22,31 @@ export class MyGame extends Game { ...@@ -42,22 +22,31 @@ export class MyGame extends Game {
this.status = {}; this.status = {};
if (!data.data || Object.is(data.data, {}) || !data.data.tittle) { if (!data.data || Object.is(data.data, {})) {
this.data = defaultData; this.data = defaultData;
} else { } else {
this.data = data.data; this.data = data.data;
}
let imgUrlList = []; let imgUrlList = [];
let audioUrlList = []; let audioUrlList = [];
// imgUrlList.push(...this.data.bottomLineCards.map(card => card.img)); this.data.group.forEach(group => {
// audioUrlList.push(this.data.tittle.audio); group.forEach(line => {
imgUrlList.push(line.img);
audioUrlList.push(line.audio);
});
});
imgUrlList.push(this.data.middleImg);
audioUrlList.push(this.data.titleLetterAudio);
audioUrlList.push(this.data.titleAudio);
audioUrlList.push(this.data.middleImgAudio);
audioUrlList.push(this.data.totalAudio);
imgUrlList = imgUrlList.filter((data) => data != null && data != ''); imgUrlList = imgUrlList.filter((data) => data != null && data != '');
audioUrlList = audioUrlList.filter((data) => data != null && data != ''); audioUrlList = audioUrlList.filter((data) => data != null && data != '');
this.preLoadData(imgUrlList, audioUrlList); this.preLoadData(imgUrlList, audioUrlList);
}
} }
preLoadData(imgUrlList, audioUrlList) { preLoadData(imgUrlList, audioUrlList) {
...@@ -81,19 +70,30 @@ export class MyGame extends Game { ...@@ -81,19 +70,30 @@ export class MyGame extends Game {
// 初始化中间部分 // 初始化中间部分
this.initMiddle(); this.initMiddle();
// 初始化右下角音频按钮
this.initTotalAudio();
// 初始化弹出窗口
this.initPopUp();
} }
bg; bg;
initBg() { initBg() {
const bgBig = new TouchSprite();
bgBig.init(this.images.get('img_white_bg'));
bgBig.x = this._parent.canvasWidth / 2;
bgBig.y = this._parent.canvasHeight / 2;
bgBig.setScaleXY(this._parent.mapScaleBig);
this.addChild(bgBig);
const bg = new TouchSprite(); const bg = new TouchSprite();
bg.init(this.images.get('img_grey_bg')); bg.init(this.images.get('img_white_bg'));
bg.x = this._parent.canvasWidth / 2; bg.x = this._parent.canvasWidth / 2;
bg.y = this._parent.canvasHeight / 2; bg.y = this._parent.canvasHeight / 2;
bg.setScaleXY(this.mapScale); bg.setScaleXY(this.mapScale);
bg.alpha = 0.5;
this.addChild(bg); this.addChild(bg);
this.bg = bg; this.bg = bg;
} }
initTittle() { initTittle() {
...@@ -113,9 +113,13 @@ export class MyGame extends Game { ...@@ -113,9 +113,13 @@ export class MyGame extends Game {
titleLetter.anchorX = 0; titleLetter.anchorX = 0;
titleLetter.anchorY = 0.5; titleLetter.anchorY = 0.5;
titleLetter.text = this.data.titleLetter; titleLetter.text = this.data.titleLetter;
titleLetter.refreshSize();
titleLetter.addTouchBeganListener(() => {
this.playAudio(this.data.titleLetterAudio);
});
titleBg.addChild(titleLetter); titleBg.addChild(titleLetter);
const titleLabel = new Label(); const titleLabel = new MyLabel();
titleLabel.x = titleBg.width * 5 / 8; titleLabel.x = titleBg.width * 5 / 8;
titleLabel.y = 0; titleLabel.y = 0;
titleLabel.fontSize = 36; titleLabel.fontSize = 36;
...@@ -124,9 +128,193 @@ export class MyGame extends Game { ...@@ -124,9 +128,193 @@ export class MyGame extends Game {
titleLabel.anchorX = 0; titleLabel.anchorX = 0;
titleLabel.anchorY = 0.5; titleLabel.anchorY = 0.5;
titleLabel.text = this.data.title; titleLabel.text = this.data.title;
titleLabel.refreshSize();
titleLabel.addTouchBeganListener(() => {
this.playAudio(this.data.titleAudio);
});
titleBg.addChild(titleLabel); titleBg.addChild(titleLabel);
} }
initMiddle() { initMiddle() {
this.initGroups();
this.initMiddleCircle();
} }
initMiddleCircle() {
const circle = new TouchSprite();
circle.init(this.images.get('img_oval_bg'));
this.bg.addChild(circle);
const middleImg = new TouchSprite();
middleImg.init(this.images.get(this.data.middleImg));
middleImg.setScaleXY(Math.min(circle.width / middleImg.width, circle.height / middleImg.height));
this.bg.addChild(middleImg);
circle.addTouchBeganListener(() => {
jelly(circle);
jelly(middleImg);
this.playAudio(this.data.middleImgAudio);
});
}
initGroups() {
const groupImgList = [
'img_group_bg_1',
'img_group_bg_2',
'img_group_bg_2',
'img_group_bg_1'
];
const groupPosList = [
{ x: -1, y: -1 },
{ x: 1, y: -1 },
{ x: -1, y: 1 },
{ x: 1, y: 1 },
];
for (let i = 0; i < 4; i++) {
this.initGroup(i, groupImgList, groupPosList);
}
}
initGroup(idx, groupImgList, groupPosList) {
const groupBg = new TouchSprite();
groupBg.init(this.images.get(groupImgList[idx]));
groupBg.x = groupPosList[idx].x * (groupBg.width / 2 + 2);
groupBg.y = groupPosList[idx].y * (groupBg.height / 2 + 2);
this.bg.addChild(groupBg);
const groupTitle = new MyLabel();
groupTitle.fontSize = 36;
groupTitle.fontColor = "#ffffff";
groupTitle.fontName = 'GOTHICB';
groupTitle.anchorX = 0;
groupTitle.anchorY = 0.5;
groupTitle.text = this.data.groupTitle[idx];
groupTitle.refreshSize();
groupTitle.x = 90 - groupBg.width / 2;
groupTitle.y = groupTitle.height - groupBg.height / 2;
groupTitle.addTouchBeganListener(() => {
this.playAudio(this.data.groupAudio[idx]);
});
groupBg.addChild(groupTitle);
this.data.group[idx].forEach((line, lineIdx) => {
const lineImg = new TouchSprite();
lineImg.init(this.images.get(line.img));
lineImg.setScaleXY(Math.min(65 / lineImg.width, 65 / lineImg.height));
lineImg.x = 120 - groupBg.width / 2;
lineImg.y = lineIdx * 75 - 50;
lineImg.addTouchBeganListener(() => {
jelly(lineImg);
this.playAudio(line.audio);
});
groupBg.addChild(lineImg);
let numberDataList = [];
let width = 0;
line.letterDataList.forEach((letterData, letterIdx) => {
const letterLabel = new MyLabel();
letterLabel.fontSize = 36;
letterLabel.fontColor = letterData.color;
letterLabel.fontName = 'ahronbd';
letterLabel.anchorX = 0;
letterLabel.anchorY = 0.5;
letterLabel.text = letterData.letter;
letterLabel.refreshSize();
letterLabel.x = 160 - groupBg.width / 2 + width;
letterLabel.y = lineIdx * 75 - 50;
groupBg.addChild(letterLabel);
letterLabel.addTouchBeganListener(() => {
console.log(`groupIdx = ${idx}, lineIdx = ${lineIdx}`);
console.log('this.data.group[idx][lineIdx] = ' + JSON.stringify(this.data.group[idx][lineIdx]));
});
width += letterLabel.width;
if (letterData.line) {
const outLine = new TouchSprite();
if (letterData.color == '#c8161e') {
outLine.init(this.images.get('img_line_red'));
} else if (letterData.color == '#696363') {
outLine.init(this.images.get('img_line_black'));
} else {
outLine.init(this.images.get('img_line_grey'));
}
outLine.x = letterLabel.width / 2;
outLine.y = 20;
outLine.scaleX = letterLabel.width / outLine.width;
outLine.scaleY = 1.5;
letterLabel.addChild(outLine);
if (letterData.number) {
const numberData = numberDataList[numberDataList.length - 1];
if (numberDataList.length > 0 && letterIdx - numberData.idx == 1 && numberData.number == letterData.number) {
numberData.idx = letterIdx;
numberData.endX = letterLabel.x + letterLabel.width;
return;
}
numberDataList.push({
idx: letterIdx,
number: letterData.number,
color: letterData.color,
startX: letterLabel.x,
endX: letterLabel.x + letterLabel.width
});
}
}
});
console.log('numberDataList = ' + numberDataList);
numberDataList.forEach(numberData => {
const letterLabel = new MyLabel();
letterLabel.fontSize = 20;
letterLabel.fontColor = numberData.color;
letterLabel.fontName = 'ahronbd';
letterLabel.anchorX = 0;
letterLabel.anchorY = 0.5;
letterLabel.text = numberData.number;
letterLabel.refreshSize();
letterLabel.x = (numberData.startX + numberData.endX) / 2 - letterLabel.width / 2;
letterLabel.y = lineIdx * 75 - 20;
groupBg.addChild(letterLabel);
});
});
}
initTotalAudio() {
const totalAudioBtn = new TouchSprite();
totalAudioBtn.init(this.images.get('btn_play'));
totalAudioBtn.x = this._parent.canvasWidth - totalAudioBtn.width;
totalAudioBtn.y = this._parent.canvasHeight - totalAudioBtn.height;
totalAudioBtn.addTouchBeganListener(() => {
jelly(totalAudioBtn);
this.playAudio(this.data.totalAudio, true, () => {
totalAudioBtn.init(this.images.get('btn_play'));
});
totalAudioBtn.init(this.images.get('btn_pause'));
});
this.addChild(totalAudioBtn);
}
initPopUp() {
const popUpBg = new TouchSprite();
popUpBg.init(this.images.get('img_grey_bg'));
popUpBg.x = this._parent.canvasWidth / 2;
popUpBg.y = this._parent.canvasHeight / 2;
popUpBg.setScaleXY(this._parent.mapScaleBig);
popUpBg.alpha = 0;
popUpBg.addTouchBeganListener(() => {
console.log('汪汪汪');
});
this.addChild(popUpBg);
}
popUp(popUpData) {
}
} }
...@@ -53,6 +53,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -53,6 +53,7 @@ export class PlayComponent implements OnInit, OnDestroy {
renderArr; renderArr;
mapScale = 1; mapScale = 1;
mapScaleBig = 1;
canvasLeft; canvasLeft;
canvasTop; canvasTop;
...@@ -503,8 +504,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -503,8 +504,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const sx = this.canvasWidth / this.canvasBaseW; const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH; const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy); this.mapScale = Math.min(sx, sy);
this.mapScale = s; this.mapScaleBig = Math.max(sx, sy);
// this.mapScale = sx; // this.mapScale = sx;
// this.mapScale = sy; // this.mapScale = sy;
......
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