Commit b09336cf authored by Chen Jiping's avatar Chen Jiping

feat:完成模板开发

parent b5dadd1e
...@@ -4,6 +4,8 @@ export class ExercisesBean{ ...@@ -4,6 +4,8 @@ export class ExercisesBean{
answerIndex; answerIndex;
indexAudioUrl;
answer : AnswerBean; answer : AnswerBean;
} }
......
...@@ -11,9 +11,9 @@ export class Exercises { ...@@ -11,9 +11,9 @@ export class Exercises {
bg: ShapeRect; bg: ShapeRect;
answer1: ShapeRect; answer: ShapeRect;
answer2: ShapeRect; answerLabel: Label2;
scaleX = 1; scaleX = 1;
...@@ -21,7 +21,9 @@ export class Exercises { ...@@ -21,7 +21,9 @@ export class Exercises {
answered: Boolean = false; answered: Boolean = false;
rightPic: MySprite; indexLabel : Label;
indexLabelBg : ShapeRect;
init(images, indexBgColor, data, scaleX = 1, scaleY = 1) { init(images, indexBgColor, data, scaleX = 1, scaleY = 1) {
...@@ -35,6 +37,8 @@ export class Exercises { ...@@ -35,6 +37,8 @@ export class Exercises {
this.indexBgColor = indexBgColor; this.indexBgColor = indexBgColor;
this.index = this.data.answerIndex;
this.initBg(); this.initBg();
this.initIndex(); this.initIndex();
...@@ -45,7 +49,7 @@ export class Exercises { ...@@ -45,7 +49,7 @@ export class Exercises {
initBg() { initBg() {
let height = 48 * this.scaleY; let height = 48 * this.scaleY;
let width = 580 * this.scaleX; let width = 284 * this.scaleX;
const bg = new ShapeRect(); const bg = new ShapeRect();
bg.setSize(width, height); bg.setSize(width, height);
...@@ -53,14 +57,15 @@ export class Exercises { ...@@ -53,14 +57,15 @@ export class Exercises {
this.bg = bg; this.bg = bg;
} }
initIndex(){ initIndex() {
let indexBg = new ShapeCircle(); let indexBg = new ShapeRect();
indexBg.setRadius(23 * this.scaleX); indexBg.setSize(43 * this.scaleX, 46 * this.scaleY);
indexBg.fillColor = this.indexBgColor; indexBg.fillColor = this.indexBgColor;
indexBg.x = indexBg.width / 2; indexBg.x = 0;
indexBg.y = this.bg.height / 2; indexBg.y = (this.bg.height - indexBg.height) / 2;
indexBg.alpha = 0.7; indexBg.alpha = 0.7;
this.bg.addChild(indexBg); this.bg.addChild(indexBg);
this.indexLabelBg = indexBg;
let index = new Label(); let index = new Label();
index.text = this.index + ""; index.text = this.index + "";
...@@ -70,46 +75,30 @@ export class Exercises { ...@@ -70,46 +75,30 @@ export class Exercises {
index.fontColor = "#ffffff"; index.fontColor = "#ffffff";
index.setScaleXY(this.scaleX); index.setScaleXY(this.scaleX);
index.refreshSize(); index.refreshSize();
index.x = 0; index.x = indexBg.width / 2;
index.y = 0; index.y = indexBg.height / 2;
indexBg.addChild(index); indexBg.addChild(index);
index.alpha = 0;
this.indexLabel = index;
} }
initAnswer(){ initAnswer() {
let startX = 46 * this.scaleX + 7 * this.scaleX;
let answer1 = this.getAnswerView(this.data.answer1); let startX = 43 * this.scaleX + 8 * this.scaleX;
answer1.x = startX;
this.answer1 = answer1;
let answer2 = this.getAnswerView(this.data.answer2); let answer = this.getAnswerView(this.data.answer);
answer2.x = startX + 253 * this.scaleX; answer.x = startX;
this.answer2 = answer2; this.answer = answer;
const rightPic = new MySprite();
rightPic.init(this.images.get('circle'));
rightPic.setScaleXY(this.scaleX);
rightPic.alpha = 0;
rightPic.y = this.bg.height / 2;
this.rightPic = rightPic;
if(this.data.answerIndex == '1'){
rightPic.x = answer1.x + answer1.width / 2;
}
else if(this.data.answerIndex == '2'){
rightPic.x = answer2.x + answer2.width / 2;
}
this.bg.addChild(rightPic); this.bg.addChild(answer);
} }
getAnswerView(answerData){ getAnswerView(answerData) {
const getLabelText = (letter) => { const getLabelText = (letter) => {
const text = new LabelText(); const text = new LabelText();
text.val = letter.val; text.val = letter.val;
if (letter.isFill == '1') { if (letter.isFill == '1') {
text.fontColor = "#c8161d"; text.fontColor = "#c5c5c5";
} }
else { else {
text.fontColor = "#000000"; text.fontColor = "#000000";
...@@ -138,6 +127,7 @@ export class Exercises { ...@@ -138,6 +127,7 @@ export class Exercises {
answer.fontName = "MMB"; answer.fontName = "MMB";
answer.setScaleXY(this.scaleX); answer.setScaleXY(this.scaleX);
answer.refreshSize(); answer.refreshSize();
this.answerLabel = answer;
const answerBg = new ShapeRect(); const answerBg = new ShapeRect();
answerBg.alpha = 0; answerBg.alpha = 0;
...@@ -156,11 +146,20 @@ export class Exercises { ...@@ -156,11 +146,20 @@ export class Exercises {
checkAnswer(answerIndex) { checkAnswer(answerIndex) {
if(this.data.answerIndex == answerIndex){ if (this.data.answerIndex == answerIndex) {
this.rightPic.alpha = 1;
this.indexLabel.alpha = 1
this.answered = true; this.answered = true;
let textArr = this.answerLabel.textArr;
for (let i = 0; i < textArr.length; ++i) {
if (textArr[i].fontColor == "#c5c5c5") {
textArr[i].fontColor = "#c8161d";
}
}
return true; return true;
} }
......
...@@ -52,6 +52,7 @@ export class Letter{ ...@@ -52,6 +52,7 @@ export class Letter{
letter.fontName = "BRLNSDB"; letter.fontName = "BRLNSDB";
letter.fontColor = "#ffffff"; letter.fontColor = "#ffffff";
letter.setScaleXY(this.scaleX); letter.setScaleXY(this.scaleX);
letter.setMaxSize(80 * this.scaleX);
letter.refreshSize(); letter.refreshSize();
letter.x = 0; letter.x = 0;
letter.y = 0; letter.y = 0;
......
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core'; import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener } from '@angular/core';
import { import {
Label, Label,
MySprite, ShapeRectNew, tweenChange, MySprite, ShapeRectNew, tweenChange,
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import { res, resAudio } from './resources';
import {Subject} from 'rxjs'; import { Subject } from 'rxjs';
import {debounceTime} from 'rxjs/operators'; import { debounceTime } from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import { Title } from './Title'; import { Title } from './Title';
...@@ -16,6 +16,7 @@ import { getDefaultTile } from '../bean/TitleBean'; ...@@ -16,6 +16,7 @@ import { getDefaultTile } from '../bean/TitleBean';
import { Listening } from './Listening'; import { Listening } from './Listening';
import { Letter } from './Letter'; import { Letter } from './Letter';
import { Exercises } from './Exercises.spreat'; import { Exercises } from './Exercises.spreat';
import { AnswerBean, getDefaultExercises } from '../bean/Exercises';
...@@ -27,8 +28,8 @@ import { Exercises } from './Exercises.spreat'; ...@@ -27,8 +28,8 @@ import { Exercises } from './Exercises.spreat';
}) })
export class PlayComponent implements OnInit, OnDestroy { export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef; @ViewChild('canvas', { static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef; @ViewChild('wrap', { static: true }) wrap: ElementRef;
// 数据 // 数据
data; data;
...@@ -70,14 +71,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -70,14 +71,16 @@ export class PlayComponent implements OnInit, OnDestroy {
/**标题*/ /**标题*/
title: Title; title: Title;
listening : Listening; listening: Listening;
curAudio; curAudio;
letterArr : Array<Letter>; letterArr: Array<Letter>;
exercisesArr: Array<Exercises> = []; exercisesArr: Array<Exercises> = [];
curIndex = 0;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
...@@ -89,7 +92,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -89,7 +92,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {}; this.data = {};
// 获取数据 // 获取数据
const getData = (<any> window).courseware.getData; const getData = (<any>window).courseware.getData;
getData((data) => { getData((data) => {
if (data && typeof data == 'object') { if (data && typeof data == 'object') {
...@@ -458,17 +461,48 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -458,17 +461,48 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data.title = getDefaultTile(); this.data.title = getDefaultTile();
} }
if(!this.data.backgroudColor){ if (!this.data.backgroudColor) {
this.data.backgroudColor = "#B5C75F"; this.data.backgroudColor = "#B5C75F";
} }
if(!this.data.letterArr){ if (!this.data.letterArr) {
this.data.letterArr = []; this.data.letterArr = [];
} }
if(!this.data.exercisesArr){ if (!this.data.zoneArr) {
this.data.exercisesArr = []; this.data.zoneArr = [];
}
for (let i = this.data.zoneArr.length; i < 3; ++i) {
let zone = {
exercisesArr: []
};
this.data.zoneArr.push(zone);
}
for (let i = 0; i < this.data.zoneArr.length; ++i) {
let zone = this.data.zoneArr[i];
if (!zone) {
zone = {
exercisesArr: []
};
this.data.zoneArr[i] = zone;
}
for (let j = 0; j < zone.exercisesArr.length; ++j) {
if (!zone.exercisesArr[j]) {
zone.exercisesArr[j] = getDefaultExercises();
}
if (!zone.exercisesArr[j].answer) {
zone.exercisesArr[j].answer = new AnswerBean();
}
}
} }
} }
...@@ -505,28 +539,34 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -505,28 +539,34 @@ export class PlayComponent implements OnInit, OnDestroy {
this.addUrlToAudioObj('listenAudio', this.data.audioUrl); this.addUrlToAudioObj('listenAudio', this.data.audioUrl);
} }
for(let i = 0; i < this.data.letterArr.length; ++ i){ for (let i = 0; i < this.data.letterArr.length; ++i) {
let letter = this.data.letterArr[i]; let letter = this.data.letterArr[i];
if(letter.audioUrl){ if (letter.audioUrl) {
this.addUrlToAudioObj(letter.audioUrl); this.addUrlToAudioObj(letter.audioUrl);
} }
} }
for (let i = 0; i < this.data.zoneArr.length; ++i) {
let zone = this.data.zoneArr[i];
//练习题音效 //练习题音效
for (let i = 0; i < this.data.exercisesArr.length; ++i) { for (let i = 0; i < zone.exercisesArr.length; ++i) {
let exercises = zone.exercisesArr[i];
let exercises = this.data.exercisesArr[i]; if (exercises.answer && exercises.answer.audioUrl) {
this.addUrlToAudioObj('exercises_' + i, exercises.answer.audioUrl);
}
if (exercises.answer1 && exercises.answer1.audioUrl) { if(exercises.indexAudioUrl){
this.addUrlToAudioObj('exercises_' + i, exercises.answer1.audioUrl); this.addUrlToAudioObj('exercises_index_' + i, exercises.indexAudioUrl);
} }
if (exercises.answer2 && exercises.answer2.audioUrl) {
this.addUrlToAudioObj('exercises_2_' + i, exercises.answer2.audioUrl);
} }
} }
} }
...@@ -553,6 +593,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -553,6 +593,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.letterArr = []; this.letterArr = [];
this.exercisesArr = []; this.exercisesArr = [];
this.curIndex = 0;
} }
...@@ -599,7 +641,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -599,7 +641,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
initLetter(){ initLetter() {
let letterArr = this.data.letterArr; let letterArr = this.data.letterArr;
...@@ -611,7 +653,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -611,7 +653,7 @@ export class PlayComponent implements OnInit, OnDestroy {
let y = this.canvasHeight / 2 - 218 * this.mapScale; let y = this.canvasHeight / 2 - 218 * this.mapScale;
for(let i = 0; i < letterArr.length; ++ i){ for (let i = 0; i < letterArr.length; ++i) {
let letter = new Letter(); let letter = new Letter();
letter.init(this.images, letterArr[i], this.data.backgroudColor, this.mapScale, this.mapScale); letter.init(this.images, letterArr[i], this.data.backgroudColor, this.mapScale, this.mapScale);
...@@ -623,59 +665,75 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -623,59 +665,75 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
initExercises(){ initExercises() {
let w = 344 * this.mapScale;
let h = 344 * this.mapScale;
let r = 20 * this.mapScale;
let y = this.canvasHeight / 2 - 119 * this.mapScale;
let w = 1200 * this.mapScale; let dW = 50;
let h = 364 * this.mapScale; let startX = (this.canvasWidth - (w * 3 + dW * (3 - 1))) / 2;
let r = 69 * this.mapScale;
const getView = (item, x = 0, y = 0) => {
let exercises = new Exercises();
exercises.init(this.images, this.data.backgroudColor, item, this.mapScale, this.mapScale);
exercises.bg.x = x;
exercises.bg.y = y;
return exercises;
}
for (let i = 0; i < this.data.zoneArr.length; ++i) {
const bg = new ShapeRectNew(); const bg = new ShapeRectNew();
bg.setSize(w, h, r); bg.setSize(w, h, r);
bg.fillColor = this.data.backgroudColor; bg.fillColor = this.data.backgroudColor;
bg.x = (this.canvasWidth - w) / 2; bg.x = startX;
bg.y = this.canvasHeight / 2 - 119 * this.mapScale; bg.y = y;
bg.alpha = 0.1; bg.alpha = 0.1;
startX += w + dW;
this.renderArr.push(bg); this.renderArr.push(bg);
var dW = 582 * this.mapScale; let exercisesArr = this.data.zoneArr[i].exercisesArr;
var dH = 105 * this.mapScale; if(!exercisesArr || exercisesArr.length == 0){
continue;
}
let rows = Math.ceil(this.data.exercisesArr.length / 2); let x = 29 * this.mapScale;
let cols = 2; let disH = 57 * this.mapScale;
let startX = (this.canvasWidth - (cols - 1) * dW) / 2;; let startY = (h - exercisesArr.length * 48 * this.mapScale - (exercisesArr.length - 1) * disH) / 2;
let startY = bg.y + 51 * this.mapScale;
let tempY = startY; for (let j = 0; j < exercisesArr.length; ++j) {
for(let i = 0; i < this.data.exercisesArr.length; ++i){
let item = this.data.exercisesArr[i];
console.log(i);
let exercises = new Exercises();
exercises.index = i + 1;
exercises.init(this.images, this.data.backgroudColor, item, this.mapScale, this.mapScale);
this.renderArr.push(exercises.bg);
this.exercisesArr.push(exercises);
exercises.bg.x = startX - exercises.bg.width / 2; let exercises = getView(exercisesArr[j], x, startY);
exercises.bg.y = startY;
//换行 bg.addChild(exercises.bg);
if ((i + 1) % rows != 0) {
startY += dH; this.exercisesArr.push(exercises);
}
else { startY += exercises.bg.height + disH;
startX += dW;
startY = tempY;
} }
} }
} }
...@@ -715,10 +773,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -715,10 +773,10 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
for(let i = 0; i < this.letterArr.length; ++ i){ for (let i = 0; i < this.letterArr.length; ++i) {
let letter = this.letterArr[i]; let letter = this.letterArr[i];
if(this.checkClickTarget(letter.bg)){ if (this.checkClickTarget(letter.bg)) {
this.curAudio = this.playAudio(letter.data.audioUrl, true); this.curAudio = this.playAudio(letter.data.audioUrl, true);
break; break;
} }
...@@ -731,20 +789,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -731,20 +789,11 @@ export class PlayComponent implements OnInit, OnDestroy {
let exercises = this.exercisesArr[i]; let exercises = this.exercisesArr[i];
if (this.checkClickTarget(exercises.answer1)) { if (this.checkClickTarget(exercises.answer) || this.checkClickTarget(exercises.indexLabelBg)) {
clicked = true;
this.clickExercises(exercises, i, '1');
break;
}
if (this.checkClickTarget(exercises.answer2)) {
clicked = true; clicked = true;
this.clickExercises(exercises, i, '2'); this.clickExercises(exercises, i);
break; break;
} }
...@@ -782,18 +831,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -782,18 +831,10 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
clickExercises(exercises: Exercises, index: number, answerIndex: String) { clickExercises(exercises: Exercises, index: number) {
const play = () => { const play = () => {
let key; let key = 'exercises_' + index;
if (answerIndex == '1') {
key = 'exercises_' + index;
}
else if (answerIndex == '2') {
key = 'exercises_2_' + index;
}
const audio = this.audioObj[key]; const audio = this.audioObj[key];
...@@ -807,11 +848,20 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -807,11 +848,20 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
else { else {
if (exercises.checkAnswer(answerIndex)) { if (exercises.checkAnswer(this.curIndex + 1)) {
this.playAudio('right', true, () => { this.playAudio('right', true, () => {
play(); let key = 'exercises_index_' + index;
const audio = this.audioObj[key];
this.curAudio = audio;
this.playAudio(key, true);
}); });
this.curIndex += 1;
} }
else { else {
play(); play();
......
...@@ -2,7 +2,6 @@ const res = [ ...@@ -2,7 +2,6 @@ const res = [
['play', "assets/play/play.png"], ['play', "assets/play/play.png"],
['stop', "assets/play/stop.png"], ['stop', "assets/play/stop.png"],
['circle', "assets/play/circle.png"],
]; ];
......
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