Commit 1b53952f authored by 范雪寒's avatar 范雪寒

feat: 准备工作ok

parent 2d05e701
This diff is collapsed.
This diff is collapsed.
<div class="p-image-children-editor"> <div class="p-image-children-editor">
<h5 style="margin-left: 2.5%;"> preview: </h5> <h5 style="margin-left: 2.5%;"> preview: </h5>
<div class="preview-box" #wrap> <div class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
</div> </div>
<div nz-row nzType="flex" nzAlign="middle"> <div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1"> <div nz-col nzSpan="5" nzOffset="1">
...@@ -20,41 +17,53 @@ ...@@ -20,41 +17,53 @@
(imageUploaded)="onBackgroundUploadSuccess($event)"> (imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview> </app-upload-image-with-preview>
</div> </div>
</div> </div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index">
<div
style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px">
<span style="margin-left: 40%;"> item-{{i + 1}}
</span>
<button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
X
</button>
<div nz-col nzSpan="5" nzOffset="1" class="img-box" <nz-divider style="margin-top: 10px;"></nz-divider>
*ngFor="let it of hotZoneArr; let i = index" >
<div style=" height: 40px;">
<h5> item-{{i+1}}
<i style="margin-left: 20px; margin-top: 2px; float: right; cursor:pointer" (click)="deleteItem($event, i)"
nz-icon [nzTheme]="'twotone'" [nzType]="'close-circle'" [nzTwotoneColor]="'#ff0000'"></i>
</h5>
</div>
<div style="margin-top: -20px; margin-bottom: 5px">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)">
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
</nz-radio-group>
</div>
<!--<div class="img-box-upload">--> <div *ngIf="it.itemType == 'pic'">
<!--<app-upload-image-with-preview--> <app-upload-image-with-preview
<!--[picUrl]="it.pic_url"--> [picUrl]="it?.pic_url"
<!--(imageUploaded)="onImgUploadSuccessByImg($event, it)">--> (imageUploaded)="onItemImgUploadSuccess($event, it)">
<!--</app-upload-image-with-preview>--> </app-upload-image-with-preview>
<!--</div>--> </div>
<div *ngIf="it.itemType == 'text'">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
<!--<app-audio-recorder--> <div style="width: 100%; margin-top: 5px;">
<!--[audioUrl]="it.audio_url ? it.audio_url : null "--> <app-audio-recorder
<!--(audioUploaded)="onAudioUploadSuccessByImg($event, it)"--> [audioUrl]="it.audio_url"
<!--&gt;</app-audio-recorder>--> (audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
</div>
</div> </div>
<div nz-col nzSpan="5" nzOffset="1"> <div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box"> <div class="bg-box">
...@@ -75,7 +84,7 @@ ...@@ -75,7 +84,7 @@
<div class="save-box"> <div class="save-box">
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round" <button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()"> (click)="saveClick()" >
<i nz-icon nzType="save"></i> <i nz-icon nzType="save"></i>
Save Save
</button> </button>
...@@ -83,7 +92,9 @@ ...@@ -83,7 +92,9 @@
</div> </div>
</div> </div>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
...@@ -87,6 +87,13 @@ h5 { ...@@ -87,6 +87,13 @@ h5 {
@font-face
{
font-family: 'BRLNSR_1';
src: url("/assets/font/BRLNSR_1.TTF") ;
}
......
<div class="model-content"> <div class="model-content">
<app-custom-hot-zone
[bgItem]="item.bgItem"
[hotZoneItemArr]="item.hotZoneItemArr"
(save)="saveData($event)"
>
</app-custom-hot-zone>
<!--
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
...@@ -19,7 +26,6 @@ ...@@ -19,7 +26,6 @@
<app-upload-video></app-upload-video> <app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config> <app-lesson-title-config></app-lesson-title-config>
</div> </div>
-->
</div> </div>
\ No newline at end of file
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core'; import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
...@@ -15,17 +15,20 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -15,17 +15,20 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item; item;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
} }
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {
bgItem: '',
hotZoneItemArr: []
};
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any>window).courseware.getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
...@@ -60,8 +63,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -60,8 +63,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
*/ */
onImageUploadSuccess(e, key) { onImageUploadSuccess(e, key) {
this.item[key] = e.url; this.item[key] = e.url;
this.save(); this.save();
} }
/** /**
...@@ -74,13 +77,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -74,13 +77,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save(); this.save();
} }
saveData(e) {
this.save();
}
/** /**
* 储存数据 * 储存数据
*/ */
save() { save() {
(<any> window).courseware.setData(this.item, null, this.saveKey); (<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh(); this.refresh();
} }
......
export let defaultData = {
tittle: {
word: "C",
text: "listen and select the right word you just heard.",
audio: "tittle"
},
carrots: [{
carrotImg: '',
holeImg: '',
}],
targets: [{
img: '',
x: 0,
y: 0,
width: 1,
height: 1,
scaleX: 1,
scaleY: 1,
audio: ''
}]
};
\ No newline at end of file
This diff is collapsed.
import {
Game,
TouchSprite,
RandomInt,
MyLabel,
blinkItem,
stopBlinkItem,
asyncDelayTime,
asyncTweenChange,
} from './Game';
import {
Label,
jelly,
showPopParticle,
tweenChange,
rotateItem,
scaleItem,
delayCall,
hideItem,
showItem,
moveItem,
shake,
ShapeRect,
} from './../Unit';
import TWEEN from '@tweenjs/tween.js';
import { defaultData } from './DefaultData';
export class MyGame extends Game {
images = null;
data = null;
status = null;
initData(data) {
this.images = data.images;
this.status = {};
if (!data.data || Object.is(data.data, {}) || !data.data.tittle) {
this.data = defaultData;
} else {
this.data = data.data;
let imgUrlList = [];
let audioUrlList = [];
// this.data.audios.forEach((cube) => {
// audioUrlList.push(cube);
// });
// audioUrlList.push(this.data.wholeAuido);
// audioUrlList.push(this.data.tittle.audio);
this.preLoadData(imgUrlList, audioUrlList);
}
}
preLoadData(imgUrlList, audioUrlList) {
for (var i = 0; i < imgUrlList.length; ++i) {
this._parent.addUrlToImages(imgUrlList[i]);
}
for (var i = 0; i < audioUrlList.length; ++i) {
this._parent.addUrlToAudioObj(audioUrlList[i]);
}
}
initView() {
// 初始化背景
this.initBg();
// 初始化标题
this.initTittle();
// 初始化中间部分
this.initMiddle();
// 游戏开始
this.gameStart();
}
bg = null;
initBg() {
this.removeChild(this.getChildByName('bg'));
this.getFullScaleXY();
let screenSize = this.getScreenSize();
let defaultSize = this.getDefaultScreenSize();
let bgSized = new TouchSprite();
bgSized.init(this.images.get('Img_bg'));
bgSized.anchorX = 0.5;
bgSized.anchorY = 1;
bgSized.setPosition(this._parent.canvasWidth / 2, this._parent.canvasHeight);
bgSized.setScaleXY(this.getFullScaleXY());
this.addChild(bgSized);
// 背景
let bg = new TouchSprite();
bg.init(this.images.get('Img_bg'))
bg.setPosition(this._parent.canvasWidth / 2, this._parent.canvasHeight / 2);
bg.setScaleXY(this._parent.mapScale);
bg.alpha = 0.5;
bg.setName('bg');
this.addChild(bg);
this.bg = bg;
const bgRect = new ShapeRect();
bgRect.setSize(57, 65);
bgRect.fillColor = '#f8c224';
const sx = this._parent.canvasWidth / this._parent.canvasBaseW;
bgRect.setScaleXY(sx);
bgRect.x = 65 * sx;
bgRect.alpha = 0;
this._parent.renderArr.push(bgRect);
this.bgRect = bgRect;
}
bgRect = null;
getTittleBlockPositionX() {
return this.bgRect.x + 28.5 * this.bgRect.scaleX;
}
initTittle() {
// 标题字母背景
let tittleWordBg = new TouchSprite();
tittleWordBg.init(this.images.get('Img_tittleBg'));
tittleWordBg.setScaleXY(this._parent.mapScale);
tittleWordBg.setPosition(this.getTittleBlockPositionX(), 31 * this._parent.mapScale);
this.addChild(tittleWordBg);
// 标题字母
let tittleWord = new MyLabel();
tittleWord.fontSize = 48;
tittleWord.fontName = 'BerlinSansFBDemi-Bold';
tittleWord.fontColor = '#ab5b22';
tittleWord.text = this.data.tittle.word;
tittleWord.anchorX = 0.5;
tittleWord.anchorY = 0.5;
tittleWord.setPosition(0, 0);
tittleWordBg.addChild(tittleWord);
tittleWord.refreshSize();
// 标题文字
let questionLabel = new MyLabel();
questionLabel.fontSize = 36;
questionLabel.fontName = 'FuturaBT-Bold';
questionLabel.fontColor = '#000000';
questionLabel.text = this.data.tittle.text;
questionLabel.anchorX = 0;
questionLabel.anchorY = 0.5;
questionLabel.setPosition(50, 0);
questionLabel.addTouchBeganListener(() => {
this.onClickTittle();
});
tittleWordBg.addChild(questionLabel);
questionLabel.refreshSize();
}
initMiddle() {
// // 创建背景
// this.createMiddlebg();
// // 创建单词
// this.createWords();
// // 创建右下角的喇叭
// this.createSpeaker();
// // 创建窗口
// this.createWindow();
}
printCurrentStatus() {
console.log(JSON.stringify(this.status));
}
onClickTittle() {
this._parent.playAudio(this.data.tittle.audio);
}
gameStart() {
this.playIncomeAudio();
}
playIncomeAudio() {
this._parent.playAudio('audio_new_page');
}
}
...@@ -12,6 +12,7 @@ import {debounceTime} from 'rxjs/operators'; ...@@ -12,6 +12,7 @@ import {debounceTime} from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import {MyGame} from "./game/MyGame";
...@@ -57,7 +58,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,7 +58,7 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'ym-2-30';
btnLeft; btnLeft;
...@@ -69,6 +70,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -69,6 +70,8 @@ export class PlayComponent implements OnInit, OnDestroy {
curPic; curPic;
game;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
...@@ -86,7 +89,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -86,7 +89,13 @@ export class PlayComponent implements OnInit, OnDestroy {
if (data && typeof data == 'object') { if (data && typeof data == 'object') {
this.data = data; this.data = data;
} }
// console.log('data:' , data);
this.game = new MyGame(this);
this.game.initData({
images: this.images,
data: this.data,
});
// 初始化 各事件监听 // 初始化 各事件监听
this.initListener(); this.initListener();
...@@ -432,10 +441,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -432,10 +441,10 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initDefaultData() { initDefaultData() {
if (!this.data.pic_url) { // if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg'; // this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg'; // this.data.pic_url_2 = 'assets/play/default/pic.jpg';
} // }
} }
...@@ -444,8 +453,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -444,8 +453,8 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initImg() { initImg() {
this.addUrlToImages(this.data.pic_url); // this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2); // this.addUrlToImages(this.data.pic_url_2);
} }
...@@ -455,11 +464,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -455,11 +464,15 @@ export class PlayComponent implements OnInit, OnDestroy {
initAudio() { initAudio() {
// 音频资源 // 音频资源
this.addUrlToAudioObj(this.data.audio_url); // this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2); // this.addUrlToAudioObj(this.data.audio_url_2);
// 音效 for (let item of this.rawAudios) {
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); if (item[0] != item[1]) {
// 音效
this.addUrlToAudioObj(item[0], this.rawAudios.get(item[0]), 0.3);
}
}
} }
...@@ -491,88 +504,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -491,88 +504,7 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化试图 * 初始化试图
*/ */
initView() { initView() {
this.game.initView();
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;
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.renderArr.push(btnRight);
this.btnRight = btnRight;
}
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);
this.renderArr.push(pic1);
this.pic1 = pic1;
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;
this.curPic = pic1;
}
btnLeftClicked() {
this.lastPage();
}
btnRightClicked() {
this.nextPage();
} }
lastPage() { lastPage() {
...@@ -620,39 +552,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -620,39 +552,15 @@ export class PlayComponent implements OnInit, OnDestroy {
mapDown(event) { mapDown(event) {
this.game._onTouchBegan({x:this.mx,y:this.my});
if (!this.canTouch) {
return;
}
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
return;
}
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
return;
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return;
}
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
return;
}
} }
mapMove(event) { mapMove(event) {
this.game._onTouchMove({x:this.mx,y:this.my});
} }
mapUp(event) { mapUp(event) {
this.game._onTouchEnd({x:this.mx,y:this.my});
} }
......
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
"extends": "./tsconfig.json", "extends": "./tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "./out-tsc/app", "outDir": "./out-tsc/app",
"types": [] "types": [
"node"
]
}, },
"files": [ "files": [
"src/main.ts", "src/main.ts",
......
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