Commit e4ce7880 authored by 李维's avatar 李维

dev commit

parent 8a51c964
<div class="model-content"> <div class="model-content">
<div style="padding: 20px">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <div>
<!--<h2>组:</h2>-->
<h3> 泡泡: </h3>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <div *ngFor="let it of item.picArr; let i = index" style="padding: 10px; border: 1px solid #ccc; border-radius: 10px; width: 520px; margin-bottom: 20px">
<app-upload-image-with-preview <div style=" display: flex; align-items: center;">
[picUrl]="item.pic_url" <div style="width: 200px; margin-right: 10px; display: flex; justify-content: center; flex-direction: column">
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" <h4>组-{{i+1}}: </h4>
></app-upload-image-with-preview> <input type="text" nz-input [(ngModel)]="it.text" (blur)="save()">
<app-audio-recorder
style="margin-top: 5px"
[audioUrl]="it.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url', it)"
></app-audio-recorder>
<button style="width: 150px; margin-top: 5px" nz-button nzType="danger" (click)="deletePic(i)">
删除
</button>
</div>
<div style="width: 260px">
<app-upload-image-with-preview
[picUrl]="it.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url', it)"
></app-upload-image-with-preview>
</div>
</div>
</div>
</div>
<app-audio-recorder <div *ngIf="item.picArr.length < 14">
[audioUrl]="item.audio_url" <button style="width: 180px; height: 70px;" nz-button nzType="dashed" (click)="addPic()">
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
></app-audio-recorder> 添加组
<app-custom-hot-zone></app-custom-hot-zone> </button>
<app-upload-video></app-upload-video> </div>
<app-lesson-title-config></app-lesson-title-config>
<div style="width: 700px">
<nz-divider></nz-divider>
</div>
<div>
<h3> 格子: </h3>
<div style="margin-top: 10px">
<!--<span> 宽: </span>-->
<!--<nz-input-number [(ngModel)]="item.logicX" [nzMin]="2" [nzMax]="10" [nzStep]="1" (nzBlur)="gridSizeSave()"></nz-input-number>-->
<!--<span style="margin-left: 10px"> 高: </span>-->
<!--<nz-input-number [(ngModel)]="item.logicY" [nzMin]="2" [nzMax]="10" [nzStep]="1" (nzBlur)="gridSizeSave()"></nz-input-number>-->
</div>
<div style="margin-top: 10px; display: flex">
<div *ngFor="let oneRow of item.grid; let x = index" >
<div *ngFor="let oneGrid of oneRow; let y = index" style="padding: 2px;">
<input style="width: 38px" [maxLength]="1" type="text" nz-input [(ngModel)]="oneGrid.text" (blur)="save()" >
</div>
</div>
</div>
</div>
</div> </div>
<!--<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')"-->
<!--&gt;</app-upload-image-with-preview>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="item.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"-->
<!--&gt;</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>-->
<!--</div>-->
</div> </div>
\ No newline at end of file
...@@ -10,7 +10,7 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,7 +10,7 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_0011"; saveKey = "Datakey_LST03";
// 储存对象 // 储存对象
item; item;
...@@ -30,6 +30,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -30,6 +30,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
if (data) { if (data) {
this.item = data; this.item = data;
} }
console.log('data:', data);
this.init(); this.init();
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
...@@ -50,7 +51,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -50,7 +51,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
if (!this.item.logicX) {
this.item.logicX = 10;
}
if (!this.item.logicY) {
this.item.logicY = 10;
}
if (!this.item.picArr) {
this.item.picArr = [];
}
this.gridSizeSave();
} }
...@@ -58,9 +68,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -58,9 +68,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据 * 储存图片数据
* @param e * @param e
*/ */
onImageUploadSuccess(e, key) { onImageUploadSuccess(e, key, item = null) {
if (item == null) {
this.item[key] = e.url; item = this.item;
}
item[key] = e.url;
this.save(); this.save();
} }
...@@ -68,9 +80,63 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -68,9 +80,63 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据 * 储存音频数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key) { onAudioUploadSuccess(e, key, item = null) {
if (item == null) {
item = this.item;
}
item[key] = e.url;
this.save();
}
addPic() {
console.log(' in add Pic');
if (!this.item.picArr) {
this.item.picArr = [];
}
this.item.picArr.push(
{
text: '',
audio_url: '',
pic_url: ''
}
)
this.save();
}
deletePic(index) {
this.item.picArr.splice(index, 1);
this.save();
}
gridSizeSave() {
console.log(' in gridSizeSave')
if (!this.item.grid) {
this.item.grid = [];
}
const w = Number(this.item.logicX);
const h = Number(this.item.logicY);
this.item.grid.length = w;
for (let i = 0; i < w; i ++) {
if (!this.item.grid[i]) {
this.item.grid[i] = [];
}
this.item.grid[i].length = h;
for (let j = 0; j < h; j++) {
if (!this.item.grid[i][j]) {
this.item.grid[i][j] = {};
}
}
}
this.item[key] = e.url;
this.save(); this.save();
} }
......
...@@ -4,6 +4,7 @@ import TWEEN from '@tweenjs/tween.js'; ...@@ -4,6 +4,7 @@ import TWEEN from '@tweenjs/tween.js';
interface AirWindow extends Window { interface AirWindow extends Window {
air: any; air: any;
curCtx: any; curCtx: any;
curImages: any;
} }
declare let window: AirWindow; declare let window: AirWindow;
...@@ -36,7 +37,6 @@ class Sprite { ...@@ -36,7 +37,6 @@ class Sprite {
export class MySprite extends Sprite { export class MySprite extends Sprite {
_width = 0; _width = 0;
...@@ -69,6 +69,16 @@ export class MySprite extends Sprite { ...@@ -69,6 +69,16 @@ export class MySprite extends Sprite {
img; img;
_z = 0; _z = 0;
_showRect;
_bitmapFlag = false;
_offCanvas;
_offCtx;
isCircleStyle = false; // 切成圆形
parent;
_maskSpr;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) { init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
...@@ -79,7 +89,6 @@ export class MySprite extends Sprite { ...@@ -79,7 +89,6 @@ export class MySprite extends Sprite {
this.width = this.img.width; this.width = this.img.width;
this.height = this.img.height; this.height = this.img.height;
} }
this.anchorX = anchorX; this.anchorX = anchorX;
...@@ -87,8 +96,11 @@ export class MySprite extends Sprite { ...@@ -87,8 +96,11 @@ export class MySprite extends Sprite {
} }
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') { setShowRect(rect) {
this._showRect = rect;
}
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
this._shadowFlag = true; this._shadowFlag = true;
this._shadowColor = color; this._shadowColor = color;
...@@ -102,6 +114,19 @@ export class MySprite extends Sprite { ...@@ -102,6 +114,19 @@ export class MySprite extends Sprite {
this._radius = r; this._radius = r;
} }
setMaskSpr(spr) {
this._maskSpr = spr;
this._createOffCtx();
}
_createOffCtx() {
if (!this._offCtx) {
this._offCanvas = document.createElement('canvas'); // 创建一个新的canvas
this.width = this._offCanvas.width = this.width; // 创建一个正好包裹住一个粒子canvas
this.height = this._offCanvas.height = this.height;
this._offCtx = this._offCanvas.getContext('2d');
}
}
update($event = null) { update($event = null) {
if (!this.visible && this.childDepandVisible) { if (!this.visible && this.childDepandVisible) {
...@@ -137,7 +162,22 @@ export class MySprite extends Sprite { ...@@ -137,7 +162,22 @@ export class MySprite extends Sprite {
this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0); this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
}
drawSelf() {
if (this._shadowFlag) {
this.ctx.shadowOffsetX = this._shadowOffsetX;
this.ctx.shadowOffsetY = this._shadowOffsetY;
this.ctx.shadowBlur = this._shadowBlur;
this.ctx.shadowColor = this._shadowColor;
} else {
this.ctx.shadowOffsetX = 0;
this.ctx.shadowOffsetY = 0;
this.ctx.shadowBlur = null;
this.ctx.shadowColor = null;
}
if (this._radius) { if (this._radius) {
...@@ -146,45 +186,68 @@ export class MySprite extends Sprite { ...@@ -146,45 +186,68 @@ export class MySprite extends Sprite {
const w = this.width; const w = this.width;
const h = this.height; const h = this.height;
this.ctx.lineTo(-w / 2, h / 2); // 创建水平线 this.ctx.beginPath()
this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r); this._roundRect(-w / 2, - h / 2, w, h, r * 1 || 0);
this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r); this.ctx.clip();
this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r); }
this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
if (this.isCircleStyle) {
this.ctx.beginPath()
this.ctx.arc(0, 0, Math.max(this.width, this.height) / 2, 0, Math.PI * 2, false); // 圆形
this.ctx.clip(); this.ctx.clip();
} }
}
drawSelf() {
if (this.img) {
if (this._showRect) {
const rect = this._showRect;
this.ctx.drawImage(this.img, rect.x, rect.y, rect.width, rect.height, this._offX + rect.x, this._offY + rect.y, rect.width, rect.height);
} else {
if (this._offCtx) {
this._offScreenRender();
} else {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
}
}
}
if (this._shadowFlag) { _offScreenRender() {
this.ctx.shadowOffsetX = this._shadowOffsetX; this._offCtx.save();
this.ctx.shadowOffsetY = this._shadowOffsetY;
this.ctx.shadowBlur = this._shadowBlur;
this.ctx.shadowColor = this._shadowColor;
} else {
this.ctx.shadowOffsetX = 0;
this.ctx.shadowOffsetY = 0;
this.ctx.shadowBlur = null;
this.ctx.shadowColor = null;
}
this._offCtx.clearRect(0, 0, this.width, this.height);
if (this.img) { this._offCtx.drawImage(this.img, 0, 0);
this.ctx.drawImage(this.img, this._offX, this._offY); if (this._maskSpr) {
this._offCtx.globalCompositeOperation = 'destination-in';
this._offCtx.drawImage(this._maskSpr.img, this._maskSpr.x + this._maskSpr._offX - this._offX , this._maskSpr.y + this._maskSpr._offY - this._offY);
} }
this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
this._offCtx.restore();
}
_roundRect(x, y, w, h, r) {
const min_size = Math.min(w, h);
if (r > min_size / 2) r = min_size / 2;
// 开始绘制
const ctx = this.ctx;
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
ctx.closePath();
} }
updateChildren() {
updateChildren() {
if (this.children.length <= 0) { return; } if (this.children.length <= 0) { return; }
...@@ -257,6 +320,13 @@ export class MySprite extends Sprite { ...@@ -257,6 +320,13 @@ export class MySprite extends Sprite {
} }
} }
set bitmapFlag(v) {
this._bitmapFlag = v;
}
get bitmapFlag() {
return this._bitmapFlag;
}
set alpha(v) { set alpha(v) {
this._alpha = v; this._alpha = v;
if (this.childDepandAlpha) { if (this.childDepandAlpha) {
...@@ -305,7 +375,6 @@ export class MySprite extends Sprite { ...@@ -305,7 +375,6 @@ export class MySprite extends Sprite {
getBoundingBox() { getBoundingBox() {
const getParentData = (item) => { const getParentData = (item) => {
let px = item.x; let px = item.x;
...@@ -343,11 +412,6 @@ export class MySprite extends Sprite { ...@@ -343,11 +412,6 @@ export class MySprite extends Sprite {
const width = this.width * Math.abs(data.sx); const width = this.width * Math.abs(data.sx);
const height = this.height * Math.abs(data.sy); const height = this.height * Math.abs(data.sy);
// const x = this.x + this._offX * Math.abs(this.scaleX);
// const y = this.y + this._offY * Math.abs(this.scaleY);
// const width = this.width * Math.abs(this.scaleX);
// const height = this.height * Math.abs(this.scaleY);
return {x, y, width, height}; return {x, y, width, height};
} }
...@@ -758,7 +822,8 @@ export class RichTextOld extends Label { ...@@ -758,7 +822,8 @@ export class RichTextOld extends Label {
export class RichText extends Label { export class RichText extends Label {
disH = 30; disH = 30;
offW = 10;
constructor(ctx?: any) { constructor(ctx?: any) {
super(ctx); super(ctx);
...@@ -788,7 +853,7 @@ export class RichText extends Label { ...@@ -788,7 +853,7 @@ export class RichText extends Label {
const chr = this.text.split(' '); const chr = this.text.split(' ');
let temp = ''; let temp = '';
const row = []; const row = [];
const w = selfW - 80; const w = selfW - this.offW * 2;
const disH = (this.fontSize + this.disH) * this.scaleY; const disH = (this.fontSize + this.disH) * this.scaleY;
...@@ -964,28 +1029,28 @@ export class ShapeRectNew extends MySprite { ...@@ -964,28 +1029,28 @@ export class ShapeRectNew extends MySprite {
ctx.save(); ctx.save();
ctx.beginPath(0); ctx.beginPath(0);
// 从右下角顺时针绘制,弧度从0到1/2PI // 从右下角顺时针绘制,弧度从0到1/2PI
ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2); ctx.arc(width - radius + this._offX, height - radius + this._offY, radius, 0, Math.PI / 2);
// 矩形下边线 // 矩形下边线
ctx.lineTo(radius, height); ctx.lineTo(radius + this._offX, height + this._offY);
// 左下角圆弧,弧度从1/2PI到PI // 左下角圆弧,弧度从1/2PI到PI
ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); ctx.arc(radius + this._offX, height - radius + this._offY, radius, Math.PI / 2, Math.PI);
// 矩形左边线 // 矩形左边线
ctx.lineTo(0, radius); ctx.lineTo(0 + this._offX, radius + this._offY);
// 左上角圆弧,弧度从PI到3/2PI // 左上角圆弧,弧度从PI到3/2PI
ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2); ctx.arc(radius + this._offX, radius + this._offY, radius, Math.PI, Math.PI * 3 / 2);
// 上边线 // 上边线
ctx.lineTo(width - radius, 0); ctx.lineTo(width - radius + this._offX, 0 + this._offY);
// 右上角圆弧 // 右上角圆弧
ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2); ctx.arc(width - radius + this._offX, radius + this._offY, radius, Math.PI * 3 / 2, Math.PI * 2);
// 右边线 // 右边线
ctx.lineTo(width, height - radius); ctx.lineTo(width + this._offX, height - radius + this._offY);
ctx.closePath(); ctx.closePath();
if (this.fill) { if (this.fill) {
...@@ -1020,7 +1085,7 @@ export class MyAnimation extends MySprite { ...@@ -1020,7 +1085,7 @@ export class MyAnimation extends MySprite {
loop = false; loop = false;
playEndFunc; playEndFunc;
delayPerUnit = 1; delayPerUnit = 0.07;
restartFlag = false; restartFlag = false;
reverseFlag = false; reverseFlag = false;
...@@ -1109,8 +1174,9 @@ export class MyAnimation extends MySprite { ...@@ -1109,8 +1174,9 @@ export class MyAnimation extends MySprite {
this.frameArr[this.frameIndex].visible = true; this.frameArr[this.frameIndex].visible = true;
if (this.playEndFunc) { if (this.playEndFunc) {
this.playEndFunc(); const func = this.playEndFunc;
this.playEndFunc = null; this.playEndFunc = null;
func();
} }
} }
...@@ -1177,6 +1243,14 @@ export class MyAnimation extends MySprite { ...@@ -1177,6 +1243,14 @@ export class MyAnimation extends MySprite {
export function tweenChange(item, obj, time = 0.8, callBack = null, easing = null, update = null) { export function tweenChange(item, obj, time = 0.8, callBack = null, easing = null, update = null) {
const tween = createTween(item, obj, time, callBack, easing, update)
tween.start();
return tween;
}
export function createTween(item, obj, time = 0.8, callBack = null, easing = null, update = null) {
const tween = new TWEEN.Tween(item).to(obj, time * 1000); const tween = new TWEEN.Tween(item).to(obj, time * 1000);
if (callBack) { if (callBack) {
...@@ -1192,15 +1266,28 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul ...@@ -1192,15 +1266,28 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
update(a, b); update(a, b);
}); });
} }
tween.start();
return tween; return tween;
} }
export function tweenQueue(arr) {
const showOneTween = () => {
const tween = arr.shift();
if (arr.length > 0) {
tween.onComplete( () => {
showOneTween();
});
}
tween.start();
};
showOneTween();
}
export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null) { export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null, loop = false) {
const tween = new TWEEN.Tween(item).to({ rotation }, time * 1000); const tween = new TWEEN.Tween(item).to({ rotation }, time * 1000);
...@@ -1208,7 +1295,14 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = ...@@ -1208,7 +1295,14 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing =
tween.onComplete(() => { tween.onComplete(() => {
callBack(); callBack();
}); });
} else if (loop) {
const speed = (rotation - item.rotation) / time;
tween.onComplete(() => {
item.rotation %= 360;
rotateItem(item, item.rotation + speed * time, time, null, easing, true);
});
} }
if (easing) { if (easing) {
tween.easing(easing); tween.easing(easing);
} }
...@@ -1491,7 +1585,7 @@ export function getPosDistance(sx, sy, ex, ey) { ...@@ -1491,7 +1585,7 @@ export function getPosDistance(sx, sy, ex, ey) {
return len; return len;
} }
export function delayCall(callback, second) { export function delayCall(second, callback) {
const tween = new TWEEN.Tween(this) const tween = new TWEEN.Tween(this)
.delay(second * 1000) .delay(second * 1000)
.onComplete(() => { .onComplete(() => {
...@@ -1525,10 +1619,15 @@ export function formatTime(fmt, date) { ...@@ -1525,10 +1619,15 @@ export function formatTime(fmt, date) {
return fmt; return fmt;
} }
export function getMinScale(item, maxLen) { export function getMinScale(item, maxW, maxH = null) {
const sx = maxLen / item.width; if (!maxH) {
const sy = maxLen / item.height; maxH = maxW;
}
const sx = maxW / item.width;
const sy = maxH / item.height;
const minS = Math.min(sx, sy); const minS = Math.min(sx, sy);
return minS; return minS;
} }
...@@ -1571,6 +1670,46 @@ export function jelly(item, time = 0.7) { ...@@ -1571,6 +1670,46 @@ export function jelly(item, time = 0.7) {
run(); run();
} }
export function jellyPop(item, time) {
if (item.jellyTween) {
TWEEN.remove(item.jellyTween);
}
const t = time / 6;
const baseSX = item.scaleX;
const baseSY = item.scaleY;
let index = 0;
const run = () => {
if (index >= arr.length) {
item.jellyTween = null;
return;
}
const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t;
};
const arr = [
[baseSX * 1.3, baseSY * 1.3, t],
[baseSX * 0.85, baseSY * 0.85, t * 1],
[baseSX * 1.1, baseSY * 1.1, t * 1],
[baseSX * 0.95, baseSY * 0.95, t * 1],
[baseSX * 1.02, baseSY * 1.02, t * 1],
[baseSX * 1, baseSY * 1, t * 1],
];
item.setScaleXY(0);
run();
}
export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) { export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
...@@ -1672,5 +1811,41 @@ export function shake(item, time = 0.5, callback = null, rate = 1) { ...@@ -1672,5 +1811,41 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
} }
export function getMaxScale(item, maxW, maxH) {
const sx = maxW / item.width;
const sy = maxH / item.height;
const maxS = Math.max(sx, sy);
return maxS;
}
export function createSprite(key) {
const image = window.curImages;
const spr = new MySprite();
spr.init(image.get(key));
return spr;
}
export class MyVideo extends MySprite {
element;
initVideoElement(videoElement) {
this.element = videoElement;
this.width = this.element.videoWidth;
this.height = this.element.videoHeight;
this.element.currentTime = 0.01;
}
drawSelf() {
super.drawSelf();
this.ctx.drawImage(this.element, 0, 0, this.width, this.height);
}
}
// --------------- custom class -------------------- // --------------- custom class --------------------
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
@font-face @font-face
{ {
font-family: 'BRLNSDB'; font-family: 'MMTextBook-Bold';
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/MMTextBook-Bold.otf") ;
} }
<div class="game-container" #wrap> <div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
</div> </div>
<label style="position: absolute; top: 0px; opacity: 0; font-family: 'MMTextBook-Bold'">1</label>
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, createSprite, createTween, delayCall, getAngleByPos, getMaxScale, getMinScale, getPosDistance,
MySprite, tweenChange, Label, moveItem, MyAnimation,
MySprite, removeItemFromArr, rotateItem, scaleItem, ShapeRect, ShapeRectNew, tweenChange, tweenQueue,
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import {res, resAudio} from './resources';
...@@ -57,17 +58,32 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,17 +58,32 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'Datakey_LST03';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true; canTouch = true;
curPic; curPic;
private bubblePos: any;
private bgRight: MySprite;
private letterBg: MySprite;
private gridBg: any;
private gridObj: {};
private curStrip: ShapeRectNew;
private startGrid: any;
private endGrid: any;
private bubbleArr: any[];
private startBtn: MySprite;
private curBubble: any;
private curGridSprArr: any[];
private stoneLayer: MySprite;
private petalTime: number;
private showPetalFlag: boolean;
private endPageArr: any;
private starTime: number;
private popLayer: any;
private bg: MySprite;
private restartBtn: MySprite;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
...@@ -86,7 +102,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -86,7 +102,9 @@ 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); console.log('data:' , data);
console.log('data:', JSON.stringify(data));
// 初始化 各事件监听 // 初始化 各事件监听
this.initListener(); this.initListener();
...@@ -141,6 +159,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -141,6 +159,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.canvas.nativeElement.height = this.canvasHeight; this.canvas.nativeElement.height = this.canvasHeight;
window['curCtx'] = this.ctx; window['curCtx'] = this.ctx;
window['curImages'] = this.images;
} }
...@@ -270,7 +289,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -270,7 +289,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
playAudio(key, now = false, callback = null) { playAudio(key, now = true, callback = null) {
const audio = this.audioObj[key]; const audio = this.audioObj[key];
if (audio) { if (audio) {
...@@ -293,24 +312,20 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -293,24 +312,20 @@ export class PlayComponent implements OnInit, OnDestroy {
loadResources() { loadResources() {
const pr = []; const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片 this.rawImages.forEach((value, key) => {// 预加载图片
const p = this.preload(value) const p = this.preload(value)
.then(img => { .then(img => {
this.images.set(key, img); this.images.set(key, img);
}) })
.catch(err => console.log(err)); .catch(err => console.log(err));
pr.push(p); pr.push(p);
}); });
this.rawAudios.forEach((value, key) => {// 预加载音频 this.rawAudios.forEach((value, key) => {// 预加载音频
const a = this.preloadAudio(value) const a = this.preloadAudio(value)
.then(() => { .then(() => {
// this.images.set(key, img); // this.images.set(key, img);
}) })
.catch(err => console.log(err)); .catch(err => console.log(err));
pr.push(a); pr.push(a);
}); });
return Promise.all(pr); return Promise.all(pr);
...@@ -432,9 +447,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -432,9 +447,9 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initDefaultData() { initDefaultData() {
if (!this.data.pic_url) { if (!this.data.grid) {
this.data.pic_url = 'assets/play/default/pic.jpg'; const strData = '{"logicX":10,"logicY":10,"grid":[[{},{},{},{},{},{},{},{},{},{}],[{},{},{},{},{},{},{},{},{},{}],[{},{},{},{"text":"a"},{"text":"a"},{},{},{},{},{}],[{},{},{},{"text":"b"},{"text":"p"},{},{},{},{},{}],[{},{},{},{"text":"c"},{"text":"p"},{"text":"d"},{},{},{},{}],[{},{},{},{},{"text":"l"},{"text":"e"},{},{},{},{}],[{},{},{},{},{"text":"e"},{"text":"f"},{},{},{},{}],[{},{},{},{},{},{},{},{},{},{}],[{},{},{},{},{},{},{},{},{},{}],[{},{},{},{},{},{},{},{},{},{}]],"picArr":[{"text":"apple","audio_url":"assets/play/default/apple.mp3","pic_url":"assets/play/default/apple.png"}]}'
this.data.pic_url_2 = 'assets/play/default/pic.jpg'; this.data = JSON.parse(strData);
} }
} }
...@@ -444,8 +459,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -444,8 +459,11 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initImg() { initImg() {
this.addUrlToImages(this.data.pic_url); for (let i = 0; i < this.data.picArr.length; i++) {
this.addUrlToImages(this.data.pic_url_2); this.addUrlToImages(this.data.picArr[i].pic_url);
}
// this.addUrlToImages(this.data.pic_url);
// this.addUrlToImages(this.data.pic_url_2);
} }
...@@ -456,11 +474,21 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -456,11 +474,21 @@ export class PlayComponent implements OnInit, OnDestroy {
// 音频资源 // 音频资源
this.addUrlToAudioObj(this.data.audio_url); this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
for (let i = 0; i < this.data.picArr.length; i++) {
this.addUrlToAudioObj(this.data.picArr[i].audio_url);
}
// 音效 // 音效
this.addUrlToAudioObj('apple', this.rawAudios.get('apple'), 0.3);
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
this.addUrlToAudioObj('btn', this.rawAudios.get('btn'), 0.3);
this.addUrlToAudioObj('finish', this.rawAudios.get('finish'), 0.3);
this.addUrlToAudioObj('right', this.rawAudios.get('right'), 0.3);
this.addUrlToAudioObj('star', this.rawAudios.get('star'), 0.3);
this.addUrlToAudioObj('stone', this.rawAudios.get('stone'), 0.1);
this.addUrlToAudioObj('wrong', this.rawAudios.get('wrong'), 0.3);
this.addUrlToAudioObj('open_door', this.rawAudios.get('open_door'), 0.3);
} }
...@@ -492,188 +520,835 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -492,188 +520,835 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initView() { initView() {
this.initBg();
this.initPic(); this.initBubble();
this.initBottomPart(); this.initGrid();
// this.initPopAnima();
} }
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; mapDown(event) {
if (!this.canTouch) {
return;
}
if (this.curStrip) {
this.cleanCurStrip();
return false;
}
if (this.letterBg.visible) {
if (this.startBtn.visible && this.checkClickTarget(this.startBtn)) {
this.clickedStartBtn();
return;
}
return;
}
if (this.restartBtn) {
if (this.checkClickTarget(this.restartBtn)) {
this.clickedRestartBtn();
}
return;
}
const btnRight = new MySprite(); for (let i = 0; i < this.bubbleArr.length; i++) {
btnRight.init(this.images.get('btn_right')); if (!this.bubbleArr[i].isCheckEnd && this.checkClickTarget(this.bubbleArr[i])) {
btnRight.x = this.canvasWidth - 50 * this.mapScale; this.clickedBubble(this.bubbleArr[i]);
btnRight.y = this.canvasHeight - 100 * this.mapScale; return;
btnRight.setScaleXY(this.mapScale); }
}
this.renderArr.push(btnRight); if (!this.curBubble) {
return;
}
this.btnRight = btnRight; for (let x in this.gridObj) {
for (let y in this.gridObj[x]) {
if (this.checkClickTarget(this.gridObj[x][y])) {
this.clickedGrid(this.gridObj[x][y]);
return;
}
}
}
} }
initPic() { mapMove(event) {
if (!this.curStrip) {
return;
}
const maxW = this.canvasWidth * 0.7; for (let x in this.gridObj) {
for (let y in this.gridObj[x]) {
if (this.checkClickTarget(this.gridObj[x][y])) {
if (this.gridObj[x][y] != this.startGrid) {
this.refreshCurStrip(this.gridObj[x][y]);
return;
}
}
}
}
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); mapUp(event) {
this.pic1 = pic1; if (this.curStrip) {
this.checkIsWord();
this.cleanCurStrip();
}
}
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1); update() {
// ----------------------------------------------------------
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// tween 更新动画
TWEEN.update();
// ----------------------------------------------------------
this.updateArr(this.renderArr);
this.updateArr(this.endPageArr);
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; private initBg() {
const bg = createSprite('bg');
bg.setScaleXY(getMinScale(bg, this.canvasWidth, this.canvasHeight));
bg.scaleX = this.canvasWidth / bg.width;
bg.scaleY = this.canvasHeight / bg.height;
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
this.renderArr.push(bg);
this.bg = bg;
const tree = createSprite('bg_tree');
tree.setScaleXY(this.mapScale);
tree.x = 10 * this.mapScale
tree.y = 10 * this.mapScale
this.renderArr.push(tree);
this.popLayer = createSprite('');
this.renderArr.push(this.popLayer);
const bgRight = createSprite('bg_right');
bgRight.scaleX = 700 * this.mapScale / bgRight.width
bgRight.scaleY = 700 * this.mapScale / bgRight.height
// bgRight.setScaleXY(this.mapScale);
bgRight.x = this.canvasWidth - (30 + 700 / 2) * this.mapScale;
bgRight.y = (15 + 700 / 2) * this.mapScale;
this.bgRight = bgRight;
this.renderArr.push(bgRight);
const letterBg = createSprite('letter_bg');
letterBg.x = 11.8 ;
letterBg.y = -0.8 ;
letterBg.setScaleXY(1.02)
bgRight.addChild(letterBg, -1);
this.letterBg = letterBg;
letterBg['baseX'] = letterBg.x;
letterBg['baseY'] = letterBg.y;
const maskSpr = createSprite('letter_bg');
// maskSpr.y = 200;
letterBg.setMaskSpr(maskSpr);
letterBg['maskSpr'] = maskSpr;
const startBtn = createSprite('start_btn');
letterBg.addChild(startBtn);
startBtn.setMaskSpr(maskSpr);
this.startBtn = startBtn;
// const bgWave = createSprite('bg_wave');
// bgWave.scaleX = bg.scaleX;
// bgWave.scaleY = bg.scaleY;
// bgWave.x = this.canvasWidth / 2;
// bgWave.y = bg.y - 280 * bg.scaleY;
// this.renderArr.push(bgWave);
const stoneLayer = createSprite('');
this.renderArr.push(stoneLayer);
this.stoneLayer = stoneLayer;
} }
private initBubble() {
btnLeftClicked() { this.initBublePos();
this.initBubblePic();
this.lastPage();
} }
btnRightClicked() { private initBublePos() {
this.nextPage(); const centerX = (this.bgRight.x - this.bgRight.width / 2 * this.bgRight.scaleX) / 2
const centerY = this.bgRight.y;
let sx = this.canvasWidth / this.canvasBaseW;
if (sx < this.mapScale) {
sx = this.mapScale;
}
this.bubblePos = [
{x: centerX + 60 * sx, y: centerY + 78 * this.mapScale},
{x: centerX + 280 * sx, y: centerY + 70 * this.mapScale},
{x: centerX - 182 * sx, y: centerY + 78 * this.mapScale},
{x: centerX - 50 * sx, y: centerY + 178 * this.mapScale},
{x: centerX + 175 * sx, y: centerY + 178 * this.mapScale},
{x: centerX + 65 * sx, y: centerY + 278 * this.mapScale},
{x: centerX - 165 * sx, y: centerY + 278 * this.mapScale},
{x: centerX + 285 * sx, y: centerY + 278 * this.mapScale},
{x: centerX - 40 * sx, y: centerY - 40 * this.mapScale},
{x: centerX + 170 * sx, y: centerY - 40 * this.mapScale},
{x: centerX - 162 * sx, y: centerY - 150 * this.mapScale},
{x: centerX + 60 * sx, y: centerY - 150 * this.mapScale},
{x: centerX - 40 * sx, y: centerY - 260 * this.mapScale},
{x: centerX + 190 * sx, y: centerY - 270 * this.mapScale}
];
} }
lastPage() { private initBubblePic() {
if (this.curPic == this.pic1) { this.bubbleArr = [];
const picArr = this.data.picArr;
for (let i = 0; i < picArr.length; i++) {
const bubble = this.createBubble(picArr, i);
this.renderArr.push(bubble);
this.bubbleArr.push(bubble);
}
}
private createBubble(picArr, i: number) {
const bubble = createSprite('bubble_frame');
bubble.setScaleXY(this.mapScale);
const bubbleBg = createSprite('bubble_bg');
bubbleBg.y = - 12
bubbleBg.x = 1
bubbleBg.alpha = 0;
bubble.addChild(bubbleBg, -2);
const bgColor = createSprite('bg_color_bubble');
bgColor.y = - 8.5;
bgColor.x = 0;
bubble.addChild(bgColor, -2);
const bgText = createSprite('bg_worddi');
bgText.y = - 8.5;
bgText.x = 0;
bubble.addChild(bgText, 99);
const label = new Label()
label.text = picArr[i].text;
// label.setMaxSize(len * 0.9);
label.textAlign = 'center';
label.fontName = 'MMTextBook-Bold';
label.fontSize = 32;
label.fontColor = '#893329';
label.y = 55;
bgText.addChild(label, 100);
// grid['label'] = label;
const stone = createSprite('stone');
stone.setScaleXY(this.mapScale);
const axe = createSprite('icon_axe');
// axe.setScaleXY(this.mapScale);
const data = picArr[i];
const pic = createSprite(data.pic_url);
pic.setScaleXY(getMinScale(pic, 108 , 108))
pic.x = 0;
pic.y = -8;
pic.isCircleStyle = true;
bubble.addChild(pic, -1);
bubble['bg'] = bubbleBg;
bubble['stone'] = stone;
bubble['pic'] = pic;
bubble['axe'] = axe;
bubble['data'] = data;
const pos = this.bubblePos[i];
bubble.x = pos.x;
bubble.y = pos.y;
stone.x = bubble.x;
stone.y = bubble.y;
bubble.addChild(axe, 99);
this.stoneLayer.addChild(stone);
axe.y = -80;
axe.x = 10;
axe.alpha = 0;
stone.y -= 8;
stone.alpha = 0;
// bubble.addChild(stone, -3);
return bubble;
}
private initGrid() {
this.createGridBg();
this.createGrid();
}
private createGridBg() {
const gridBg = createSprite('grid_bg');
this.bgRight.addChild(gridBg, -2);
gridBg.x = this.letterBg.x;
gridBg.y = this.letterBg.y;
const stripLayer = createSprite('');
gridBg.addChild(stripLayer);
gridBg['stripLayer'] = stripLayer;
this.gridBg = gridBg;
}
private createGrid() {
this.gridObj = {};
const len = 48;
const dis = 6;
const baseX = -(len * 10 + dis * 9) / 2 + len / 2;
let baseY = -(len * 10 + dis * 9) / 2 + len / 2 + 5;
const grid = this.data.grid;
for (let j = 0; j < 10; j++) {
for (let i = 0; i < 10; i++) {
if (!this.gridObj[i.toString()]) {
this.gridObj[i.toString()] = {};
}
const gridData = grid[i][j];
const gridSpr = this.createGridRect(gridData, len);
gridSpr.x = baseX + i * (len + dis);
gridSpr.y = baseY;
this.gridBg.addChild(gridSpr);
gridSpr['logicX'] = i.toString();
gridSpr['logicY'] = j.toString();
this.gridObj[i.toString()][j.toString()] = gridSpr;
}
baseY += (len + dis);
}
}
private createGridRect(data, len) {
const grid = new MySprite();
const shapeRect = new ShapeRect();
shapeRect.setSize(len, len);
shapeRect.x = - len / 2;
shapeRect.y = - len / 2;
shapeRect.visible = false;
grid.addChild(shapeRect);
if (data.text) {
const label = new Label()
label.text = data.text;
label.setMaxSize(len * 0.9);
label.textAlign = 'center';
label.fontName = 'MMTextBook-Bold';
label.fontSize = 50;
label.fontColor = '#fff8c6';
label.y = -3;
grid.addChild(label);
grid['label'] = label;
}
grid.width = len;
grid.height = len;
grid.anchorX = 0.5;
grid.anchorY = 0.5;
grid['data'] = data;
return grid;
}
private clickedGrid(gridSpr: any) {
const strip = this.createStrip(gridSpr.width * 1.05);
strip.x = gridSpr.x;
strip.y = gridSpr.y;
console.log('gridSpr.logicX: ', gridSpr.logicX);
console.log('gridSpr.logicY: ', gridSpr.logicY);
this.gridBg.addChild(strip);
this.curStrip = strip;
this.startGrid = this.endGrid = gridSpr;
}
private createStrip(len) {
const strip = new ShapeRectNew();
strip.setSize(len, len, len / 2);
strip.setOutLine('#663f30', 2);
strip.anchorX = 0.5;
strip.anchorY = 0.5;
strip.fill = false;
return strip;
}
private refreshCurStrip(endGrid) {
if (this.endGrid == endGrid) {
return; return;
} }
this.canTouch = false; const x1 = Number(this.startGrid['logicX']);
const y1 = Number(this.startGrid['logicY']);
const x2 = Number(endGrid['logicX']);
const y2 = Number(endGrid['logicY']);
const angle = Math.round( getAngleByPos(x1, y1, x2, y2) );
const moveLen = this.canvasWidth; if (angle % 45 !== 0) {
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1); return;
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => { }
this.canTouch = true;
this.curPic = this.pic1; const len = getPosDistance(this.startGrid.x, this.startGrid.y, endGrid.x, endGrid.y);
this.curStrip.width = len + this.curStrip.height;
this.curStrip.rotation = angle - 90;
this.curStrip.anchorX = this.curStrip.height / 2 / this.curStrip.width;
console.log('angle: ', angle);
this.endGrid = endGrid;
}
private cleanCurStrip() {
const strip = this.curStrip;
tweenChange(strip, {alpha: 0}, 0.1, () => {
strip.parent.removeChild(this.curStrip);
}); });
this.curStrip = null;
} }
nextPage() { private checkIsWord() {
if (this.curPic == this.pic2) { if (this.startGrid == this.endGrid) {
return; return;
} }
const word = this.getWord();
if (word == this.curBubble.data.text) {
this.showBubbleRight(this.curBubble);
this.curBubble.isCheckEnd = true;
this.curBubble = null;
this.checkGameEnd();
return;
}
this.playAudio('wrong');
// this.bubbleArr.forEach((bubble) => {
// if (word == bubble.data.text && !bubble.isCheckEnd) {
// this.showBubbleRight(bubble);
// bubble.isCheckEnd = true;
// return;
// }
// });
}
private getWord() {
const startNumX = Number(this.startGrid['logicX']);
const startNumY = Number(this.startGrid['logicY']);
const endNumX = Number(this.endGrid['logicX']);
const endNumY = Number(this.endGrid['logicY']);
let subX = endNumX - startNumX;
let subY = endNumY - startNumY;
const loopNum = Math.max(Math.abs(subX), Math.abs(subY));
subX = subX / loopNum;
subY = subY / loopNum;
this.curGridSprArr = [];
let word = '';
for (let i = 0; i <= loopNum; i++) {
const logicX = (startNumX + subX * i).toString();
const logicY = (startNumY + subY * i).toString();
const gridSpr = this.gridObj[logicX][logicY];
this.curGridSprArr.push(gridSpr);
word += gridSpr['data'].text || ' ';
}
console.log('word: ', word);
return word;
}
private showBubbleRight(bubble: any) {
this.hideBubbleBg(bubble);
this.showRightStrip();
this.showPopAnima(this.endGrid.x, this.endGrid.y);
this.showBubbleStone(bubble);
}
private createRightStrip() {
const strip = this.curStrip;
const rightStrip = new ShapeRectNew();
rightStrip.setSize(strip.width, strip.height, strip.radius);
rightStrip.anchorX = strip.anchorX;
rightStrip.anchorY = strip.anchorY;
rightStrip.rotation = strip.rotation;
rightStrip.x = strip.x;
rightStrip.y = strip.y;
rightStrip.fillColor = '#b52c2c';
rightStrip.alpha = 0.72;
return rightStrip;
}
private showPopAnima(x, y) {
const animation = new MyAnimation();
this.gridBg.addChild(animation);
for (let i = 1; i <= 18; i++) {
animation.addFrameByImg(this.images.get('star_' + i));
}
animation.delayPerUnit = 0.02;
animation.loop = false;
animation.playEndFunc = () => {
animation.parent.removeChild(animation);
};
animation.x = x;
animation.y = y;
animation.play();
}
private showRightStrip() {
const rightStrip = this.createRightStrip();
this.gridBg.stripLayer.addChild(rightStrip);
rightStrip.alpha = 0;
tweenChange(rightStrip, {alpha: 0.72}, 0.5, () => {
this.changeLetterColor();
}, TWEEN.Easing.Cubic.In);
this.playAudio('right');
}
private showBubbleStone(bubble: any) {
tweenChange(bubble.axe, {alpha: 1}, 0.5);
tweenChange(bubble.stone, {alpha: 1}, 0.5);
// this.playAudio('stone');
}
private clickedStartBtn() {
this.canTouch = false; this.canTouch = false;
const moveLen = this.canvasWidth; const tween1 = createTween(this.startBtn, {scaleX: 0.8, scaleY: 0.8}, 0.1, null, TWEEN.Easing.Cubic.Out);
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1); const tween2 = createTween(this.startBtn, {scaleX: 1, scaleY: 1}, 0.3, () => {
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => { this.openDoor();
}, TWEEN.Easing.Elastic.Out);
tweenQueue([tween1, tween2]);
this.playAudio('btn');
}
private openDoor(cb = null) {
this.playAudio("open_door")
const baseY = this.letterBg['baseY'];
const mask = this.letterBg['maskSpr'];
tweenChange(this.letterBg, {y: this.letterBg.y - this.letterBg.height}, 1, () => {
this.canTouch = true; this.canTouch = true;
this.curPic = this.pic2; this.letterBg.visible = false;
this.startBtn.visible = false;
if (cb) {
cb();
}
}, TWEEN.Easing.Cubic.In, () => {
mask.y = baseY - this.letterBg.y;
}); });
} }
pic1Clicked() { private clickedBubble(bubble: any) {
this.playAudio(this.data.audio_url);
if (this.curBubble && bubble != this.curBubble) {
tweenChange(this.curBubble['bg'], {alpha: 0}, 0.1);
// this.curBubble['bg'].alpha = 0;
}
console.log(' in clickedBubble');
this.showWaveAnima(bubble);
this.playAudio(bubble['data'].audio_url);
this.curBubble = bubble;
} }
pic2Clicked() { private showWaveAnima(item) {
this.playAudio(this.data.audio_url_2); const animation = new MyAnimation();
for (let i = 1; i <= 3; i++) {
animation.addFrameByImg(this.images.get('wave_' + i));
}
item['bg'].addChild(animation);
// item['bg'].alpha = 1;
animation.x = 0.5;
animation.y = - 22;
animation.playEndFunc = () => {
// tweenChange(item['bg'], {alpha: 1}, 0.1);
item['bg'].alpha = 1
animation.parent.removeChild(animation);
}
animation.play();
} }
private hideBubbleBg(bubble) {
tweenChange(bubble['bg'], {alpha: 0}, 0.1);
}
private changeLetterColor() {
this.curGridSprArr.forEach((gridSpr) => {
gridSpr['label'].fontColor = '#6ed6d7';
});
}
showEndPetal() {
mapDown(event) { console.log('showEndPetal');
this.petalTime = 0;
this.showPetalFlag = true;
this.endPageArr = [];
if (!this.canTouch) { this.addPetal();
return; this.playAudio('finish');
} this.playAudio('star');
if ( this.checkClickTarget(this.btnLeft) ) { setTimeout(() => {
this.btnLeftClicked(); this.showPetalFlag = false;
return; this.showRestartBtn();
} }, 1500);
}
addPetal() {
if ( this.checkClickTarget(this.btnRight) ) { if (!this.showPetalFlag) {
this.btnRightClicked();
return; return;
} }
if ( this.checkClickTarget(this.pic1) ) { const petal = this.getPetal();
this.pic1Clicked();
return; this.endPageArr.push(petal);
moveItem(petal, petal.x, this.canvasHeight + petal.height * petal.scaleY, petal['time'], () => {
removeItemFromArr(this.endPageArr, petal);
});
rotateItem(petal, petal['tr'], petal['time']);
setTimeout(() => {
this.addPetal();
}, 0 + this.petalTime);
this.petalTime += 5;
}
getPetal() {
const petal = new MySprite();
const id = Math.ceil( Math.random() * 3 );
petal.init(this.images.get('petal_' + id));
const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale;
petal.setScaleXY(randomS);
const randomR = Math.random() * 360;
petal.rotation = randomR;
const randomX = Math.random() * this.canvasWidth;
petal.x = randomX;
petal.y = -petal.height / 2 * petal.scaleY;
const randomT = 2 + Math.random() * 5;
petal['time'] = randomT;
let randomTR = 360 * Math.random(); // - 180;
if (Math.random() < 0.5) { randomTR *= -1; }
petal['tr'] = randomTR;
return petal;
}
private checkGameEnd() {
// for (let i = 0; i < this.bubbleArr.length; i++) {
// if (!this.bubbleArr[i].isCheckEnd) {
// return;
// }
// }
const isGameEnd = this.bubbleArr.every((bubble) => {
return bubble.isCheckEnd;
});
if (isGameEnd) {
this.gameEnd();
} }
}
private gameEnd() {
this.showEndPetal();
this.showEndStar();
}
private showEndStar() {
if ( this.checkClickTarget(this.pic2) ) { this.petalTime = 0;
this.pic2Clicked(); this.starTime = 0;
this.addStar();
}
private addStar() {
if (!this.showPetalFlag) {
return; return;
} }
} const star = this.getStar();
this.endPageArr.push(star);
mapMove(event) { const sx = star.scaleX;
star.setScaleXY(0);
const tween1 = createTween(star, {scaleX: sx, scaleY: sx}, star['time'], null, TWEEN.Easing.Cubic.In);
const tween2 = createTween(star, {scaleX: 0, scaleY: 0}, star['time'], () => {
removeItemFromArr(this.endPageArr, star);
}, TWEEN.Easing.Cubic.Out);
tweenQueue([tween1, tween2])
setTimeout(() => {
this.addStar();
}, 0 + this.starTime);
this.starTime += 3;
} }
mapUp(event) { private getStar() {
const star = createSprite('star');
const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale;
star.setScaleXY(randomS);
const randomX = Math.random() * this.canvasWidth;
star.x = randomX;
const randomY = Math.random() * this.canvasHeight;
star.y = randomY;
const randomT = 0.5 + Math.random() * 1;
star['time'] = randomT;
return star;
} }
private initPopAnima() {
const pop = createSprite('pop');
this.popLayer.addChild(pop);
update() { const randomS = 0.3 + Math.random() * 0.7;
pop.setScaleXY(randomS * this.mapScale);
// ---------------------------------------------------------- const px = this.canvasWidth * Math.random();
this.animationId = window.requestAnimationFrame(this.update.bind(this)); pop.x = px;
// 清除画布内容 pop.y = this.canvasHeight + pop.height;
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// tween 更新动画
TWEEN.update();
// ----------------------------------------------------------
const targetY = this.bg.y - 260 * this.bg.scaleY;
const time = 5 + Math.random() * 5;
tweenChange(pop, {y: targetY}, time, () => {
pop.parent.removeChild(pop);
});
delayCall(0.1 + Math.random() * 0.3, this.initPopAnima.bind(this));
}
this.updateArr(this.renderArr); private showRestartBtn() {
const restartBtn = createSprite('restart_btn');
restartBtn.setScaleXY(this.mapScale);
restartBtn.x = this.canvasWidth - 170 * this.mapScale;
restartBtn.y = this.canvasHeight + restartBtn.height / 2 * restartBtn.scaleY;
this.renderArr.push(restartBtn);
this.restartBtn = restartBtn;
this.canTouch = false;
tweenChange(restartBtn, {y: this.canvasHeight - 80 * this.mapScale}, 0.9, () => {
this.canTouch = true;
}, TWEEN.Easing.Elastic.Out);
} }
private clickedRestartBtn() {
tweenChange(this.restartBtn, {y: this.canvasHeight + this.restartBtn.height * this.restartBtn.scaleY}, 0.3, () => {
this.closeDoor();
removeItemFromArr(this.renderArr, this.restartBtn);
this.restartBtn = null;
});
this.letterBg.visible = true;
this.canTouch = false;
this.playAudio('btn');
}
private closeDoor() {
const baseY = this.letterBg['baseY'];
const mask = this.letterBg['maskSpr'];
tweenChange(this.letterBg, {y: baseY}, 1, () => {
// delayCall(1, this.openDoor.bind(this));
this.cleanMap();
this.openDoor();
}, TWEEN.Easing.Cubic.Out, () => {
mask.y = baseY - this.letterBg.y;
});
}
private cleanMap() {
this.cleanBubble();
this.cleanGrid();
}
private cleanBubble() {
this.bubbleArr.forEach((bubble) => {
tweenChange(bubble.stone, {alpha: 0}, 0.3);
tweenChange(bubble.axe, {alpha: 0}, 0.3);
bubble.isCheckEnd = false;
});
}
private cleanGrid() {
this.gridBg.stripLayer.removeChildren();
for (let x in this.gridObj) {
for (let y in this.gridObj[x]) {
if (this.gridObj[x][y].label) {
this.gridObj[x][y].label.fontColor = '#fff8c6';
}
}
}
}
} }
const res = [ const res = [
// ['bg', "assets/play/bg.jpg"], ['bg', "assets/play/bg_bg.png"],
['btn_left', "assets/play/btn_left.png"], ['bg_right', "assets/play/bg_container_1.png"],
['btn_right', "assets/play/btn_right.png"], ['bubble_frame', "assets/play/bg_picdi.png"],
// ['text_bg', "assets/play/text_bg.png"], ['bubble_bg', "assets/play/bg_bubble_select.png"],
['stone', "assets/play/bg_bian2.png"],
['letter_bg', "assets/play/bg_didoor.png"],
['grid_bg', "assets/play/bg_di.png"],
['start_btn', "assets/play/btn_start.png"],
['bg_tree', "assets/play/bg_tree.png"],
['star_1', "assets/play/frame/bg_star1.png"],
['star_2', "assets/play/frame/bg_star2.png"],
['star_3', "assets/play/frame/bg_star3.png"],
['star_4', "assets/play/frame/bg_star4.png"],
['star_5', "assets/play/frame/bg_star5.png"],
['star_6', "assets/play/frame/bg_star6.png"],
['star_7', "assets/play/frame/bg_star7.png"],
['star_8', "assets/play/frame/bg_star8.png"],
['star_9', "assets/play/frame/bg_star9.png"],
['star_10', "assets/play/frame/bg_star10.png"],
['star_11', "assets/play/frame/bg_star11.png"],
['star_12', "assets/play/frame/bg_star12.png"],
['star_13', "assets/play/frame/bg_star13.png"],
['star_14', "assets/play/frame/bg_star14.png"],
['star_15', "assets/play/frame/bg_star15.png"],
['star_16', "assets/play/frame/bg_star16.png"],
['star_17', "assets/play/frame/bg_star17.png"],
['star_18', "assets/play/frame/bg_star18.png"],
['wave_1', "assets/play/bg_ye1.png"],
['wave_2', "assets/play/bg_ye2.png"],
['wave_3', "assets/play/bg_ye3.png"],
['petal_1', "assets/play/petal_1.png"],
['petal_2', "assets/play/petal_2.png"],
['petal_3', "assets/play/petal_3.png"],
['star', "assets/play/icon_star.png"],
['restart_btn', "assets/play/btn_restart.png"],
['apple', "assets/play/default/apple.png"],
['icon_axe', "assets/play/icon_axe.png"],
['bg_color_bubble', "assets/play/bg_color_bubble.png"],
['bg_worddi', "assets/play/bg_worddi.png"],
]; ];
...@@ -11,8 +50,15 @@ const res = [ ...@@ -11,8 +50,15 @@ const res = [
const resAudio = [ const resAudio = [
['apple', "assets/play/default/apple.mp3"],
['click', "assets/play/music/click.mp3"], ['click', "assets/play/music/click.mp3"],
['btn', "assets/play/music/btn.mp3"],
['finish', "assets/play/music/finish.mp3"],
['right', "assets/play/music/right.mp3"],
['star', "assets/play/music/star.mp3"],
['stone', "assets/play/music/stone.mp3"],
['wrong', "assets/play/music/wrong.mp3"],
['open_door', "assets/play/music/open_door.mp3"],
]; ];
export {res, resAudio}; export {res, resAudio};
...@@ -3,6 +3,12 @@ ...@@ -3,6 +3,12 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>NgOne</title> <title>NgOne</title>
<style>
html, body{
width: 100%;
height: 100%;
}
</style>
<base href="/"> <base href="/">
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">--> <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
......
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@import "~ng-zorro-antd/ng-zorro-antd.min.css";
\ No newline at end of file
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
"rules": { "rules": {
"array-type": false, "array-type": false,
"arrow-parens": false, "arrow-parens": false,
"no-string-literal": false,
"deprecation": { "deprecation": {
"severity": "warning" "severity": "warning"
}, },
......
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