Commit bb72683a authored by Chen Jiping's avatar Chen Jiping

模板完成

parent 3695f7ce
......@@ -128,5 +128,8 @@
}
}
},
"defaultProject": "ng-template-generator"
"defaultProject": "ng-template-generator",
"cli": {
"analytics": "181ec1bf-5950-47fe-8144-2a4fdffe488d"
}
}
\ No newline at end of file
export class Course {
/**练习类型:01-文本, 02-音频, 03-图片 */
type: string;
text: string;
picUrl: string;
audioUrl: string;
picArr: [];
}
export class Picture {
picUrl: string;
color: string;
}
\ No newline at end of file
<div class="model-content">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
<nz-card nzTitle="课程练习内容编辑" style="margin:5vw;" nzType="inner">
<div nz-row>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="type" nzNoColon=true>类型</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-select [(ngModel)]="item.type" style="width: 110px;" id="type"
(ngModelChange)="onChange($event, item, 'type')" nzPlaceHolder="type">
<nz-option [nzValue]="option.code" [nzLabel]="option.name" *ngFor="let option of courseTypeArr">
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="type" nzNoColon=true>内容(长度:96)</nz-form-label>
<nz-form-control [nzSpan]="8" [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='8' nzHasFeedback nzErrorTip="MaxLength is 96">
<div *ngIf="item.type == '01'">
<textarea rows="6" nz-input [(ngModel)]="item.text" (blur)="save()" maxlength="96" placeholder="write any thing"></textarea>
</div>
<div *ngIf="item.type == '02'">
<app-audio-recorder [audioUrl]="item.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, item, 'audioUrl')">
</app-audio-recorder>
</div>
<div *ngIf="item.type == '03'">
<app-upload-image-with-preview [picUrl]="item.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item, 'picUrl')">
</app-upload-image-with-preview>
</div>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true>图片</nz-form-label>
<nz-form-control [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='6'>
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addPicItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
</div>
<div nz-row>
<div *ngFor="let data of item.picArr;let i = index" nz-col [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='7' style="margin: 1vw;">
<nz-card nzTitle="图片-{{i + 1}}" [nzExtra]="extraTemplate">
<nz-form-item>
<nz-form-label [nzSpan]="6" nzNoColon=true>图片</nz-form-label>
<nz-form-control [nzSpan]="18">
<app-upload-image-with-preview [picUrl]="data.picUrl"
(imageUploaded)="onImageUploadSuccess($event, data, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzNoColon=true>涂色</nz-form-label>
<nz-form-control [nzSpan]="18">
<nz-select [(ngModel)]="data.color" style="width: 100%;" id="color"
(ngModelChange)="onChange($event, data, 'color')" nzPlaceHolder="color">
<nz-option [nzValue]="option.code" nzCustomContent [nzLabel]="option.name"
*ngFor="let option of colorArr"><img src='{{option.picUrl}}'>{{option.name}}
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</nz-card>
<ng-template #extraTemplate>
<button style="margin: 10px;" nz-button nzType="danger" (click)="delPicItem(i)">
<span>删除</span>
</button>
</ng-template>
</div>
</div>
</nz-card>
</div>
</div>
\ No newline at end of file
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import { Course, Picture} from './Course';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
selector: 'app-form',
......@@ -10,19 +12,27 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "PU-17";
// 储存对象
item;
colorArr = [];
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
courseTypeArr = [];
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
}
ngOnInit() {
this.item = {};
this.item = new Course();
this.item.type = '01';
this.initColorArr();
this.initCourseType();
// 获取存储的数据
(<any> window).courseware.getData((data) => {
......@@ -30,7 +40,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
if (data) {
this.item = data;
}
console.log(this.item);
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
......@@ -51,6 +61,37 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() {
if(!this.item.picArr){
this.item.picArr = [];
}
}
initColorArr(){
this.colorArr.push({code:'01',name:'红色', color:'#f3440d', picUrl:'assets/play/palette/red.png'});
this.colorArr.push({code:'02',name:'紫色', color:'#c80df3', picUrl:'assets/play/palette/purple.png'});
this.colorArr.push({code:'03',name:'绿色', color:'#26eb45', picUrl:'assets/play/palette/green.png'});
this.colorArr.push({code:'04',name:'蓝色', color:'#404dfb', picUrl:'assets/play/palette/blue.png'});
this.colorArr.push({code:'05',name:'橘色', color:'#ff9600', picUrl:'assets/play/palette/orange.png'});
this.colorArr.push({code:'06',name:'粉色', color:'#ff6073', picUrl:'assets/play/palette/pink.png'});
this.colorArr.push({code:'07',name:'天蓝色', color:'#07d6ff', picUrl:'assets/play/palette/skyBlue.png'});
this.colorArr.push({code:'08',name:'紫粉色', color:'#ff07ff', picUrl:'assets/play/palette/purplePink.png'});
}
initCourseType(){
this.courseTypeArr.push({code:'01', name:'文本'});
this.courseTypeArr.push({code:'02', name:'音频'});
this.courseTypeArr.push({code:'03', name:'图片'});
}
......@@ -58,9 +99,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
onImageUploadSuccess(e, item, key) {
this.item[key] = e.url;
item[key] = e.url;
this.save();
}
......@@ -68,9 +109,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
onAudioUploadSuccess(e, item, key) {
this.item[key] = e.url;
item[key] = e.url;
this.save();
}
......@@ -93,5 +134,54 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1);
}
addPicItem() {
const picItem = new Picture();
this.item.picArr.push(picItem);
this.save();
}
delPicItem(index) {
if (index !== -1) {
this.item.picArr.splice(index, 1);
this.save();
}
}
onChange(event, item, key){
item[key] = event;
this.save();
}
validatorMaxLength(value, length){
if (!value) {
return true;
}
const chr = value.replace(' ','');
if (chr.length > length){
let id = this.message.error('超过' + length +'个字母', { nzDuration: 0 }).messageId;
setTimeout(() => {
this.message.remove(id);
}, 3000);
return false;
}
else{
return true;
}
}
saveContent(value) {
let result = this.validatorMaxLength(value, 20);
if (result) {
this.save();
}
}
}
import {
Item
} from './Item'
import {
Label,
MySprite, tweenChange, ShapeRect, MyAnimation, ShapeRectNew
} from './Unit';
export class AudioComponent extends Item {
bg: ShapeRect;
curAudio;
btnPlay: MySprite;
btnStop: MySprite;
totalTimeLabel: Label;
curTimeLabel: Label;
paused = false;
ended = false;
progress: ShapeRect;
progressVal = 0;
progressBtn: MySprite;
touched = false;
touchX = 0;
/**进度条按钮当前坐标 */
curX = 0
progressInitX = 0;
init(width: number, height: number) {
const bg = new ShapeRect();
bg.setSize(width, height);
bg.alpha = 0;
this.bg = bg;
const audioPic = new MySprite();
audioPic.init(this.images.get("bg_audio"));
audioPic.scaleX = this.scaleX;
audioPic.scaleY = this.scaleY;
audioPic.x = bg.width / 2;
audioPic.y = bg.height / 2;
bg.addChild(audioPic);
const btnPlay = new MySprite();
btnPlay.init(this.images.get("btn_audio_off"), 0, 0);
btnPlay.scaleX = this.scaleX;
btnPlay.scaleY = this.scaleY;
btnPlay.x = 0;
btnPlay.y = 0;
const btnPlayBg = new ShapeRect();
btnPlayBg.setSize(btnPlay.getBoundingBox().width, btnPlay.getBoundingBox().height);
btnPlayBg.alpha = 0;
btnPlayBg.x = 429 * this.scaleX;
btnPlayBg.y = 31 * this.scaleY;
btnPlayBg.addChild(btnPlay);
bg.addChild(btnPlayBg);
this.btnPlay = btnPlayBg;
const btnStop = new MySprite();
btnStop.init(this.images.get("btn_audio_on"), 0, 0);
btnStop.scaleX = this.scaleX;
btnStop.scaleY = this.scaleY;
btnStop.x = btnPlay.x;
btnStop.y = btnPlay.y;
const btnStopBg = new ShapeRect();
btnStopBg.setSize(btnPlayBg.width, btnPlayBg.height);
btnStopBg.alpha = 0;
btnStopBg.x = btnPlayBg.x;
btnStopBg.y = btnPlayBg.y;
btnStopBg.addChild(btnStop);
bg.addChild(btnStopBg);
btnStopBg.visible = false;
this.btnStop = btnStopBg;
this.progressInitX = 42 * this.scaleX;
const progressBar = new MySprite();
progressBar.init(this.images.get("bg_audio_progress_bar"));
progressBar.scaleX = this.scaleX;
progressBar.scaleY = this.scaleY;
progressBar.x = this.progressInitX + progressBar.getBoundingBox().width / 2;
progressBar.y = 37 * this.scaleY + progressBar.getBoundingBox().height / 2;
bg.addChild(progressBar);
this.progressVal = progressBar.getBoundingBox().width;
const progress = new ShapeRect();
progress.setSize(0, progressBar.getBoundingBox().height);
progress.x = this.progressInitX;
progress.y = 37 * this.scaleY;
progress.fillColor = "#c80df3";
bg.addChild(progress);
this.progress = progress;
const progressBtn = new MySprite();
progressBtn.init(this.images.get("processBtn"), 0, 0);
progressBtn.scaleX = this.scaleX;
progressBtn.scaleY = this.scaleY;
progressBtn.x = this.progressInitX;
progressBtn.y = progress.y - (progressBtn.getBoundingBox().height - progress.height) / 2;
bg.addChild(progressBtn);
this.progressBtn = progressBtn;
this.curX = progressBtn.x;
const timeLabel = () => {
const timeLabel = new Label();
timeLabel.text = "0:00";
timeLabel.fontColor = "#dc8300";
timeLabel.fontSize = 26;
timeLabel.fontName = "BRLNSR";
timeLabel.scaleX = this.scaleX;
timeLabel.scaleY = this.scaleY;
timeLabel.textAlign = 'middle';
timeLabel.refreshSize();
return timeLabel;
}
const totalTime = timeLabel();
totalTime.x = 343 * this.scaleX;
totalTime.y = 70 * this.scaleY + totalTime.getBoundingBox().height / 2;
bg.addChild(totalTime);
this.totalTimeLabel = totalTime;
const curTime = timeLabel();
curTime.x = 55 * this.scaleX;
curTime.y = totalTime.y;
bg.addChild(curTime);
this.curTimeLabel = curTime;
const autoCover = new MySprite();
autoCover.init(this.images.get("auto_cover"), 0, 0);
autoCover.scaleX = this.scaleX;
autoCover.scaleY = this.scaleY;
autoCover.x = (bg.width - autoCover.getBoundingBox().width) / 2;
autoCover.y = bg.height - autoCover.getBoundingBox().height - 17 * this.scaleY;
bg.addChild(autoCover);
}
setAudio(audio) {
if (!audio) {
this.bg.visible = false;
}
else {
this.bg.visible = true;
this.btnPlay.visible = true;
this.btnStop.visible = false;
audio.currentTime = 0;
}
this.curAudio = audio;
let playingTime = this.getPlayingTime();
let time = this.getTimeStr(playingTime.totalTime);
this.totalTimeLabel.text = time;
this.setPlayInfo(playingTime);
}
/**
*
* @param now true-重新开始播放,flase-继续播放
* @param callback
*/
playAudio(now = false, callback = null) {
if (!this.curAudio) {
return;
}
this.ended = false;
this.paused = false;
this.showPlayStatus();
this.showTime();
playAudio(this.curAudio, now, () => {
this.ended = true;
this.showPlayStatus();
if (callback) {
callback();
}
});
}
/**
* 暂停播放音频
* @param reset 暂停是否重置:true-是,false-否
* @param callback
*/
pauseAudio(reset = false, callback = null) {
if (!this.paused) {
if (!this.curAudio) {
return;
}
pauseAudio(this.curAudio, reset);
this.paused = true;
this.showPlayStatus();
}
if (callback) {
callback();
}
}
getPlayingTime() {
if (!this.curAudio) {
return { totalTime: 0, curTime: 0 };
}
return { totalTime: this.curAudio.duration, curTime: this.curAudio.currentTime }
}
getTotalTime() {
if (!this.curAudio) {
return 0;
}
return this.curAudio.duration;
}
touchProBtn(mx: number) {
this.touchX = mx;
this.curX = this.progressBtn.x;
this.touched = true;
}
drag2(toX: number, callback = null) {
let dis = toX - this.touchX;
this.drag(dis, callback);
}
/**
* 滚动条拖动
* @param dis 拖动距离
* @param callback 拖动后执行函数
*/
drag(dis: number, callback = null) {
let newX = this.curX + dis;
if (newX < this.progressInitX) {
newX = this.progressInitX;
}
else if (newX > this.progressInitX + this.progressVal) {
newX = this.progressInitX + this.progressVal;
}
this.progressBtn.x = newX;
let distence = newX - this.progressInitX;
this.setTimeByPercent(distence / this.progressVal);
this.setPlayInfo(this.getPlayingTime());
if (callback) {
callback();
}
}
/**
* 根据百分设置当前播放时间
* @param percent 百分比
* @param play 是否立即播放
*/
setTimeByPercent(percent: number, play = false) {
if (!this.curAudio) {
return;
}
let curTime = 0
if (percent > 1) {
curTime = this.curAudio.duration;
}
else if (percent < 0) {
curTime = 0;
}
else {
curTime = percent * this.curAudio.duration;
}
this.setTime(curTime, play);
}
/**
* 设置播放时间
* @param time 当前播放时间
* @param play 是否立即播放
*/
setTime(time: number, play = false) {
if (!this.curAudio) {
return;
}
let curTime = 0
if (time > this.curAudio.duration) {
curTime = this.curAudio.duration;
}
else if (time < 0) {
curTime = 0;
}
else {
curTime = time;
}
this.curAudio.currentTime = curTime;
if (play) {
this.curAudio.play();
}
}
showPlayStatus() {
this.btnPlay.visible = !this.btnPlay.visible;
this.btnStop.visible = !this.btnPlay.visible;
}
showTime() {
if (this.ended || this.paused) {
return;
}
setTimeout(() => {
let playingTime = this.getPlayingTime();
this.setPlayInfo(playingTime);
this.showTime();
}, 100);
}
setPlayInfo(playingTime) {
this.progressBtn.x = this.progressInitX + playingTime.curTime / playingTime.totalTime * this.progressVal;
this.progress.width = this.progressVal * playingTime.curTime / playingTime.totalTime;
let time = this.getTimeStr(playingTime.curTime);
this.curTimeLabel.text = time;
}
private getTimeStr(time: number) {
if (!time) {
return "0:00";
}
let sec = Math.ceil(time % 60);
let timeStr = Math.floor(time / 60) + ":" + (sec < 10 ? "0" + sec : sec);
return timeStr;
}
}
/**
*
* @param audio 音频
* @param now true-重新开始播放,flase-继续播放
* @param callback
*/
export function playAudio(audio, now = false, callback = null) {
if (audio) {
if (now) {
audio.pause();
audio.currentTime = 0;
}
if (callback) {
audio.onended = () => {
callback();
};
}
audio.play();
}
}
/**
* 暂停播放音频
* @param audio 音频
* @param reset 暂停是否重置:true-是,false-否
* @param callback
*/
export function pauseAudio(audio, reset = false, callback = null) {
if (audio) {
if (reset) {
audio.currentTime = 0;
}
audio.pause();
if (callback) {
callback();
}
}
}
\ No newline at end of file
import { MySprite } from './Unit';
interface AirWindow extends Window {
air: any;
curCtx: any;
}
declare let window: AirWindow;
export class Item {
/**图片集合 */
images;
audioObj;
_scaleX = 1;
_scaleY = 1;
ctx;
_width = 0;
_height = 0;
_x = 0;
_y = 0;
constructor(images, audioObj, scaleX = 1, scaleY = 1, ctx = null) {
this.images = images;
this.audioObj = audioObj;
this._scaleX = scaleX;
this._scaleY = scaleY;
if (!ctx) {
this.ctx = window.curCtx;
} else {
this.ctx = ctx;
}
}
set width(width){
this._width = width * this.scaleX;
}
get width(){
return this._width;
}
set height(height){
this._height = height * this.scaleY;
}
get height(){
return this._height;
}
set scaleX(v) {
this._scaleX = v;
}
get scaleX() {
return this._scaleX;
}
set scaleY(v) {
this._scaleY = v;
}
get scaleY() {
return this._scaleY;
}
set x(x){
this._x = x;
}
get x(){
return this._x;
}
set y(y){
this._y = y;
}
get y(){
return this._y;
}
getPic(picName, anchorX: number = 0.5, anchorY: number = 0.5) {
const pic = new MySprite();
pic.init(this.images.get(picName), anchorX, anchorY);
pic.scaleX = this.scaleX;
pic.scaleY = this.scaleY;
pic.x = 0;
pic.y = 0;
return pic;
}
checkClickTarget(target, mx: number, my: number) {
const rect = target.getBoundingBox();
if (this.checkPointInRect(mx, my, rect)) {
return true;
}
return false;
}
checkPointInRect(x, y, rect) {
if (x >= rect.x && x <= rect.x + rect.width) {
if (y >= rect.y && y <= rect.y + rect.height) {
return true;
}
}
return false;
}
}
\ No newline at end of file
import { Item } from './Item';
import { ShapeRect, MySprite } from './Unit';
export class PageBar extends Item {
bg: ShapeRect;
lastBtn: MySprite;
nextBtn: MySprite;
data;
_pageSize = 4;
_totalSize = 0;
curPage = 0;
totalPage = 0;
showPageBtn = false;
set pageSize(pageSize: number) {
if (pageSize <= 0) {
pageSize = 1;
}
this._pageSize = pageSize;
this.show();
}
get pageSize() {
return this._pageSize;
}
set totalSize(totalSize){
this._totalSize = totalSize;
this.show();
}
get totalSize(){
return this._totalSize;
}
set x(x){
this._x = x;
if(this.bg){
this.bg.x = this._x;
}
}
set y(y){
this._y = y;
if(this.bg){
this.bg.y = this._y;
}
}
init(data, pageSize = 1) {
this.data = data;
this._pageSize = pageSize;
this.width = 100;
this.height = 40;
const bg = new ShapeRect();
bg.setSize(this.width, this.height);
bg.alpha = 0;
bg.x = this._x;
bg.y = this._y;
this.bg = bg;
const lastBtn = this.getPic('last', 0, 0);
lastBtn.x = 0;
lastBtn.y = 0;
lastBtn.alpha = 0;
this.lastBtn = lastBtn;
bg.addChild(lastBtn);
const nextBtn = this.getPic('next', 1, 0);
nextBtn.x = this.width;
nextBtn.y = lastBtn.y;
nextBtn.alpha = 0;
this.nextBtn = nextBtn;
bg.addChild(nextBtn);
}
show() {
if (this.pageSize <= 0) {
this.pageSize = 1;
}
if (this.data) {
this._totalSize = this.data.length;
}
else {
this._totalSize = 0;
}
this.totalPage = Math.ceil(this.data.length / this.pageSize);
}
private showBtn() {
if(this.showPageBtn && this.totalPage > 1){
this.lastBtn.alpha = 1;
this.nextBtn.alpha = 1;
}
else{
if (this.curPage > 1) {
this.lastBtn.alpha = 1;
}
else {
this.lastBtn.alpha = 0;
}
if (this.curPage < this.totalPage) {
this.nextBtn.alpha = 1;
}
else {
this.nextBtn.alpha = 0;
}
}
}
next(callback) {
this.curPage = this.curPage + 1;
if(this.curPage > this.totalPage){
this.curPage = this.totalPage;
}
let tempData = this.getData(this.curPage);
this.showBtn();
if (callback) {
callback(tempData);
}
}
last(callback) {
this.curPage = this.curPage - 1;
if(this.curPage <= 0){
if(this.totalPage === 0){
this.curPage = 0;
}
else{
this.curPage = 1;
}
}
let tempData = this.getData(this.curPage);
this.showBtn();
if (callback) {
callback(tempData);
}
}
private getData(pageNum : number){
if(this.totalPage === 0){
return [];
}
let _pageNum = pageNum;
if(_pageNum > this.totalPage){
_pageNum = this.totalPage;
}
let start = (_pageNum - 1) * this.pageSize;
let end = _pageNum * this.pageSize;
end = end > this.totalSize ? this.totalSize : end;
let tempData = [];
for(let i = start; i < end; ++ i){
tempData.push(this.data[i]);
}
return tempData;
}
}
export class CyclePageBar extends PageBar{
next(callback) {
this.curPage = this.curPage + 1;
if(this.curPage > this.totalPage){
this.curPage = 0;
}
super.next(callback)
}
last(callback) {
this.curPage = this.curPage - 1;
if(this.curPage <= 0){
this.curPage = this.totalPage;
}
super.last(callback);
}
}
\ No newline at end of file
import { Item } from './Item';
import { ShapeRect, MySprite } from './Unit';
export class Palette extends Item {
colorCardArr = [];
bg: ShapeRect;
init() {
const palettePic = this.getPic('palette');
palettePic.x = palettePic.getBoundingBox().width / 2;
palettePic.y = palettePic.getBoundingBox().height / 2;
const bg = new ShapeRect();
this.bg = bg;
bg.setSize(palettePic.getBoundingBox().width, palettePic.getBoundingBox().height);
bg.alpha = 0;
bg.addChild(palettePic);
//初始化颜色卡片
this.initColorCard();
}
private initColorCard() {
const colorCardBg = new ShapeRect();
colorCardBg.setSize(684 * this.scaleX, 76 * this.scaleY);
colorCardBg.alpha = 0;
colorCardBg.x = 12 * this.scaleX;
colorCardBg.y = 19 * this.scaleY;
this.bg.addChild(colorCardBg);
const initCard = (color, x: number, y: number) => {
const colorCard = new ColorCard(this.images, this.audioObj, this.scaleX, this.scaleY);
colorCard.init(color);
colorCard.bg.x = x * this.scaleX;
colorCard.bg.y = y * this.scaleY;
colorCardBg.addChild(colorCard.bg);
return colorCard;
};
let y = 6;
//红色
const red = initCard('red', 24, y);
red.color = '#f3440d';
red.code = '01';
this.colorCardArr.push(red);
//紫色
const purple = initCard('purple', 107, y);
purple.color = '#c80df3';
purple.code = '02';
this.colorCardArr.push(purple);
//绿色
const green = initCard('green', 189, y);
green.color = '#26eb45';
green.code = '03';
this.colorCardArr.push(green);
//蓝色
const blue = initCard('blue', 270, y);
blue.color = '#26eb45';
blue.code = '04';
this.colorCardArr.push(blue);
//桔色
const orange = initCard('orange', 352, y);
orange.color = '#ff9600';
orange.code = '05';
this.colorCardArr.push(orange);
//粉红色
const pink = initCard('pink', 433, y);
pink.color = '#ff6073';
pink.code ='06';
this.colorCardArr.push(pink);
//天蓝色
const skyBlue = initCard('skyBlue', 515, y);
skyBlue.color = '#07d6ff';
skyBlue.code = '07'
this.colorCardArr.push(skyBlue);
//粉紫色
const purplePink = initCard('purplePink', 596, y);
purplePink.color = '#ff07ff';
purplePink.code = '08';
this.colorCardArr.push(purplePink);
}
}
export class ColorCard extends Item {
bg: ShapeRect;
lightPic: MySprite;
touched = false;
_color : string;
_code : string;
set color(color){
this._color = color;
}
get color(){
return this._color;
}
set code(code){
this._code = code;
}
get code(){
return this._code;
}
init(picName) {
const bg = new ShapeRect();
bg.setSize(66 * this.scaleX, 64 * this.scaleY);
bg.alpha = 0;
this.bg = bg;
const getPic = (par: ShapeRect, picName) => {
const pic = new MySprite();
pic.init(this.images.get(picName));
pic.scaleX = this.scaleX;
pic.scaleY = this.scaleY;
pic.x = par.width / 2;
pic.y = par.height / 2;
return pic;
};
const colorCardLight = getPic(bg, 'light');
colorCardLight.alpha = 0;
this.lightPic = colorCardLight;
bg.addChild(colorCardLight);
const colorCardPic = getPic(bg, picName);
bg.addChild(colorCardPic);
}
click(callback = null) {
this.touched = true;
this.lightPic.alpha = 1;
if (callback) {
callback();
}
}
touch(callback = null) {
this.touched = true;
this.lightPic.alpha = 1;
if (callback) {
callback();
}
}
moveout(callback = null) {
this.touched = false;
this.lightPic.alpha = 0;
if (callback) {
callback();
}
}
}
\ No newline at end of file
import {
MySprite,
moveItem,
removeItemFromArr,
rotateItem
} from './Unit';
export class Petal {
renderArr = [];
images;
ctx;
playing = true;
tempRenderArr = [];
constructor(renderArr, images, ctx) {
this.renderArr = renderArr;
this.images = images;
this.ctx = ctx;
this.tempRenderArr = [];
}
stop(callback = null) {
this.playing = false;
const checkFinish = () => {
if (this.tempRenderArr.length == 0) {
if (callback) {
callback();
}
}
else {
setTimeout(() => {
checkFinish();
}, 100);
}
}
checkFinish();
}
/**
* 显示结束花瓣
* @param rect {x,y,width, height} 花瓣显示位置及大小
* @param mapScale
* @param timeout 花瓣显示间隔
* @param kinds 花瓣种类,即花瓣图片样式数组个数
*/
showPetal(rect, mapScale: number, timeout: number, kinds = 9) {
if (!this.playing) {
return;
}
const petal = this.getPetal(rect, mapScale, kinds);
this.renderArr.push(petal);
this.tempRenderArr.push(petal);
let toY = rect.y + rect.height;
moveItem(petal, petal.x, toY + petal.height * petal.scaleY, petal['time'], () => {
removeItemFromArr(this.renderArr, petal);
removeItemFromArr(this.tempRenderArr, petal);
});
rotateItem(petal, petal['tr'], petal['time']);
setTimeout(() => {
this.showPetal(rect, mapScale, timeout);
}, timeout);
}
/**
* 得到花瓣
* @param rect
* @param mapScale
* @param kinds
*/
private getPetal(rect, mapScale, kinds) {
const petal = new MySprite(this.ctx);
const id = Math.ceil(Math.random() * kinds);
petal.init(this.images.get('petal_' + id));
const randomS = (Math.random() * 0.4 + 0.6) * mapScale;
petal.setScaleXY(randomS);
const randomR = Math.random() * 360;
petal.rotation = randomR;
const randomX = rect.x + Math.random() * rect.width;
petal.x = randomX;
petal.y = rect.y - petal.height / 2 * petal.scaleY;
const randomT = 0.5 + Math.random() * 2;
petal['time'] = randomT;
let randomTR = 360 * Math.random(); // - 180;
if (Math.random() < 0.5) { randomTR *= -1; }
petal['tr'] = randomTR;
return petal;
}
}
\ No newline at end of file
import { Item } from './Item';
import { ShapeRect, MySprite, shake } from './Unit';
import { playAudio } from './AudioUtil';
import { Star } from './StarUtil'
import { PageBar, CyclePageBar } from './PageBar';
export class Stage extends Item {
bg: ShapeRect;
data;
spacing = 27;
cardArr = [];
pageBar: PageBar;
tempCardArr = [];
set x(x) {
this._x = x;
if (this.bg) {
this.bg.x = this._x;
}
}
set y(y) {
this._y = y;
if (this.bg) {
this.bg.y = this._y;
}
}
set width(width) {
this._width = width;
if (this.bg) {
this.bg.width = this._width;
}
}
get width() {
return this._width;
}
init(data) {
this.data = data;
this.spacing = this.spacing * this.scaleX;
this.height = 296;
const bg = new ShapeRect();
bg.setSize(this.width, this.height);
bg.alpha = 0;
bg.x = this.x;
bg.y = this.y;
this.bg = bg;
this.initCard();
this.initPageBar();
this.showNextPage();
}
showLastPage(callback = null) {
this.pageBar.last((data) => {
this.showCard(data, callback);
});
}
showNextPage(callback = null) {
this.pageBar.next((data) => {
this.showCard(data, callback);
});
}
isEnd(){
let ended = true;
for(let i = 0; i < this.cardArr.length; ++ i){
let card = this.cardArr[i];
if(!card.answered){
ended = false;
break;
}
}
return ended;
}
private initCard() {
for (let i = 0; i < this.data.picArr.length; ++i) {
let picInfo = this.data.picArr[i];
const card = new Card(this.images, this.audioObj, this.scaleX, this.scaleY);
card.init(picInfo);
this.cardArr.push(card);
}
}
private initPageBar() {
const pageBar = new PageBar(this.images, this.audioObj, this.scaleX, this.scaleY);
pageBar.showPageBtn = true;
pageBar.init(this.cardArr, 4);
pageBar.show();
this.pageBar = pageBar;
this.pageBar.x = (this.bg.width - this.pageBar.bg.width) / 2;
this.pageBar.y = this.bg.height + 5 * this.scaleY;
this.bg.addChild(pageBar.bg);
}
private showCard(cardArr = [], callback = null) {
let width = 0;
let cardWidth = 276 * this.scaleX;
if (this.tempCardArr) {
for (let i = 0; i < this.tempCardArr.length; ++i) {
this.bg.removeChild(this.tempCardArr[i].bg);
}
}
this.tempCardArr = cardArr;
if (cardArr.length > 0) {
width = cardArr.length * cardWidth + (cardArr.length - 1) * this.spacing;
}
let disW = cardWidth + this.spacing;
let x = (this.width - width) / 2;
for (let i = 0; i < cardArr.length; ++i) {
let card = cardArr[i];
card.y = 0;
card.x = x + i * disW;
this.bg.addChild(card.bg);
}
if (callback) {
callback();
}
}
}
export class Card extends Item {
bg: ShapeRect;
picInfo;
answered = false;
cardLight: MySprite;
cardBox: MySprite;
set x(x) {
this._x = x;
if (this.bg) {
this.bg.x = this._x;
}
}
set y(y) {
this._y = y;
if (this.bg) {
this.bg.y = this._y;
}
}
init(picInfo) {
this.picInfo = picInfo;
this.width = 276;
this.height = 296;
const bg = new ShapeRect();
bg.setSize(this._width, this._height);
bg.alpha = 0;
bg.x = this.x;
bg.y = this.y;
this.bg = bg;
const cardBox = this.getPic('card_box');
cardBox.x = bg.width / 2;
cardBox.y = bg.height / 2;
bg.addChild(cardBox, 1);
this.cardBox = cardBox;
const cardLight = this.getPic('card_light');
cardLight.x = bg.width / 2 + 3 * this.scaleX;
cardLight.y = bg.height / 2 + 3 * this.scaleY;
cardLight.alpha = 0;
bg.addChild(cardLight, 3);
this.cardLight = cardLight;
this.initPic();
}
private initPic() {
const setScale = (pW, pH, child) => {
let width = child.width;
let height = child.height;
let sx = pW / width;
let sy = pH / height;
let scale = Math.min(sx, sy);
if (scale < 1) {
child.setScaleXY(scale);
}
}
const pic = this.getPic(this.picInfo.picUrl);
pic.x = this.bg.width / 2;
pic.y = this.bg.height / 2;
setScale(this.bg.width - 45 * this.scaleX, this.bg.height - 45 * this.scaleY, pic);
this.bg.addChild(pic, 2);
}
click(callback = null) {
if (this.answered) {
return;
}
this.cardLight.alpha = 1;
if (callback) {
callback();
}
}
hideLight(){
this.cardLight.alpha = 0;
}
fillColor(color){
this.cardBox.color = color;
}
checkRight(colorCode, color, callback = null, errCallback = null) {
if (!colorCode) {
this.showErr(errCallback);
return false;
}
if (colorCode === this.picInfo.color) {
this.showRight(color, callback);
return true;
}
else {
this.showErr(errCallback);
return false;
}
}
private showErr(callback = null) {
this.cardLight.alpha = 0;
playAudio(this.audioObj['wrong']);
shake(this.bg, 5, callback);
}
private showRight(color, callback = null) {
this.answered = true;
playAudio(this.audioObj['star']);
this.cardBox.color = color;
this.cardLight.alpha = 0;
if(callback){
callback();
}
}
}
\ No newline at end of file
import {
MySprite,
moveItem,
removeItemFromArr,
rotateItem,
hideItem
} from './Unit';
export class Star {
renderArr = [];
images;
ctx;
playing = true;
tempRenderArr = [];
constructor(renderArr, images, ctx) {
this.renderArr = renderArr;
this.images = images;
this.ctx = ctx;
this.tempRenderArr = [];
}
/**
* 显示小星星
* @param rect
* @param mapScale
* @param showTime 每个星星显示时间
* @param timeout 显示频率
* @param number 显示个数
*/
showStar(rect, mapScale: number, showTime = 2, timeout = 500, number = 10) {
if (!this.playing) {
return;
}
const star = this.getStar(rect, mapScale);
this.renderArr.push(star);
this.tempRenderArr.push(star);
hideItem(star, showTime, () => {
removeItemFromArr(this.renderArr, star);
removeItemFromArr(this.tempRenderArr, star);
});
rotateItem(star, star['tr'], star['time']);
setTimeout(() => {
if (this.tempRenderArr.length < number) {
this.showStar(rect, mapScale);
}
}, timeout);
}
stop(callback = null) {
this.playing = false;
const checkFinish = () => {
if (this.tempRenderArr.length == 0) {
if (callback) {
callback();
}
}
else {
setTimeout(() => {
checkFinish();
}, 100);
}
}
checkFinish();
}
/**
* 得到星星
* @param rect
* @param mapScale
*/
private getStar(rect, mapScale) {
//console.log('show star:', rect);
const star = new MySprite(this.ctx);
star.init(this.images.get('icon_star'));
const randomS = (Math.random() * 0.4 + 0.6) * mapScale;
star.setScaleXY(randomS);
const randomR = Math.random() * 360;
star.rotation = randomR;
const randomX = rect.x + Math.random() * rect.width;
star.x = randomX;
star.y = rect.y + Math.random() * rect.width;
const randomT = 0.5 + Math.random() * 2;
star['time'] = randomT;
let randomTR = 360 * Math.random(); // - 180;
if (Math.random() < 0.5) { randomTR *= -1; }
star['tr'] = randomTR;
return star;
}
}
\ No newline at end of file
import { Item } from './Item';
import { Course } from '../form/Course';
import { ShapeRect, MySprite, RichText } from './Unit';
import { AudioComponent } from './AudioUtil';
export class Title extends Item {
private _data;
bg: ShapeRect;
audio: AudioComponent;
set data(data) {
this._data = data;
}
get data() {
return this._data;
}
init(data) {
this._data = data;
if (!this._data) {
this._data = new Course();
this._data.type = '01';
}
this.initBg();
}
private initBg() {
const bg = new ShapeRect();
bg.alpha = 0;
this.bg = bg;
if (this._data.type === '01') {
this.initText();
}
else if (this._data.type === '02') {
this.initAudio();
}
else {
this.initPic();
}
}
private initAudio() {
let width = 528 * this.scaleX;
let height = 121 * this.scaleY;
this.bg.setSize(width, height);
const audio = new AudioComponent(this.images, this.audioObj, this.scaleX, this.scaleY);
audio.init(width, height);
audio.bg.x = 0;
audio.bg.y = 0;
this.audio = audio;
this.audio.setAudio(this.audioObj[this._data.audioUrl]);
this.bg.addChild(audio.bg);
}
private initPic() {
let width = 777 * this.scaleX;
let height = 158 * this.scaleY;
this.bg.setSize(width, height);
const picBg = new MySprite();
picBg.init(this.images.get('pic_bg'), 0, 0);
picBg.scaleX = this.scaleX;
picBg.scaleY = this.scaleY;
picBg.x = 0;
picBg.y = 0;
this.bg.addChild(picBg);
const picBg2 = new ShapeRect();
picBg2.setSize(748 * this.scaleX, 115 * this.scaleY);
picBg2.alpha = 0;
picBg2.x = (this.bg.width - picBg2.width) / 2;
picBg2.y = 33 * this.scaleY;
this.bg.addChild(picBg2);
const setScale = (pW, pH, child) => {
let width = child.width;
let height = child.height;
let sx = pW / width;
let sy = pH / height;
let scale = Math.min(sx, sy);
if (scale < 1) {
child.setScaleXY(scale);
}
}
const getPic = (par: ShapeRect, picUrl) => {
const pic = new MySprite();
pic.init(this.images.get(picUrl));
pic.x = par.width / 2;
pic.y = par.height / 2;
setScale(par.width, par.height, pic);
return pic;
};
const pic = getPic(picBg2, this.data.picUrl);
picBg2.addChild(pic);
}
private initText() {
let width = 730 * this.scaleX;
let height = 150 * this.scaleY;
this.bg.setSize(width, height);
const textBg = new MySprite();
textBg.init(this.images.get('text_bg'), 0, 0);
textBg.scaleX = this.scaleX;
textBg.scaleY = this.scaleY;
textBg.x = 0;
textBg.y = 0;
this.bg.addChild(textBg);
const textBg2 = new ShapeRect();
textBg2.setSize(707 * this.scaleX, 106 * this.scaleY);
textBg2.alpha = 0;
textBg2.x = (this.bg.width - textBg2.width) / 2;
textBg2.y = 31 * this.scaleY;
this.bg.addChild(textBg2);
let text = new RichText();
text.text = this.data.text;
text.fontColor = "#c57500";
text.fontSize = 34;
text.fontName = "BRLNSDB";
text.disH = 0;
text.textAlign = 'middle';
text.scaleX = this.scaleX;
text.scaleY = this.scaleY;
text.width = textBg2.width - 36 * this.scaleX;
text.refreshSize();
text.x = 18 * this.scaleX;
text.y = textBg2.height / 2;
textBg2.addChild(text);
}
}
\ No newline at end of file
......@@ -766,7 +766,55 @@ export class RichText extends Label {
// this.dataArr = dataArr;
}
refreshSize() {
this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
const selfW = this.width;
const chr = this.text.split(' ');
let temp = '';
const row = [];
const w = selfW;
let maxWidth = 0;
const getMaxWidth = (text, maxWidth) => {
let width = this.ctx.measureText(text).width * this.scaleX;
if(maxWidth < width){
return width;
}
else{
return maxWidth;
}
};
for (const c of chr) {
if (this.ctx.measureText(temp).width * this.scaleX < w && this.ctx.measureText(temp + (c)).width * this.scaleX <= w) {
temp += ' ' + c;
maxWidth = getMaxWidth(temp, maxWidth);
} else {
maxWidth = getMaxWidth(temp, maxWidth);
row.push(temp);
temp = ' ' + c;
}
}
if (temp != ' ') {
row.push(temp);
}
this._height = this.fontSize * row.length + (row.length - 1) * this.disH;
this._width = maxWidth;
this.ctx.restore();
}
drawText() {
......@@ -777,55 +825,50 @@ export class RichText extends Label {
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.textBaseline = 'bottom';
this.ctx.fontWeight = this.fontWeight;
this.ctx.fillStyle = this.fontColor;
const selfW = this.width * this.scaleX;
const selfW = this.width;
const chr = this.text.split(' ');
let temp = '';
const row = [];
const w = selfW - 80;
const disH = (this.fontSize + this.disH) * this.scaleY;
const w = selfW;
const disH = (this.fontSize + this.disH);
for (const c of chr) {
if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (c)).width <= w) {
if (this.ctx.measureText(temp).width * this.scaleX < w && this.ctx.measureText(temp + (c)).width * this.scaleX <= w) {
temp += ' ' + c;
} else {
row.push(temp);
temp = ' ' + c;
}
}
if (temp != ' ') {
row.push(temp);
}
const x = 0;
const y = -row.length * disH / 2;
// for (let b = 0 ; b < row.length; b++) {
// this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
// }
if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth;
this.ctx.strokeStyle = this._outLineColor;
for (let b = 0 ; b < row.length; b++) {
this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
for (let b = 0; b < row.length; b++) {
this.ctx.strokeText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
}
// this.ctx.strokeText(this.text, 0, 0);
}
// this.ctx.fillStyle = '#ff7600';
for (let b = 0 ; b < row.length; b++) {
this.ctx.fillText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
for (let b = 0; b < row.length; b++) {
this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
}
}
......
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener } from '@angular/core';
import {
Label,
MySprite, tweenChange,
MySprite, tweenChange, showPopParticle,
} from './Unit';
import {res, resAudio} from './resources';
import { res, resAudio } from './resources';
import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
import { Title } from './Title';
import { Palette } from './Palette';
import { Stage } from './Stage';
import { Star } from './StarUtil'
import { Petal } from './PetalUtil';
......@@ -22,8 +26,8 @@ import TWEEN from '@tweenjs/tween.js';
})
export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef;
@ViewChild('canvas', { static: true }) canvas: ElementRef;
@ViewChild('wrap', { static: true }) wrap: ElementRef;
// 数据
data;
......@@ -52,22 +56,27 @@ export class PlayComponent implements OnInit, OnDestroy {
audioObj = {};
renderArr;
starRenderArr = [];
endRenderArr = [];
mapScale = 1;
canvasLeft;
canvasTop;
saveKey = 'test_0011';
saveKey = 'PU-17';
canTouch = false;
btnLeft;
btnRight;
pic1;
pic2;
title: Title;
canTouch = true;
palette: Palette;
curPic;
stage: Stage;
curCard;
@HostListener('window:resize', ['$event'])
onResize(event) {
......@@ -80,13 +89,13 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {};
// 获取数据
const getData = (<any> window).courseware.getData;
const getData = (<any>window).courseware.getData;
getData((data) => {
if (data && typeof data == 'object') {
this.data = data;
}
// console.log('data:' , data);
console.log('data:', data);
// 初始化 各事件监听
this.initListener();
......@@ -413,8 +422,10 @@ export class PlayComponent implements OnInit, OnDestroy {
}
addUrlToImages(url) {
if (url) {
this.rawImages.set(url, url);
}
}
......@@ -432,10 +443,7 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initDefaultData() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
}
}
......@@ -444,8 +452,13 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initImg() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
this.addUrlToImages(this.data.picUrl);
if (this.data.picArr) {
for (let i = 0; i < this.data.picArr.length; ++i) {
this.addUrlToImages(this.data.picArr[i].picUrl);
}
}
}
......@@ -454,13 +467,25 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initAudio() {
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
// 音效
this.addUrlToAudioObj('into', this.rawAudios.get('into'));
// 音效
this.addUrlToAudioObj('star', this.rawAudios.get('star'));
// 音效
this.addUrlToAudioObj('win', this.rawAudios.get('win'));
// 音效
this.addUrlToAudioObj('wrong', this.rawAudios.get('wrong'));
if (this.data.type == '02' && this.data.audioUrl) {
this.addUrlToAudioObj(this.data.audioUrl);
}
}
......@@ -475,14 +500,12 @@ export class PlayComponent implements OnInit, OnDestroy {
const s = Math.min(sx, sy);
this.mapScale = s;
// this.mapScale = sx;
// this.mapScale = sy;
this.renderArr = [];
this.starRenderArr = [];
this.endRenderArr = [];
}
......@@ -492,167 +515,293 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initView() {
this.initBg();
this.initPic();
this.initBottomPart();
}
initBottomPart() {
const btnLeft = new MySprite();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.setScaleXY(this.mapScale);
this.renderArr.push(btnLeft);
this.btnLeft = btnLeft;
this.initPeople();
this.initSky();
this.initPic();
const btnRight = new MySprite();
btnRight.init(this.images.get('btn_right'));
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
this.canTouch = true;
}
this.renderArr.push(btnRight);
initBg() {
this.btnRight = btnRight;
const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.max(sx, sy);
const bg = new MySprite();
bg.init(this.images.get('bg'));
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
bg.setScaleXY(s);
this.renderArr.push(bg);
const bgGrass = new MySprite();
bgGrass.init(this.images.get('bg_grass'));
bgGrass.scaleX = sx;
bgGrass.scaleY = sy;
bgGrass.x = this.canvasWidth / 2;
bgGrass.y = this.canvasHeight - bgGrass.getBoundingBox().height / 2;
this.renderArr.push(bgGrass);
const flower = new MySprite();
flower.init(this.images.get('flower'), 0, 1);
flower.x = this.canvasWidth / 2 - 628 * this.mapScale;
flower.y = this.canvasHeight - 13 * this.mapScale;
flower.setScaleXY(this.mapScale);
this.renderArr.push(flower);
const grass = new MySprite();
grass.init(this.images.get('grass'), 0, 1);
grass.x = this.canvasWidth / 2 + 318 * this.mapScale;
grass.y = this.canvasHeight - 13 * this.mapScale;
grass.setScaleXY(this.mapScale);
this.renderArr.push(grass);
const stone = new MySprite();
stone.init(this.images.get('stone'), 0, 1);
stone.x = this.canvasWidth / 2 + 524 * this.mapScale;
stone.y = this.canvasHeight - 33 * this.mapScale;
stone.setScaleXY(this.mapScale);
this.renderArr.push(stone);
}
initPeople() {
const people1 = new MySprite();
people1.init(this.images.get('people_1'), 0, 1);
people1.x = this.canvasWidth / 2 - 556 * this.mapScale;
people1.y = this.canvasHeight;
people1.setScaleXY(this.mapScale);
this.renderArr.push(people1);
const people2 = new MySprite();
people2.init(this.images.get('people_2'), 0, 1);
people2.x = this.canvasWidth / 2 + 380 * this.mapScale;
people2.y = this.canvasHeight - 22 * this.mapScale;
people2.setScaleXY(this.mapScale);
this.renderArr.push(people2);
}
initSky() {
const cloud1 = new MySprite();
cloud1.init(this.images.get('cloud1'), 0, 0);
cloud1.x = this.canvasWidth / 2 + 530 * this.mapScale;
cloud1.y = 57 * this.mapScale;
cloud1.setScaleXY(this.mapScale);
this.renderArr.push(cloud1);
const cloud2 = new MySprite();
cloud2.init(this.images.get('cloud2'), 0, 0);
cloud2.x = this.canvasWidth / 2 - 556 * this.mapScale;
cloud2.y = 37 * this.mapScale;
cloud2.setScaleXY(this.mapScale);
this.renderArr.push(cloud2);
}
initPic() {
const maxW = this.canvasWidth * 0.7;
const pic1 = new MySprite();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
let title = new Title(this.images, this.audioObj, this.mapScale, this.mapScale);
title.init(this.data);
title.bg.y = 0;
this.title = title;
if (this.data.type === '01') {
title.bg.x = this.canvasWidth / 2 - 409 * this.mapScale;
}
else if (this.data.type === '02') {
title.bg.x = this.canvasWidth / 2 - 264 * this.mapScale;
}
else {
title.bg.x = this.canvasWidth / 2 - 451 * this.mapScale;
}
this.renderArr.push(title.bg);
this.renderArr.push(pic1);
this.pic1 = pic1;
let palette = new Palette(this.images, this.audioObj, this.mapScale, this.mapScale);
this.palette = palette;
palette.init();
palette.bg.x = (this.canvasWidth - palette.bg.width) / 2;
palette.bg.y = this.canvasHeight - palette.bg.height;
this.renderArr.push(palette.bg);
const stage = new Stage(this.images, this.audioObj, this.mapScale, this.mapScale);
stage.width = this.canvasWidth;
stage.init(this.data);
stage.x = (this.canvasWidth - stage.width) / 2;
stage.y = (this.canvasHeight - stage.height) / 2;
this.stage = stage;
this.renderArr.push(stage.bg);
}
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1);
const pic2 = new MySprite();
pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
this.renderArr.push(pic2);
this.pic2 = pic2;
mapDown(event) {
this.curPic = pic1;
if (!this.canTouch) {
return;
}
let audio = this.title.audio;
btnLeftClicked() {
this.lastPage();
if (audio) {
if (this.checkClickTarget(audio.btnPlay) && audio.btnPlay.visible) {
audio.playAudio();
return;
}
btnRightClicked() {
this.nextPage();
if (this.checkClickTarget(audio.btnStop) && audio.btnStop.visible) {
audio.pauseAudio();
return;
}
lastPage() {
if (this.curPic == this.pic1) {
if (this.checkClickTarget(audio.progressBtn)) {
audio.touchProBtn(this.mx);
return;
}
}
let pageBar = this.stage.pageBar;
if (pageBar) {
if (this.checkClickTarget(pageBar.nextBtn)) {
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.stage.showNextPage(() => {
this.canTouch = true;
this.curPic = this.pic1;
});
}
nextPage() {
if (this.curPic == this.pic2) {
return;
}
if (this.checkClickTarget(pageBar.lastBtn)) {
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
this.stage.showLastPage(() => {
this.canTouch = true;
this.curPic = this.pic2;
});
return;
}
}
pic1Clicked() {
this.playAudio(this.data.audio_url);
for (let i = 0; i < this.stage.tempCardArr.length; ++i) {
let card = this.stage.tempCardArr[i];
if (this.checkClickTarget(card.bg)) {
//隐藏光效
if (this.curCard) {
this.curCard.hideLight();
}
this.curCard = null;
card.click(() => {
this.curCard = card;
});
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
return;
}
}
for (let i = 0; i < this.palette.colorCardArr.length; ++i) {
let colorCard = this.palette.colorCardArr[i];
if (this.checkClickTarget(colorCard.bg)) {
if (this.curCard) {
this.canTouch = false;
this.curCard.checkRight(colorCard.code, colorCard.color, () => {
mapDown(event) {
if (!this.canTouch) {
return;
const star = new Star(this.starRenderArr, this.images, this.ctx);
star.showStar(this.curCard.bg.getBoundingBox(), this.mapScale, 1, 200, 20);
setTimeout(() => {
star.stop();
this.canTouch = true;
if (this.stage.isEnd()) {
this.canTouch = false;
this.showEnd();
}
}, 4000);
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
return;
}, () => {
this.canTouch = true;
})
}
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
return;
}
}
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
mapMove(event) {
if (!this.canTouch) {
return;
}
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
return;
let audio = this.title.audio;
if (audio && audio.touched) {
audio.drag2(this.mx);
}
let touchedColorCard = false;
for (let i = 0; i < this.palette.colorCardArr.length; ++i) {
let colorCard = this.palette.colorCardArr[i];
if (this.checkClickTarget(colorCard.bg)) {
touchedColorCard = true;
colorCard.touch(() => {
if (this.curCard) {
this.curCard.fillColor(colorCard.color);
}
});
}
else {
colorCard.moveout(() => {
mapMove(event) {
});
}
}
if (touchedColorCard) {
return;
}
}
mapUp(event) {
let audio = this.title.audio;
if (audio && audio.touched) {
this.title.audio.touched = false;
return;
}
for (let i = 0; i < this.palette.colorCardArr.length; ++i) {
let colorCard = this.palette.colorCardArr[i];
if (this.checkClickTarget(colorCard.bg)) {
colorCard.moveout(() => {
});
return;
}
}
}
......@@ -671,9 +820,19 @@ export class PlayComponent implements OnInit, OnDestroy {
this.updateArr(this.renderArr);
this.updateArr(this.starRenderArr);
this.updateArr(this.endRenderArr);
}
showEnd() {
this.playAudio('win');
let petal = new Petal(this.endRenderArr, this.images, this.ctx);
//显示花瓣
petal.showPetal({ x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight }, this.mapScale, 100);
}
}
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"],
['bg', "assets/play/bg.png"],
['bg_grass', "assets/play/bg_grass.png"],
['bg_grass', "assets/play/bg_grass.png"],
['grass', "assets/play/grass.png"],
['stone', "assets/play/stone.png"],
['flower', "assets/play/flower.png"],
['people_1', "assets/play/people_1.png"],
['people_2', "assets/play/people_2.png"],
['cloud1', "assets/play/cloud1.png"],
['cloud2', "assets/play/cloud2.png"],
['bg_audio', "assets/play/bg_audio.png"],
['bg_audio_progress_bar', "assets/play/bg_audio_progress_bar.png"],
['btn_audio_off', "assets/play/btn_audio_off.png"],
['btn_audio_on', "assets/play/btn_audio_on.png"],
['processBtn', "assets/play/processBtn.png"],
['auto_cover', "assets/play/auto_cover.png"],
['pic_bg', "assets/play/pic_bg.png"],
['text_bg', "assets/play/text_bg.png"],
['last', "assets/play/last.png"],
['next', "assets/play/next.png"],
['palette', "assets/play/palette/palette.png"],
['light', "assets/play/palette/light.png"],
['blue', "assets/play/palette/blue.png"],
['green', "assets/play/palette/green.png"],
['orange', "assets/play/palette/orange.png"],
['pink', "assets/play/palette/pink.png"],
['purple', "assets/play/palette/purple.png"],
['red', "assets/play/palette/red.png"],
['purplePink', "assets/play/palette/purplePink.png"],
['skyBlue', "assets/play/palette/skyBlue.png"],
['card_box', "assets/play/card_box.png"],
['card_light', "assets/play/card_light.png"],
['icon_star', "assets/play/star.png"],
['petal_1', "assets/play/petal_1.png"],
['petal_2', "assets/play/petal_2.png"],
['petal_3', "assets/play/petal_3.png"],
['petal_4', "assets/play/petal_4.png"],
['petal_5', "assets/play/petal_5.png"],
['petal_6', "assets/play/petal_6.png"],
['petal_7', "assets/play/petal_7.png"],
['petal_8', "assets/play/petal_8.png"],
['petal_9', "assets/play/petal_9.png"]
];
......@@ -12,7 +57,10 @@ const res = [
const resAudio = [
['click', "assets/play/music/click.mp3"],
['into', "assets/play/music/into.mp3"],
['star', "assets/play/music/star.wav"],
['win', "assets/play/music/win.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
];
export {res, resAudio};
export { res, resAudio };
src/assets/play/text_bg.png

293 Bytes | W: | H:

src/assets/play/text_bg.png

17.1 KB | W: | H:

src/assets/play/text_bg.png
src/assets/play/text_bg.png
src/assets/play/text_bg.png
src/assets/play/text_bg.png
  • 2-up
  • Swipe
  • Onion skin
This source diff could not be displayed because it is too large. You can view the blob instead.
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