Commit 5bd975e8 authored by limingzhe's avatar limingzhe

feat: 完成

parent e505e742
......@@ -69,6 +69,13 @@ export class MySprite extends Sprite {
img;
_z = 0;
_showRect;
_bitmapFlag = false;
_offCanvas;
_offCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
......@@ -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)') {
......@@ -103,6 +114,8 @@ export class MySprite extends Sprite {
}
update($event = null) {
if (!this.visible && this.childDepandVisible) {
return;
......@@ -139,21 +152,21 @@ export class MySprite extends Sprite {
if (this._radius) {
const r = this._radius;
const w = this.width;
const h = this.height;
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, -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, h / 2 - r, r);
this.ctx.clip();
}
//
// if (this._radius) {
//
// const r = this._radius;
// const w = this.width;
// const h = this.height;
//
// 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, -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, h / 2 - r, r);
//
// this.ctx.clip();
// }
}
......@@ -176,7 +189,13 @@ export class MySprite extends Sprite {
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 {
}
}
set btimapFlag(v) {
this._bitmapFlag = v;
}
get btimapFlag() {
return this._bitmapFlag;
}
set alpha(v) {
this._alpha = v;
if (this.childDepandAlpha) {
......@@ -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 {
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.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
......@@ -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 {
fillColor = '#FF0000';
......@@ -931,6 +1213,9 @@ export class ShapeCircle extends MySprite {
}
}
export class ShapeRectNew extends MySprite {
......@@ -1365,6 +1650,9 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
export function randomSortByArr(arr) {
if (!arr) {
return;
}
const newArr = [];
const tmpArr = arr.concat();
while (tmpArr.length > 0) {
......
......@@ -13,7 +13,7 @@
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
font-family: 'MMTextBook';
src: url("/assets/font/MMTextBook-Bold.otf")
}
<div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas>
</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 {Label, MySprite, tweenChange,} from './Unit';
import {
formatTime,
Label,
moveItem,
MyAnimation,
MySprite,
removeItemFromArr,
rotateItem,
ShapeRect,
tweenChange
} from './Unit';
import {res, resAudio} from './resources';
import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
import {tar} from "compressing";
@Component({
......@@ -16,8 +27,8 @@ import TWEEN from '@tweenjs/tween.js';
})
export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef;
@ViewChild('canvas', {static: true}) canvas: ElementRef;
@ViewChild('wrap', {static: true}) wrap: ElementRef;
// 数据
data;
......@@ -53,15 +64,25 @@ export class PlayComponent implements OnInit, OnDestroy {
saveKey = 'pu09';
canTouch = true;
btnLeft;
btnRight;
pic1;
pic2;
borad;
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'])
onResize(event) {
......@@ -74,7 +95,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {};
// 获取数据
const getData = (<any> window).courseware.getData;
const getData = (<any>window).courseware.getData;
getData((data) => {
if (data && typeof data == 'object') {
......@@ -109,7 +130,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// 预加载资源
this.loadResources().then(() => {
window["air"].hideAirClassLoading(this.saveKey, this.data);
window['air'].hideAirClassLoading(this.saveKey, this.data);
this.init();
this.update();
});
......@@ -138,10 +159,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
updateItem(item) {
if (item) {
item.update();
......@@ -158,11 +175,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
initListener() {
this.winResizeEventStream
......@@ -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];
console.log('audio: ', audio);
if (audio) {
if (now) {
audio.pause();
......@@ -278,12 +294,15 @@ export class PlayComponent implements OnInit, OnDestroy {
callback();
};
}
if (volume) {
audio.volume = volume;
}
audio.play();
}
}
loadResources() {
const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片
......@@ -342,9 +361,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
checkClickTarget(target) {
const rect = target.getBoundingBox();
......@@ -378,9 +394,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
const audioObj = this.audioObj;
......@@ -411,16 +424,9 @@ 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_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 {
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 {
this.initBg();
this.initBoard();
this.initAudioPlayer();
this.initSentences();
this.initRocket();
this.initStartView();
// initBoard();
// initAudioPlayer();
......@@ -495,15 +514,170 @@ export class PlayComponent implements OnInit, OnDestroy {
// 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() {
const pic = new MySprite();
pic.init(this.images.get('board'));
pic.setScaleXY(this.mapScale);
pic.x = (pic.width / 2 - 100) * this.mapScale;
pic.y = this.canvasHeight - pic.height / 2 * this.mapScale + 50 * this.mapScale;
pic.x = (pic.width / 2 - 130) * this.mapScale;
pic.y = this.canvasHeight - pic.height / 2 * this.mapScale - 0 * this.mapScale;
this.addScreenPicToBoard(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) {
......@@ -530,257 +704,445 @@ export class PlayComponent implements OnInit, OnDestroy {
const scale = Math.max(scaleX, scaleY);
pic.setScaleXY(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();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
const audioPlayer = this.createAudioPlayer();
audioPlayer.setScaleXY(this.mapScale);
audioPlayer.x = this.canvasWidth - 520 * 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();
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.curAudio.playBtn = button;
this.curAudio.stopBtn = btnPause;
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();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
private createProgressBar() {
const container = new MySprite();
const progressBarBg = this.createSprite('progressbar_bg');
progressBarBg.anchorX = 0;
this.progressBarBg = progressBarBg;
this.renderArr.push(pic1);
this.pic1 = pic1;
const progressBarPlayed = this.createSprite('progressbar_played');
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();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
const currentTime = this.createTime();
currentTime.text = formatTime('mm:ss', new Date(this.currentTime * 1000));
currentTime.x = -10;
currentTime.y = -40;
progressBarBg['timeLabel'] = currentTime;
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();
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.currentTime = Math.floor(progress * this.curAudio.duration);
target.timeLabel.text = formatTime('mm:ss', new Date(this.currentTime * 1000));
}
this.renderArr.push(pic2);
this.pic2 = pic2;
private touchDownProgressBar(target) {
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() {
this.lastPage();
private setAudioState(audio: any, isPlay: boolean) {
if (isPlay) {
this.hide(audio.playBtn);
this.show(audio.stopBtn);
audio.play();
} else {
this.hide(audio.stopBtn);
this.show(audio.playBtn);
audio.pause();
}
}
btnRightClicked() {
this.nextPage();
private touchDownAudioBtn(audio) {
if (audio.paused) {
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;
}
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) {
return;
}
private showRefuelAnima(callback = null) {
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;
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic2;
});
const time = 1;
const endX = -this.rocketPipe.width / 2 + 24;
const endY = 25;
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() {
this.playAudio(this.data.audio_url);
private isShow(emelent: any) {
return emelent.alpha > 0;
}
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
private isHide(element: any) {
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) {
return;
}
private initStartView() {
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();
return;
};
this.startView = startViewBg;
}
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.btnRightClicked();
this.allBtns.push(btnUp);
return btnUp;
}
private showSmoke() {
if (this.isFly) {
return;
}
this.isFly = true;
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return;
const anima = new MyAnimation();
anima.y = this.rocket.height / 2 - 30;
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) ) {
this.pic2Clicked();
return;
// anima.playEndFunc = this.rocketFly.bind(this);
anima.playEndFunc = () => {
anima.visible = false;
}
anima.play();
this.animationId = setTimeout(() => {
this.rocketFly();
}, 100);
this.playAudio('smoke_mp3');
}
mapMove(event) {
}
mapUp(event) {
}
update() {
// ----------------------------------------------------------
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// tween 更新动画
TWEEN.update();
// ----------------------------------------------------------
showEndPatal() {
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() {
const audioPlayer = this.createAudioPlayer();
audioPlayer.setScaleXY(this.mapScale);
audioPlayer.x = this.canvasWidth - 450 * this.mapScale;
audioPlayer.y = this.canvasHeight - 600 * this.mapScale;
this.renderArr.push(audioPlayer);
}
moveItem(petal, petal.x, this.canvasHeight + petal.height * petal.scaleY, petal['time'], () => {
removeItemFromArr(this.endPageArr, petal);
});
private createAudioPlayer() {
const audioPlayer = new MySprite();
rotateItem(petal, petal['tr'], petal['time']);
audioPlayer.addChild(this.createPlayPauseButton());
const progressBar = this.createProgressBar();
progressBar.x = 80;
progressBar.y = 20;
audioPlayer.addChild(progressBar);
// addCurrentTime();
// addTotalTime();
return audioPlayer;
setTimeout(() => {
this.addPetal();
}, 0 + this.petalTime);
this.petalTime += 5;
}
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);
return button;
}
getPetal() {
private createSprite(key: string) {
const sprite = new MySprite();
sprite.init(this.images.get(key));
return sprite;
}
const petal = new MySprite();
private hide(element: MySprite) {
element.alpha = 0;
}
const id = Math.ceil( Math.random() * 3 );
petal.init(this.images.get('petal_' + id));
private createProgressBar() {
const container = new MySprite();
const progressBarBg = this.createSprite('progressbar_bg');
progressBarBg.anchorX = 0;
const progressBarPlayed = this.createSprite('progressbar_played');
progressBarPlayed.anchorX = 0;
progressBarPlayed.scaleX = 0;
const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale;
petal.setScaleXY(randomS);
const currentTime = this.createTime();
currentTime.text = '0:00';
currentTime.x = -10;
currentTime.y = -35;
const randomR = Math.random() * 360;
petal.rotation = randomR;
const totalTime = this.createTime();
totalTime.text = '1:24';
totalTime.refreshSize();
totalTime.x = progressBarBg.width - totalTime.width;
totalTime.y = currentTime.y;
const randomX = Math.random() * this.canvasWidth;
petal.x = randomX;
petal.y = -petal.height / 2 * petal.scaleY;
container.addChild(progressBarBg);
container.addChild(progressBarPlayed);
container.addChild(this.createSprite('btn_current_position'));
container.addChild(currentTime)
container.addChild(totalTime)
return container;
}
const randomT = 2 + Math.random() * 5;
petal['time'] = randomT;
private createTime() {
const label = new Label();
label.fontSize = 28;
label.fontColor = '#FFFFFF';
return label;
let randomTR = 360 * Math.random(); // - 180;
if (Math.random() < 0.5) { randomTR *= -1; }
petal['tr'] = randomTR;
return petal;
}
}
......@@ -7,9 +7,33 @@ const res = [
['btn_current_position', "assets/play/btn_current_position.png"],
['progressbar_bg', "assets/play/progressbar_bg.png"],
['progressbar_played', "assets/play/progressbar_played.png"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
// ['text_bg', "assets/play/text_bg.png"],
['btn_ufo_1', "assets/play/btn_ufo_1.png"],
['btn_ufo_2', "assets/play/btn_ufo_2.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 = [
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 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
"types": [
"node"
]
},
"files": [
"src/main.ts",
......
......@@ -91,6 +91,8 @@
"no-trailing-whitespace": false,
"variable-name": false,
"no-string-literal": false,
"no-unused-expression": 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