Commit cb3631c2 authored by huoshizhe's avatar huoshizhe

feat: 屏幕适配

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