Commit 5bd975e8 authored by limingzhe's avatar limingzhe

feat: 完成

parent e505e742
...@@ -69,6 +69,13 @@ export class MySprite extends Sprite { ...@@ -69,6 +69,13 @@ export class MySprite extends Sprite {
img; img;
_z = 0; _z = 0;
_showRect;
_bitmapFlag = false;
_offCanvas;
_offCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) { init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
...@@ -87,6 +94,10 @@ export class MySprite extends Sprite { ...@@ -87,6 +94,10 @@ export class MySprite extends Sprite {
} }
setShowRect(rect) {
this._showRect = rect;
}
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') { setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
...@@ -103,6 +114,8 @@ export class MySprite extends Sprite { ...@@ -103,6 +114,8 @@ export class MySprite extends Sprite {
} }
update($event = null) { update($event = null) {
if (!this.visible && this.childDepandVisible) { if (!this.visible && this.childDepandVisible) {
return; return;
...@@ -139,21 +152,21 @@ export class MySprite extends Sprite { ...@@ -139,21 +152,21 @@ export class MySprite extends Sprite {
//
if (this._radius) { // if (this._radius) {
//
const r = this._radius; // const r = this._radius;
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.lineTo(-w / 2, h / 2); // 创建水平线
this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r); // 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); // this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r); // 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); // this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
//
this.ctx.clip(); // this.ctx.clip();
} // }
} }
...@@ -176,7 +189,13 @@ export class MySprite extends Sprite { ...@@ -176,7 +189,13 @@ export class MySprite extends Sprite {
if (this.img) { if (this.img) {
this.ctx.drawImage(this.img, this._offX, this._offY);
if (this._showRect) {
const rect = this._showRect;
this.ctx.drawImage(this.img, rect.x, rect.y, rect.width, rect.height, this._offX, this._offY + rect.y, this.width, rect.height);
} else {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
} }
...@@ -257,6 +276,13 @@ export class MySprite extends Sprite { ...@@ -257,6 +276,13 @@ export class MySprite extends Sprite {
} }
} }
set btimapFlag(v) {
this._bitmapFlag = v;
}
get btimapFlag() {
return this._bitmapFlag;
}
set alpha(v) { set alpha(v) {
this._alpha = v; this._alpha = v;
if (this.childDepandAlpha) { if (this.childDepandAlpha) {
...@@ -354,6 +380,87 @@ export class MySprite extends Sprite { ...@@ -354,6 +380,87 @@ export class MySprite extends Sprite {
} }
export class RoundSprite extends MySprite {
_newCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
if (imgObj) {
this.img = imgObj;
this.width = this.img.width;
this.height = this.img.height;
}
this.anchorX = anchorX;
this.anchorY = anchorY;
const canvas = window['curCanvas'];
const w = canvas.nativeElement.width;
const h = canvas.nativeElement.height;
this._offCanvas = document.createElement('canvas');
this._offCanvas.width = w;
this._offCanvas.height = h;
this._offCtx = this._offCanvas.getContext('2d');
// this._newCtx = this.ctx;
// this.ctx = this._offCtx;
}
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) {
const r = this._radius;
const w = this.width;
const h = this.height;
const x = -this._offX;
const y = -this._offY;
this._offCtx.lineTo(x - w / 2, y + h / 2); // 创建水平线
this._offCtx.arcTo(x - w / 2, y - h / 2, x - w / 2 + r, y - h / 2, r);
this._offCtx.arcTo(x + w / 2, y - h / 2, x + w / 2, y - h / 2 + r, r);
this._offCtx.arcTo(x + w / 2, y + h / 2, x + w / 2 - r, y + h / 2, r);
this._offCtx.arcTo(x - w / 2, y + h / 2, x - w / 2, y + h / 2 - r, r);
this._offCtx.clip();
}
if (this.img) {
this._offCtx.drawImage(this.img, 0, 0);
this.ctx.drawImage(this._offCanvas,this._offX, this._offX);
}
}
}
...@@ -530,7 +637,7 @@ export class Label extends MySprite { ...@@ -530,7 +637,7 @@ export class Label extends MySprite {
this.ctx.save(); this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`; this.ctx.font = `${this.fontSize * this.scaleX}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign; this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle'; this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight; this.ctx.fontWeight = this.fontWeight;
...@@ -903,6 +1010,181 @@ export class ShapeRect extends MySprite { ...@@ -903,6 +1010,181 @@ export class ShapeRect extends MySprite {
export class Line extends MySprite {
lineWidth = 5;
lineColor = '#000000';
_pointArr = [];
roundFlag = true;
_pointS = 1;
imgObj;
bitMap;
_offCtx;
_offCanvas;
lastPointIndex = 0;
init() {
const canvas = window['curCanvas'];
const w = canvas.nativeElement.width;
const h = canvas.nativeElement.height;
console.log('w: ', w);
console.log('h: ', h);
this._offCanvas = document.createElement('canvas');
this._offCanvas.width = w;
this._offCanvas.height = h;
// this._offCanvas = _offCanvas;
// this._offCtx = this._offCanvas.getContext('2d');
// this._offCanvas = new OffscreenCanvas(w, h);
this._offCtx = this._offCanvas.getContext('2d');
}
addPoint(x, y) {
this._pointArr.push([x, y]);
if (this._pointArr.length < 2) {
return;
}
//
// const lastP = this._pointArr[this._pointArr.length - 1];
//
//
// const context = this._offCtx;
// context.moveTo (lastP[0], lastP[1]); // 设置起点状态
// context.lineTo (x, y); // 设置末端状态
//
// context.lineWidth = this.lineWidth; //设置线宽状态
// context.strokeStyle = this.lineColor;
// context.stroke();
//
//
// this.bitMap = this._offCanvas.transferToImageBitmap();
// const tmpLine = new MySprite(this._offCtx);
// tmpLine.init(this.imgObj);
// tmpLine.anchorY = 1;
// tmpLine.anchorX = 0.5;
// tmpLine.x = lastP[0];
// tmpLine.y = lastP[1];
//
// const disH = getPosDistance(lastP[0], lastP[1], x, y);
// tmpLine.scaleX = this.lineWidth / tmpLine.width;
// tmpLine.scaleY = disH / tmpLine.height * 1.1;
//
// const angle = getAngleByPos(lastP[0], lastP[1], x, y);
// tmpLine.rotation = angle;
//
// this.addChild(tmpLine);
}
setPointArr(arr, imgObj) {
this.removeChildren();
if (arr.length < 2) {
return;
}
let p1 = arr[0];
let p2;
for (let i = 1; i < arr.length; i++) {
p2 = arr[i];
const tmpLine = new MySprite();
tmpLine.init(imgObj);
tmpLine.anchorY = 1;
tmpLine.anchorX = 0.5;
tmpLine.x = p1[0];
tmpLine.y = p1[1];
const disH = getPosDistance(p1[0], p1[1], p2[0], p2[1]);
tmpLine.scaleX = this.lineWidth / tmpLine.width;
tmpLine.scaleY = disH / tmpLine.height * 1.1;
const angle = getAngleByPos(p1[0], p1[1], p2[0], p2[1]);
tmpLine.rotation = angle;
this.addChild(tmpLine);
p1 = p2;
}
}
drawLine() {
if (this._pointArr.length < 2) {
return;
}
const curMaxPointIndex = this._pointArr.length - 1;
if (curMaxPointIndex > this.lastPointIndex) {
const arr = this._pointArr;
const context = this._offCtx;
context.moveTo (arr[this.lastPointIndex][0] * this._pointS, arr[this.lastPointIndex][1] * this._pointS); // 设置起点状态
for (let i = this.lastPointIndex + 1; i < arr.length; i++) {
context.lineTo (arr[i][0] * this._pointS, arr[i][1] * this._pointS); // 设置末端状态
}
if (this.roundFlag) {
context.lineCap = "round";
}
context.lineWidth = this.lineWidth; //设置线宽状态
context.strokeStyle = this.lineColor;
context.stroke();
this.lastPointIndex = curMaxPointIndex;
// this.bitMap = this._offCanvas.transferToImageBitmap();
}
// this.ctx.drawImage(this.bitMap, this._offX, this._offY);
this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
}
drawSelf() {
super.drawSelf();
this.drawLine();
// if (this.img) {
// this.ctx.drawImage(this._offCanvas, 0, 0, this.width, this.height);
// }
// if (this.bitMap) {
// this.bitMap = this._offCanvas.transferToImageBitmap();
// this.ctx.drawImage(this.bitMap, 0, 0, this.width, this.height);
// }
}
}
export class ShapeCircle extends MySprite { export class ShapeCircle extends MySprite {
fillColor = '#FF0000'; fillColor = '#FF0000';
...@@ -931,6 +1213,9 @@ export class ShapeCircle extends MySprite { ...@@ -931,6 +1213,9 @@ export class ShapeCircle extends MySprite {
} }
} }
export class ShapeRectNew extends MySprite { export class ShapeRectNew extends MySprite {
...@@ -1365,6 +1650,9 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) { ...@@ -1365,6 +1650,9 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
export function randomSortByArr(arr) { export function randomSortByArr(arr) {
if (!arr) {
return;
}
const newArr = []; const newArr = [];
const tmpArr = arr.concat(); const tmpArr = arr.concat();
while (tmpArr.length > 0) { while (tmpArr.length > 0) {
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
@font-face @font-face
{ {
font-family: 'BRLNSDB'; font-family: 'MMTextBook';
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="font-family: 'MMTextBook'; opacity: 0; position: absolute; top: 0px;">1</label>
import {Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {Label, MySprite, tweenChange,} from './Unit'; import {
formatTime,
Label,
moveItem,
MyAnimation,
MySprite,
removeItemFromArr,
rotateItem,
ShapeRect,
tweenChange
} from './Unit';
import {res, resAudio} from './resources'; import {res, resAudio} from './resources';
import {Subject} from 'rxjs'; import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators'; import {debounceTime} from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import {tar} from "compressing";
@Component({ @Component({
...@@ -16,8 +27,8 @@ import TWEEN from '@tweenjs/tween.js'; ...@@ -16,8 +27,8 @@ import TWEEN from '@tweenjs/tween.js';
}) })
export class PlayComponent implements OnInit, OnDestroy { export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef; @ViewChild('canvas', {static: true}) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef; @ViewChild('wrap', {static: true}) wrap: ElementRef;
// 数据 // 数据
data; data;
...@@ -53,15 +64,25 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -53,15 +64,25 @@ export class PlayComponent implements OnInit, OnDestroy {
saveKey = 'pu09'; saveKey = 'pu09';
canTouch = true;
btnLeft; borad;
btnRight;
pic1;
pic2;
canTouch = true; private rocketPipe: MySprite;
private bg: MySprite;
private currentTime: number;
private progressBarBg: MySprite;
private isClickedProgress: boolean;
private curAudio: any;
private sentences: any;
private rocket: MySprite;
private startView: ShapeRect;
private allBtns: any;
private showPetalFlag: boolean;
private endPageArr: any;
private petalTime: number;
private isFly: boolean;
curPic;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
...@@ -74,7 +95,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -74,7 +95,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {}; this.data = {};
// 获取数据 // 获取数据
const getData = (<any> window).courseware.getData; const getData = (<any>window).courseware.getData;
getData((data) => { getData((data) => {
if (data && typeof data == 'object') { if (data && typeof data == 'object') {
...@@ -109,7 +130,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -109,7 +130,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// 预加载资源 // 预加载资源
this.loadResources().then(() => { this.loadResources().then(() => {
window["air"].hideAirClassLoading(this.saveKey, this.data); window['air'].hideAirClassLoading(this.saveKey, this.data);
this.init(); this.init();
this.update(); this.update();
}); });
...@@ -138,10 +159,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -138,10 +159,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
updateItem(item) { updateItem(item) {
if (item) { if (item) {
item.update(); item.update();
...@@ -158,11 +175,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -158,11 +175,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
initListener() { initListener() {
this.winResizeEventStream this.winResizeEventStream
...@@ -264,9 +276,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -264,9 +276,13 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
playAudio(key, now = false, callback = null) { playAudio(key, now = true, callback = null, volume = null) {
console.log('key: ', key);
const audio = this.audioObj[key]; const audio = this.audioObj[key];
console.log('audio: ', audio);
if (audio) { if (audio) {
if (now) { if (now) {
audio.pause(); audio.pause();
...@@ -278,12 +294,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -278,12 +294,15 @@ export class PlayComponent implements OnInit, OnDestroy {
callback(); callback();
}; };
} }
if (volume) {
audio.volume = volume;
}
audio.play(); audio.play();
} }
} }
loadResources() { loadResources() {
const pr = []; const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片 this.rawImages.forEach((value, key) => {// 预加载图片
...@@ -342,9 +361,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -342,9 +361,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
checkClickTarget(target) { checkClickTarget(target) {
const rect = target.getBoundingBox(); const rect = target.getBoundingBox();
...@@ -378,9 +394,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -378,9 +394,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) { addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
const audioObj = this.audioObj; const audioObj = this.audioObj;
...@@ -411,16 +424,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -411,16 +424,9 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
// ======================================================编写区域========================================================================== // ======================================================编写区域==========================================================================
/** /**
* 添加默认数据 便于无数据时的展示 * 添加默认数据 便于无数据时的展示
*/ */
...@@ -447,15 +453,20 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -447,15 +453,20 @@ 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);
// 音效 // 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); this.addUrlToAudioObj('start_mp3', this.rawAudios.get('start_mp3'), 1);
this.addUrlToAudioObj('right_mp3', this.rawAudios.get('right_mp3'), 0.1);
this.addUrlToAudioObj('refuel_mp3', this.rawAudios.get('refuel_mp3'), 0.1);
this.addUrlToAudioObj('smoke_mp3', this.rawAudios.get('smoke_mp3'), 0.1);
this.addUrlToAudioObj('fly_mp3', this.rawAudios.get('fly_mp3'), 0.1);
this.addUrlToAudioObj('finish_mp3', this.rawAudios.get('finish_mp3'), 0.1);
} }
/** /**
* 初始化数据 * 初始化数据
*/ */
...@@ -472,12 +483,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -472,12 +483,17 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderArr = []; this.renderArr = [];
this.canTouch = true;
this.currentTime = 0;
this.sentences = [];
this.allBtns = [];
this.endPageArr = [];
this.isFly = false;
} }
/** /**
* 初始化试图 * 初始化试图
*/ */
...@@ -485,6 +501,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -485,6 +501,9 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initBg(); this.initBg();
this.initBoard(); this.initBoard();
this.initAudioPlayer(); this.initAudioPlayer();
this.initSentences();
this.initRocket();
this.initStartView();
// initBoard(); // initBoard();
// initAudioPlayer(); // initAudioPlayer();
...@@ -495,15 +514,170 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -495,15 +514,170 @@ export class PlayComponent implements OnInit, OnDestroy {
// this.initBottomPart(); // this.initBottomPart();
} }
initRocket() {
const rocketBase = this.createSprite('rocket_base');
rocketBase.x = this.borad.x;
rocketBase.y = this.canvasHeight - 20 * this.mapScale;
rocketBase.setScaleXY(this.mapScale);
const rocket = this.createSprite('rocket');
rocket.y = -rocket.height / 2 - 30;
rocketBase.addChild(rocket);
this.rocket = rocket;
const rocketPipe = this.createSprite('rocket_pipe');
rocketPipe.x = rocketBase.x - 200 * this.mapScale;
rocketPipe.y = rocketBase.y - 90 * this.mapScale;
rocketPipe.setScaleXY(this.mapScale);
this.rocketPipe = rocketPipe;
const pipeClip = this.createSprite('pipe_clip');
pipeClip.x = -62;
pipeClip.y = 42;
rocketPipe.addChild(pipeClip)
this.renderArr.push(rocketBase);
this.renderArr.push(rocket);
}
initSentences() {
const sentences = this.data.sentences;
const baseX = this.canvasWidth - 350 * this.mapScale;
const baseY = this.canvasHeight - 530 * this.mapScale;
const offY = 90 * this.mapScale;
sentences.forEach((sentenceData, i) => {
const sentence = this.createSentenceContainer(sentenceData);
sentence.x = baseX;
sentence.y = baseY + i * offY;
this.sentences.push(sentence);
});
}
initBoard() { initBoard() {
const pic = new MySprite(); const pic = new MySprite();
pic.init(this.images.get('board')); pic.init(this.images.get('board'));
pic.setScaleXY(this.mapScale); pic.setScaleXY(this.mapScale);
pic.x = (pic.width / 2 - 100) * this.mapScale; pic.x = (pic.width / 2 - 130) * this.mapScale;
pic.y = this.canvasHeight - pic.height / 2 * this.mapScale + 50 * this.mapScale; pic.y = this.canvasHeight - pic.height / 2 * this.mapScale - 0 * this.mapScale;
this.addScreenPicToBoard(pic); this.addScreenPicToBoard(pic);
this.renderArr.push(pic); this.renderArr.push(pic);
this.borad = pic;
}
mapDown(event) {
if (!this.canTouch) {
return;
}
if (this.startView.visible) {
this.allBtns.forEach((btn) => {
if (this.checkClickTarget(btn)) {
btn._onTouchStart();
return;
}
});
return;
}
if (this.checkClickTarget(this.progressBarBg)) {
this.isClickedProgress = true;
this.touchDownProgressBar(this.progressBarBg);
return;
}
if (this.checkClickTarget(this.curAudio.playBtn)) {
this.touchDownAudioBtn(this.curAudio);
return;
}
this.sentences.forEach((sentence) => {
if (this.checkClickTarget(sentence) || this.checkClickTarget(sentence.ufoBtn)) {
this.touchDownSentence(sentence);
return;
}
});
}
mapMove(event) {
if (!this.isClickedProgress) {
return;
}
this.touchDownProgressBar(this.progressBarBg);
}
mapUp(event) {
this.allBtns.forEach((btn) => {
// if (this.checkClickTarget(btn)) {
if (btn._isDown) {
btn._onTouchEnd();
}
// }
});
this.isClickedProgress = false;
}
update() {
// ----------------------------------------------------------
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// tween 更新动画
TWEEN.update();
// ----------------------------------------------------------
this.updateItem(this.bg);
this.updateItem(this.rocketPipe);
this.updateArr(this.renderArr);
this.updateArr(this.endPageArr);
this.updateTime();
}
private createSentenceContainer(sentence) {
const sentenceBg: any = new MySprite();
sentenceBg.init(this.images.get('sentence_bg'));
sentenceBg.setScaleXY(this.mapScale);
const labelOffX = 10;
const labelMaxWidth = sentenceBg.width - labelOffX * 2;
const label = new Label();
label.text = sentence.text + 'Fg';
label.fontColor = '#f3f1da';
label.fontSize = 45;
label.fontName = 'MMTextBook';
label.x = -sentenceBg.width / 2 + labelOffX;
label.y = -5;
label.setMaxSize(labelMaxWidth);
sentenceBg.addChild(label);
const ufoBtn = this.createSprite('btn_ufo_1')
sentenceBg.addChild(ufoBtn);
ufoBtn.x = sentenceBg.width / 2 + 45;
ufoBtn.y = sentenceBg.height / 2 - 8;
const ufoBtnLight = this.createSprite('btn_ufo_2');
ufoBtn.addChild(ufoBtnLight);
this.hide(ufoBtnLight);
sentenceBg.ufoBtn = ufoBtn;
sentenceBg.ufoBtnLight = ufoBtnLight;
this.renderArr.push(sentenceBg);
return sentenceBg;
} }
private addScreenPicToBoard(board: MySprite) { private addScreenPicToBoard(board: MySprite) {
...@@ -530,257 +704,445 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -530,257 +704,445 @@ export class PlayComponent implements OnInit, OnDestroy {
const scale = Math.max(scaleX, scaleY); const scale = Math.max(scaleX, scaleY);
pic.setScaleXY(scale); pic.setScaleXY(scale);
pic.y = this.canvasHeight - pic.height / 2 * scale; pic.y = this.canvasHeight - pic.height / 2 * scale;
this.renderArr.push(pic); this.bg = pic;
} }
initBottomPart() { private initAudioPlayer() {
this.curAudio = this.audioObj[this.data.audio_url];
this.curAudio.onended = () => {
this.setAudioState(this.curAudio, false);
this.curAudio.currentTime = 0;
}
const btnLeft = new MySprite(); const audioPlayer = this.createAudioPlayer();
btnLeft.init(this.images.get('btn_left')); audioPlayer.setScaleXY(this.mapScale);
btnLeft.x = this.canvasWidth - 150 * this.mapScale; audioPlayer.x = this.canvasWidth - 520 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale; audioPlayer.y = this.canvasHeight - 630 * this.mapScale;
this.renderArr.push(audioPlayer);
}
btnLeft.setScaleXY(this.mapScale); private createAudioPlayer() {
const audioPlayer = new MySprite();
this.renderArr.push(btnLeft); audioPlayer.addChild(this.createPlayPauseButton());
const progressBar = this.createProgressBar();
progressBar.x = 80;
progressBar.y = 20;
audioPlayer.addChild(progressBar);
this.btnLeft = btnLeft; return audioPlayer;
}
private createPlayPauseButton() {
const button = this.createSprite('btn_play');
const btnPause = new MySprite();
btnPause.init(this.images.get('btn_pause'));
this.hide(btnPause);
button.addChild(btnPause);
const btnRight = new MySprite(); this.curAudio.playBtn = button;
btnRight.init(this.images.get('btn_right')); this.curAudio.stopBtn = btnPause;
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
this.renderArr.push(btnRight); return button;
}
this.btnRight = btnRight; private createSprite(key: string) {
const sprite = new MySprite();
sprite.init(this.images.get(key));
return sprite;
} }
initPic() { private hide(element: MySprite) {
element.alpha = 0;
}
private show(element: MySprite) {
element.alpha = 1;
}
const maxW = this.canvasWidth * 0.7;
const pic1 = new MySprite(); private createProgressBar() {
pic1.init(this.images.get(this.data.pic_url)); const container = new MySprite();
pic1.x = this.canvasWidth / 2; const progressBarBg = this.createSprite('progressbar_bg');
pic1.y = this.canvasHeight / 2; progressBarBg.anchorX = 0;
pic1.setScaleXY(maxW / pic1.width); this.progressBarBg = progressBarBg;
this.renderArr.push(pic1); const progressBarPlayed = this.createSprite('progressbar_played');
this.pic1 = pic1; progressBarPlayed.anchorX = 0;
progressBarPlayed.scaleX = 0;
progressBarBg['bar'] = progressBarPlayed;
const btn = this.createSprite('btn_current_position')
btn.y = -3;
progressBarBg['btn'] = btn;
const label1 = new Label(); const currentTime = this.createTime();
label1.text = this.data.text; currentTime.text = formatTime('mm:ss', new Date(this.currentTime * 1000));
label1.textAlign = 'center'; currentTime.x = -10;
label1.fontSize = 50; currentTime.y = -40;
label1.fontName = 'BRLNSDB'; progressBarBg['timeLabel'] = currentTime;
label1.fontColor = '#ffffff';
pic1.addChild(label1); const totalTime = this.createTime();
totalTime.text = formatTime('mm:ss', new Date(this.curAudio.duration * 1000));
totalTime.refreshSize();
totalTime.x = progressBarBg.width - totalTime.width;
totalTime.y = currentTime.y;
container.addChild(progressBarBg);
container.addChild(progressBarPlayed);
container.addChild(btn);
container.addChild(currentTime)
container.addChild(totalTime)
return container;
}
private createTime() {
const label = new Label();
label.fontSize = 28;
label.fontColor = '#FFFFFF';
return label;
}
private setAudioProgress(target: any, progress: number) {
target.btn.x = target.width * progress;
target.bar.scaleX = progress;
const pic2 = new MySprite(); this.currentTime = Math.floor(progress * this.curAudio.duration);
pic2.init(this.images.get(this.data.pic_url_2)); target.timeLabel.text = formatTime('mm:ss', new Date(this.currentTime * 1000));
pic2.x = this.canvasWidth / 2 + this.canvasWidth; }
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
this.renderArr.push(pic2); private touchDownProgressBar(target) {
this.pic2 = pic2; this.setAudioState(this.curAudio, false);
this.curPic = pic1; const rect = target.getBoundingBox();
const tmpW = (this.mx - rect.x) / this.mapScale;
if (tmpW >= 0 && tmpW <= target.width) {
const progress = tmpW / target.width;
this.curAudio.currentTime = progress * this.curAudio.duration;
this.setAudioProgress(target, progress);
}
} }
btnLeftClicked() { private setAudioState(audio: any, isPlay: boolean) {
if (isPlay) {
this.lastPage(); this.hide(audio.playBtn);
this.show(audio.stopBtn);
audio.play();
} else {
this.hide(audio.stopBtn);
this.show(audio.playBtn);
audio.pause();
}
} }
btnRightClicked() { private touchDownAudioBtn(audio) {
if (audio.paused) {
this.nextPage(); audio.play();
this.setAudioState(audio, true);
} else {
audio.pause();
this.setAudioState(audio, false);
}
} }
lastPage() { private updateTime() {
if (!this.isClickedProgress) {
const progress = this.curAudio.currentTime / this.curAudio.duration;
this.setAudioProgress(this.progressBarBg, progress);
}
}
if (this.curPic == this.pic1) { private touchDownSentence(sentence: any) {
if (this.isShow(sentence.ufoBtnLight)) {
return; return;
} }
this.canTouch = false; this.hide(sentence.ufoBtn);
this.show(sentence.ufoBtnLight);
this.refuel();
this.playAudio('right_mp3');
this.playAudio('refuel_mp3');
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic1;
});
} }
nextPage() { private refuel() {
// this.canTouch = false;
this.showRefuelAnima();
this.animationId = setTimeout(() => {
this.showRefuelAnima(this.checkFly.bind(this));
}, 390);
}
if (this.curPic == this.pic2) { private showRefuelAnima(callback = null) {
return;
}
this.canTouch = false; const ball = this.createSprite('refuel_ball');
ball.x = this.rocketPipe.width / 2 - 53;
ball.y = -this.rocketPipe.height / 2 + 20;
this.rocketPipe.addChild(ball, 0);
const moveLen = this.canvasWidth; const time = 1;
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1); const endX = -this.rocketPipe.width / 2 + 24;
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => { const endY = 25;
this.canTouch = true;
this.curPic = this.pic2; tweenChange(ball, {x: endX, y: endY}, time);
});
tweenChange(ball, {scaleX: 1.5, scaleY: 1.5}, time * 0.6, () => {
tweenChange(ball, {scaleX: 0.9, scaleY: 0.9}, time * 0.4, () => {
this.rocketPipe.removeChild(ball);
if (callback) {
callback();
}
});
}, TWEEN.Easing.Quintic.Out);
} }
pic1Clicked() { private isShow(emelent: any) {
this.playAudio(this.data.audio_url); return emelent.alpha > 0;
} }
pic2Clicked() { private isHide(element: any) {
this.playAudio(this.data.audio_url_2); return element.alpha === 0;
} }
private checkFly() {
this.canTouch = true;
for(let i = 0; i < this.sentences.length; i++) {
if (this.isHide(this.sentences[i].ufoBtnLight)) {
// this.showSmoke();
return;
}
}
this.showSmoke();
}
private rocketFly() {
const flyTime = 2.7 ;
tweenChange(this.rocket, {x: this.rocket.x, y: -this.canvasHeight}, flyTime, () => {
this.showEndPatal();
}, TWEEN.Easing.Quintic.In);
const fire = this.createSprite('rocket_fire');
fire.y = this.rocket.height / 2 - 30;
this.rocket.addChild(fire, -1);
fire.anchorY = 0;
fire.scaleY = 0;
tweenChange(fire, {scaleY: 1}, flyTime * 0.8, TWEEN.Easing.Quintic.In);
const baseX = this.rocket.x;
const shakeTime = 0.08;
const shakeOffArr = [
[8],
[-8],
[6],
[-6],
[4],
[-4],
[2],
[-2],
[0],
];
const shakeAnima = (data) => {
const offX = data[0] / 3;
const time = shakeTime;
tweenChange(this.rocket, {x: baseX + offX}, time, () => {
if (shakeOffArr.length > 0) {
const shakeData = shakeOffArr.shift();
shakeAnima(shakeData);
} else {
}
});
}
const shakeData = shakeOffArr.shift();
shakeAnima(shakeData);
mapDown(event) { setTimeout(() => {
this.playAudio('fly_mp3');
}, 700);
}
if (!this.canTouch) { private initStartView() {
return; const startViewBg = new ShapeRect();
} startViewBg.fillColor = '#000000';
startViewBg.setSize(this.canvasWidth, this.canvasHeight);
startViewBg.alpha = 0.5;
this.renderArr.push(startViewBg);
const startBtn = this.createBtn('btn_start');
startBtn.x = startViewBg.width / 2;
startBtn.y = startViewBg.height * 0.4;
startBtn.setScaleXY(this.mapScale);
startViewBg.addChild(startBtn);
const btnLight = this.createSprite('btn_light');
startBtn.addChild(btnLight, -1);
btnLight.alpha = 0;
btnLight.anchorY = 0;
startBtn.onTouchStart = () => {
btnLight.alpha = 1;
};
startBtn.onClick = () => {
btnLight.alpha = 0;
setTimeout(() => {
this.startView.visible = false;
// this.playAudio('start_mp3');
}, 100);
if ( this.checkClickTarget(this.btnLeft) ) { };
this.btnLeftClicked(); this.startView = startViewBg;
return; }
private createBtn(url_up: string, url_down: string = null, isDownChange: boolean = true) {
const btnUp: any = this.createSprite(url_up);
let btnDown;
if (url_down) {
btnDown = this.createSprite(url_down);
btnUp.addChild(btnDown);
} }
btnUp.btnDown = btnDown;
btnUp._onTouchStart = () => {
if (btnDown) {
btnDown.alpha = 1;
btnUp.alpha = 0;
}
if (!btnUp.baseScale) {
btnUp.baseScale = btnUp.scaleX;
}
if (isDownChange) {
btnUp.setScaleXY(btnUp.baseScale * 0.9);
}
if (btnUp.onTouchStart) {
btnUp.onTouchStart();
}
btnUp._isDown = true;
};
btnUp._onTouchMove = () => {};
btnUp._onTouchEnd = () => {
if (btnDown) {
btnDown.alpha = 0;
}
btnUp.alpha = 1;
btnUp.setScaleXY(btnUp.baseScale);
if (btnUp.onClick) {
btnUp.onClick();
}
btnUp._isDown = false;
};
if ( this.checkClickTarget(this.btnRight) ) { this.allBtns.push(btnUp);
this.btnRightClicked(); return btnUp;
}
private showSmoke() {
if (this.isFly) {
return; return;
} }
this.isFly = true;
if ( this.checkClickTarget(this.pic1) ) { const anima = new MyAnimation();
this.pic1Clicked(); anima.y = this.rocket.height / 2 - 30;
return; this.rocket.addChild(anima, -1);
for (let i = 1; i < 10; i++) {
const key = 'smoke_' + i;
anima.addFrameByImg(this.images.get(key));
} }
anima.delayPerUnit = 0.1;
anima.loop = false;
if ( this.checkClickTarget(this.pic2) ) { // anima.playEndFunc = this.rocketFly.bind(this);
this.pic2Clicked(); anima.playEndFunc = () => {
return; anima.visible = false;
} }
anima.play();
this.animationId = setTimeout(() => {
this.rocketFly();
}, 100);
this.playAudio('smoke_mp3');
} }
mapMove(event) {
}
mapUp(event) {
}
update() {
// ---------------------------------------------------------- showEndPatal() {
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// tween 更新动画
TWEEN.update();
// ----------------------------------------------------------
console.log('showEndPetal');
this.petalTime = 0;
this.showPetalFlag = true;
this.addPetal();
this.playAudio('finish_mp3');
setTimeout(() => {
this.showPetalFlag = false;
}, 5000);
}
this.updateArr(this.renderArr); addPetal() {
if (!this.showPetalFlag) {
return;
}
} const petal = this.getPetal();
this.endPageArr.push(petal);
private initAudioPlayer() { moveItem(petal, petal.x, this.canvasHeight + petal.height * petal.scaleY, petal['time'], () => {
const audioPlayer = this.createAudioPlayer(); removeItemFromArr(this.endPageArr, petal);
audioPlayer.setScaleXY(this.mapScale); });
audioPlayer.x = this.canvasWidth - 450 * this.mapScale;
audioPlayer.y = this.canvasHeight - 600 * this.mapScale;
this.renderArr.push(audioPlayer);
}
private createAudioPlayer() { rotateItem(petal, petal['tr'], petal['time']);
const audioPlayer = new MySprite();
audioPlayer.addChild(this.createPlayPauseButton()); setTimeout(() => {
const progressBar = this.createProgressBar(); this.addPetal();
progressBar.x = 80; }, 0 + this.petalTime);
progressBar.y = 20;
audioPlayer.addChild(progressBar); this.petalTime += 5;
// addCurrentTime();
// addTotalTime();
return audioPlayer;
} }
private createPlayPauseButton() {
const button = this.createSprite('btn_play');
const btnPause = new MySprite(); getPetal() {
btnPause.init(this.images.get('btn_pause'));
this.hide(btnPause);
button.addChild(btnPause);
return button;
}
private createSprite(key: string) { const petal = new MySprite();
const sprite = new MySprite();
sprite.init(this.images.get(key));
return sprite;
}
private hide(element: MySprite) { const id = Math.ceil( Math.random() * 3 );
element.alpha = 0; petal.init(this.images.get('petal_' + id));
}
private createProgressBar() { const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale;
const container = new MySprite(); petal.setScaleXY(randomS);
const progressBarBg = this.createSprite('progressbar_bg');
progressBarBg.anchorX = 0;
const progressBarPlayed = this.createSprite('progressbar_played');
progressBarPlayed.anchorX = 0;
progressBarPlayed.scaleX = 0;
const currentTime = this.createTime(); const randomR = Math.random() * 360;
currentTime.text = '0:00'; petal.rotation = randomR;
currentTime.x = -10;
currentTime.y = -35;
const totalTime = this.createTime(); const randomX = Math.random() * this.canvasWidth;
totalTime.text = '1:24'; petal.x = randomX;
totalTime.refreshSize(); petal.y = -petal.height / 2 * petal.scaleY;
totalTime.x = progressBarBg.width - totalTime.width;
totalTime.y = currentTime.y;
container.addChild(progressBarBg); const randomT = 2 + Math.random() * 5;
container.addChild(progressBarPlayed); petal['time'] = randomT;
container.addChild(this.createSprite('btn_current_position'));
container.addChild(currentTime)
container.addChild(totalTime)
return container;
}
private createTime() { let randomTR = 360 * Math.random(); // - 180;
const label = new Label(); if (Math.random() < 0.5) { randomTR *= -1; }
label.fontSize = 28; petal['tr'] = randomTR;
label.fontColor = '#FFFFFF';
return label; return petal;
} }
} }
...@@ -7,9 +7,33 @@ const res = [ ...@@ -7,9 +7,33 @@ const res = [
['btn_current_position', "assets/play/btn_current_position.png"], ['btn_current_position', "assets/play/btn_current_position.png"],
['progressbar_bg', "assets/play/progressbar_bg.png"], ['progressbar_bg', "assets/play/progressbar_bg.png"],
['progressbar_played', "assets/play/progressbar_played.png"], ['progressbar_played', "assets/play/progressbar_played.png"],
['btn_left', "assets/play/btn_left.png"], ['btn_ufo_1', "assets/play/btn_ufo_1.png"],
['btn_right', "assets/play/btn_right.png"], ['btn_ufo_2', "assets/play/btn_ufo_2.png"],
// ['text_bg', "assets/play/text_bg.png"], ['sentence_bg', "assets/play/sentence_bg.png"],
['rocket', "assets/play/rocket.png"],
['rocket_base', "assets/play/rocket_base.png"],
['rocket_pipe', "assets/play/rocket_pipe.png"],
['pipe_clip', "assets/play/pipe_clip.png"],
['refuel_ball', "assets/play/refuel.png"],
['btn_start', "assets/play/btn_start.png"],
['btn_light', "assets/play/btn_light.png"],
['rocket_fire', "assets/play/rocket_fire.png"],
['smoke_1', "assets/play/smoke/bg_smoke1.png"],
['smoke_2', "assets/play/smoke/bg_smoke2.png"],
['smoke_3', "assets/play/smoke/bg_smoke3.png"],
['smoke_4', "assets/play/smoke/bg_smoke4.png"],
['smoke_5', "assets/play/smoke/bg_smoke5.png"],
['smoke_6', "assets/play/smoke/bg_smoke6.png"],
['smoke_7', "assets/play/smoke/bg_smoke7.png"],
['smoke_8', "assets/play/smoke/bg_smoke8.png"],
['smoke_9', "assets/play/smoke/bg_smoke9.png"],
['petal_1', "assets/play/petal_1.png"],
['petal_2', "assets/play/petal_2.png"],
['petal_3', "assets/play/petal_3.png"],
]; ];
...@@ -17,7 +41,12 @@ const res = [ ...@@ -17,7 +41,12 @@ const res = [
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['start_mp3', "assets/play/music/start.mp3"],
['right_mp3', "assets/play/music/right.mp3"],
['refuel_mp3', "assets/play/music/refuel.mp3"],
['smoke_mp3', "assets/play/music/smoke.mp3"],
['fly_mp3', "assets/play/music/fly.mp3"],
['finish_mp3', "assets/play/music/finish.mp3"],
]; ];
......
File mode changed from 100644 to 100755
...@@ -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",
......
...@@ -91,6 +91,8 @@ ...@@ -91,6 +91,8 @@
"no-trailing-whitespace": false, "no-trailing-whitespace": false,
"variable-name": false, "variable-name": false,
"no-string-literal": false,
"no-unused-expression": false, "no-unused-expression": false,
"align": false "align": false
}, },
......
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