Commit cb3631c2 authored by huoshizhe's avatar huoshizhe

feat: 屏幕适配

parent 23df7de6
<div class="model-content">
<div class="border" style=" width: 520px; height: 120px;">
<div class="border" style=" width: 520px;">
<div *ngFor="let wordItem of item.wordList; let i = index">
<div class="border" style=" width: 430px; height: 305px;">
<span style="height: 30px; font-size: 18px;">正面单词:</span>
<input style="width: 150px;" type="text" nz-input [(ngModel)]="wordItem.word" (blur)="save()">
<br>
<span style="height: 30px; font-size: 18px;">正面单词发音:</span>
<app-audio-recorder [audioUrl]="wordItem.audio" (audioUploaded)="onWordAudioUploadSuccess($event, i)">
</app-audio-recorder>
<br>
<span style="height: 30px; font-size: 18px;">背面单词:</span>
<input style="width: 150px;" type="text" nz-input [(ngModel)]="wordItem.backWord" (blur)="save()">
<br>
<span style="height: 30px; font-size: 18px;">背面单词发音:</span>
<app-audio-recorder [audioUrl]="wordItem.backWordAudio"
(audioUploaded)="onBackWordAudioUploadSuccess($event, i)">
</app-audio-recorder>
<br>
<button style="height: 30px; width: 385px; color: red;" nz-button nzType="dashed" class="add-btn"
(click)="removeShell(i)">
<i nz-icon nzType="minus-circle" nzTheme="outline"></i>
删除字母
</button>
</div>
</div>
<div *ngIf="(item.wordList.length < 5)">
<div class="border" style="width: 430px; height: 100px;">
<button style="height: 55px; width: 385px;" nz-button nzType="dashed" class="add-btn" (click)="createShell()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<span>Add</span>
</button>
</div>
</div>
</div>
<!-- <div class="border" style=" width: 520px; height: 120px;">
<span style="height: 30px; font-size: 18px;">单词音频:</span>
<br>
<app-audio-recorder [audioUrl]=" item.audio" (audioUploaded)="onAudioUploadSuccess($event)">
......@@ -57,6 +91,6 @@
添加<span style="color: #ff0000;">错误</span>的字母
</button>
</div>
</div>
</div> -->
</div>
......@@ -10,7 +10,7 @@ import { JsonPipe } from '@angular/common';
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "choose_cake";
saveKey = "Z_04_syys";
// 储存对象
item;
......@@ -18,32 +18,25 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
addRightWord() {
this.item.rightWordList.push({ word: '', audio: '' });
this.save();
}
removeRightWord(idx) {
this.item.rightWordList.splice(idx, 1);
this.save();
}
addWrongWord() {
this.item.wrongWordList.push({ word: '', audio: '' });
createShell() {
this.item.wordList.push({
word: '',
audio: '',
backWord: '',
backWordAudio: '',
});
this.save();
}
removeWrongWord(idx) {
this.item.wrongWordList.splice(idx, 1);
removeShell(idx) {
this.item.wordList.splice(idx, 1);
this.save();
}
ngOnInit() {
this.item = {
audio: '',
rightWordList: [],
wrongWordList: []
wordList: []
};
// 获取存储的数据
......@@ -91,13 +84,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save();
}
onRightAudioUploadSuccess(e, idx) {
this.item.rightWordList[idx].audio = e.url;
onWordAudioUploadSuccess(e, idx) {
this.item.wordList[idx].audio = e.url;
this.save();
}
onWrongAudioUploadSuccess(e, idx) {
this.item.wrongWordList[idx].audio = e.url;
onBackWordAudioUploadSuccess(e, idx) {
this.item.wordList[idx].backWordAudio = e.url;
this.save();
}
......
......@@ -466,8 +466,8 @@
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-459.771,
-482.411,
-459.77099999999996,
-482.41100000000006,
0,
0,
0,
......@@ -4306,7 +4306,7 @@
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "2alvHylcNNH4p8VaE+7P9B"
"_id": "17YYH9EkJDuo+A/VO2lBIo"
},
{
"__type__": "cc.Node",
......@@ -4977,7 +4977,7 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 0,
"width": 5.684341886080802e-14,
"height": 0
},
"_anchorPoint": {
......@@ -4989,7 +4989,7 @@
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-378.541,
-378.54099999999994,
-465.688,
0,
0,
......@@ -5636,10 +5636,10 @@
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 44,
"_alignFlags": 4,
"_left": 0,
"_right": 0,
"_top": 0,
"_top": -720,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
......@@ -5650,7 +5650,7 @@
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 1280,
"_originalHeight": 0,
"_originalHeight": 1440,
"_id": "89McaUyrdDD7O/quc5VVYw"
},
{
......@@ -5759,8 +5759,8 @@
"width": 1280,
"height": 720
},
"_fitWidth": false,
"_fitHeight": true,
"_fitWidth": true,
"_fitHeight": false,
"_id": "59Cd0ovbdF4byw5sbjJDx7"
},
{
......@@ -5773,7 +5773,7 @@
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 45,
"_alignFlags": 4,
"_left": 0,
"_right": 0,
"_top": 0,
......@@ -5786,8 +5786,8 @@
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_originalWidth": 1280,
"_originalHeight": 720,
"_id": "29zXboiXFBKoIV4PQ2liTe"
},
{
......
......@@ -7,13 +7,11 @@
const defaultData = require('../script/defaultData');
import {
exchangeNodePos,
asyncTweenTo,
asyncTweenBy,
asyncDelay,
asyncPlayDragonBoneAnimation,
randomSortByArr,
asyncPlayEffectByUrl,
Between,
RandomInt
} from '../script/utils';
......@@ -31,10 +29,6 @@ cc.Class({
},
},
// LIFE-CYCLE CALLBACKS:
// onLoad () {},
ctor() {
this._imageResList = [];
this._audioResList = [];
......@@ -44,7 +38,6 @@ cc.Class({
this._maxTreeHeight = 5;
},
start() {
this.data = defaultData;
this.getData((data) => {
......@@ -65,10 +58,9 @@ cc.Class({
}, 9000);
},
getData(func) {
if (window && window.courseware) {
window.courseware.getData(func, 'choose_cake');
window.courseware.getData(func, 'Z_04_syys');
} else {
func(defaultData);
}
......@@ -85,7 +77,8 @@ cc.Class({
addPreloadImage() { },
addPreloadAudio() {
this._audioResList.push(...this.data.wordList.map(data => ({ url: data.audio })));
this._audioResList.push(...this.data.wordList.map(data => ({ url: data.backWordAudio })));
},
preload() {
......@@ -123,12 +116,18 @@ cc.Class({
async openTheDoor() {
const nodeWheel = cc.find('Canvas/NodeBg/NodeWheel');
this.playEffect('门铃');
await asyncDelay(0.3);
this.playEffect('旋转');
await asyncTweenBy(nodeWheel, 0.5, { angle: -360 });
nodeWheel.active = false;
this.playEffect('开门');
const nodeDoor = cc.find('Canvas/NodeBg/NodeDoor');
nodeDoor.active = true;
nodeDoor.opacity = 255;
nodeDoor.opacity = 0;
await asyncTweenBy(nodeDoor, 0.1, { opacity: 255 });
},
async characterWalk() {
......@@ -136,6 +135,7 @@ cc.Class({
nodeCharacterWalk.active = true;
asyncPlayDragonBoneAnimation(nodeCharacterWalk, 'walk', -1);
this.playEffect('走路');
const nodeCharacterBase = cc.find('Canvas/NodeBg/NodeCharacterBase');
await asyncTweenTo(nodeCharacterBase, 3, { x: 100 });
......@@ -146,11 +146,13 @@ cc.Class({
cc.tween(nodeCharacterBase)
.delay(1.5)
.call(() => {
this.playEffect('植物');
this.showTree(0);
})
.delay(1)
.to(2.5, { x: 0 })
.start();
this.playEffect('浇水');
await asyncPlayDragonBoneAnimation(nodeCharacterWater, 'water', 1);
nodeCharacterWater.active = false;
......@@ -167,6 +169,8 @@ cc.Class({
const nodeTree = cc.find('Canvas/NodeBg/TreeMaskNode/NodeTree');
this.moveCamera(idx);
await asyncTweenTo(nodeTree, 3, { y: treeYList[idx] });
this.playEffect('路牌');
this.showShell(idx);
this._status.treeHeight = idx;
},
......@@ -201,13 +205,16 @@ cc.Class({
}
labelNode.on('click', () => {
asyncPlayEffectByUrl(this.data.wordList[idx].audio);
if (this.data.wordList[idx].backWord == '') {
this.playEffect('植物');
this.showTree(idx + 1);
return;
}
});
labelNodeBack.on('click', () => {
asyncPlayEffectByUrl(this.data.wordList[idx].backWordAudio);
this.showTree(idx + 1);
});
......
......@@ -61,12 +61,6 @@ export function shuffle(arr) {
return newArr;
}
// export function Between(a, b, c) {
// let max = Math.max(a, b, c);
// let min = Math.min(a, b, c);
// return [a, b, c].find((number) => number != max && number != min);
// }
export function Between(a, b, c) {
return [a, b, c].sort((a, b) => a - b)[1];
}
......@@ -82,7 +76,7 @@ export function randomSortByArr(arr) {
return newArr;
}
export async function asyncTweenTo(node, duration, obj, ease = undefined) {
export function asyncTweenTo(node, duration, obj, ease = undefined) {
return new Promise((resolve, reject) => {
cc.tween(node)
.to(duration, obj, ease)
......@@ -93,7 +87,7 @@ export async function asyncTweenTo(node, duration, obj, ease = undefined) {
});
}
export async function asyncTweenBy(node, duration, obj, ease = undefined) {
export function asyncTweenBy(node, duration, obj, ease = undefined) {
return new Promise((resolve, reject) => {
cc.tween(node)
.by(duration, obj, ease)
......@@ -104,6 +98,14 @@ export async function asyncTweenBy(node, duration, obj, ease = undefined) {
});
}
export function asyncDelay(duration) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, duration * 1000);
});
}
export async function asyncPlayDragonBoneAnimation(node, animationName, time = 1) {
return new Promise((resolve, reject) => {
node.getComponent(dragonBones.ArmatureDisplay)
......@@ -119,7 +121,6 @@ export async function asyncPlayDragonBoneAnimation(node, animationName, time = 1
export async function asyncPlayEffectByUrl(url, loop = false) {
return new Promise((resolve, reject) => {
cc.assetManager.loadRemote(url, (err, clip) => {
console.log(clip);
cc.audioEngine.playEffect(clip, loop);
});
});
......
......@@ -31,5 +31,6 @@
"live": {
"enable": false
}
}
},
"last-module-event-record-time": 1597652232681
}
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