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

feat: 主要在实现滚动条

parent 8a51c964
This diff is collapsed.
...@@ -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,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,10 +189,14 @@ export class MySprite extends Sprite { ...@@ -176,10 +189,14 @@ export class MySprite extends Sprite {
if (this.img) { 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 {
this.ctx.drawImage(this.img, this._offX, this._offY); this.ctx.drawImage(this.img, this._offX, this._offY);
} }
}
} }
...@@ -257,6 +274,13 @@ export class MySprite extends Sprite { ...@@ -257,6 +274,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 +329,6 @@ export class MySprite extends Sprite { ...@@ -305,7 +329,6 @@ export class MySprite extends Sprite {
getBoundingBox() { getBoundingBox() {
const getParentData = (item) => { const getParentData = (item) => {
let px = item.x; let px = item.x;
...@@ -343,11 +366,6 @@ export class MySprite extends Sprite { ...@@ -343,11 +366,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};
} }
...@@ -759,6 +777,7 @@ export class RichText extends Label { ...@@ -759,6 +777,7 @@ export class RichText extends Label {
disH = 30; disH = 30;
offW = 10;
constructor(ctx?: any) { constructor(ctx?: any) {
super(ctx); super(ctx);
...@@ -788,7 +807,7 @@ export class RichText extends Label { ...@@ -788,7 +807,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;
...@@ -1020,7 +1039,7 @@ export class MyAnimation extends MySprite { ...@@ -1020,7 +1039,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 +1128,9 @@ export class MyAnimation extends MySprite { ...@@ -1109,8 +1128,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();
} }
} }
...@@ -1200,7 +1220,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul ...@@ -1200,7 +1220,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
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 +1228,14 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = ...@@ -1208,7 +1228,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);
} }
...@@ -1525,10 +1552,15 @@ export function formatTime(fmt, date) { ...@@ -1525,10 +1552,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 +1603,46 @@ export function jelly(item, time = 0.7) { ...@@ -1571,6 +1603,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 +1744,41 @@ export function shake(item, time = 0.5, callback = null, rate = 1) { ...@@ -1672,5 +1744,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 --------------------
export let defaultData = {
tittle: {
word: "C",
text: "listen and select the right word you just heard.",
audio: "tittle"
},
audio: 'total_audio',
questionsTittle: 'A pig and a bin',
tittleAudio: 'total_audio',
questions: [{
questionTittle: '1',
words: "Let 's put the toys into the box. box. box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '2',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '3',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '3',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '3',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '3',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '3',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '3',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '3',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '4',
words: "Let 's go.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '5',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '6',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '7',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '8',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}, {
questionTittle: '9',
words: "Let 's put the toys into the box.",
audio: 'question_1',
blocks: [{
idx: 5,
type: 'red',
audio: 'the',
img: 'cave'
}, {
idx: 6,
type: 'bold'
}],
}]
};
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
...@@ -11,9 +11,47 @@ ...@@ -11,9 +11,47 @@
@font-face
{
font-family: 'MMTextBook-Bold';
src: url("../../assets/font/MMTextBook-Bold.otf") ;
}
@font-face
{
font-family: 'MMTextBook';
src: url("../../assets/font/MMTextBook.otf") ;
}
@font-face @font-face
{ {
font-family: 'BRLNSDB'; font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/BRLNSDB.TTF") ;
} }
@font-face
{
font-family: 'BerlinSansFBDemi-Bold';
src: url("../../assets/font/BerlinSansFBDemi-Bold.TTF") ;
}
@font-face
{
font-family: 'FuturaBT-Bold';
src: url("../../assets/font/FuturaBT-Bold.TTF") ;
}
@font-face
{
font-family: 'CenturyGothic';
src: url("../../assets/font/CenturyGothic.TTF") ;
}
@font-face
{
font-family: 'CenturyGothic-Bold';
src: url("../../assets/font/CenturyGothic-Bold.TTF") ;
}
<div class="game-container" #wrap> <div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
</div> </div>
<span style="font-family: MMTextBook-Bold">&nbsp;</span>
<span style="font-family: MMTextBook">&nbsp;</span>
\ No newline at end of file
...@@ -12,6 +12,7 @@ import {debounceTime} from 'rxjs/operators'; ...@@ -12,6 +12,7 @@ import {debounceTime} from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import {MyGame} from "./game/MyGame";
...@@ -57,7 +58,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,7 +58,7 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'ym-2-32';
btnLeft; btnLeft;
...@@ -69,6 +70,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -69,6 +70,8 @@ export class PlayComponent implements OnInit, OnDestroy {
curPic; curPic;
game;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
...@@ -86,7 +89,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -86,7 +89,13 @@ export class PlayComponent implements OnInit, OnDestroy {
if (data && typeof data == 'object') { if (data && typeof data == 'object') {
this.data = data; this.data = data;
} }
// console.log('data:' , data);
this.game = new MyGame(this);
this.game.initData({
images: this.images,
data: this.data,
});
// 初始化 各事件监听 // 初始化 各事件监听
this.initListener(); this.initListener();
...@@ -432,10 +441,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -432,10 +441,10 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initDefaultData() { initDefaultData() {
if (!this.data.pic_url) { // if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg'; // this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg'; // this.data.pic_url_2 = 'assets/play/default/pic.jpg';
} // }
} }
...@@ -444,8 +453,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -444,8 +453,8 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initImg() { initImg() {
this.addUrlToImages(this.data.pic_url); // this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2); // this.addUrlToImages(this.data.pic_url_2);
} }
...@@ -455,11 +464,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -455,11 +464,15 @@ export class PlayComponent implements OnInit, OnDestroy {
initAudio() { initAudio() {
// 音频资源 // 音频资源
this.addUrlToAudioObj(this.data.audio_url); // this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2); // this.addUrlToAudioObj(this.data.audio_url_2);
for (let item of this.rawAudios) {
if (item[0] != item[1]) {
// 音效 // 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); this.addUrlToAudioObj(item[0], this.rawAudios.get(item[0]), 0.3);
}
}
} }
...@@ -491,88 +504,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -491,88 +504,7 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化试图 * 初始化试图
*/ */
initView() { initView() {
this.game.initView();
this.initPic();
this.initBottomPart();
}
initBottomPart() {
const btnLeft = new MySprite();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.setScaleXY(this.mapScale);
this.renderArr.push(btnLeft);
this.btnLeft = btnLeft;
const btnRight = new MySprite();
btnRight.init(this.images.get('btn_right'));
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
this.renderArr.push(btnRight);
this.btnRight = btnRight;
}
initPic() {
const maxW = this.canvasWidth * 0.7;
const pic1 = new MySprite();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
this.renderArr.push(pic1);
this.pic1 = pic1;
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1);
const pic2 = new MySprite();
pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
this.renderArr.push(pic2);
this.pic2 = pic2;
this.curPic = pic1;
}
btnLeftClicked() {
this.lastPage();
}
btnRightClicked() {
this.nextPage();
} }
lastPage() { lastPage() {
...@@ -620,39 +552,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -620,39 +552,15 @@ export class PlayComponent implements OnInit, OnDestroy {
mapDown(event) { mapDown(event) {
this.game._onTouchBegan({x:this.mx,y:this.my});
if (!this.canTouch) {
return;
}
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
return;
}
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
return;
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return;
}
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
return;
}
} }
mapMove(event) { mapMove(event) {
this.game._onTouchMove({x:this.mx,y:this.my});
} }
mapUp(event) { mapUp(event) {
this.game._onTouchEnd({x:this.mx,y:this.my});
} }
......
const res = [ const res = [
['Img_tittleBg', "assets/play/Img_tittleBg.png"],
// ['bg', "assets/play/bg.jpg"], ['Img_tittle_bg', "assets/play/Img_tittle_bg.png"],
['btn_left', "assets/play/btn_left.png"], ['Img_bg', "assets/play/Img_bg.png"],
['btn_right', "assets/play/btn_right.png"], ['Img_bg_blue', "assets/play/Img_bg_blue.png"],
// ['text_bg', "assets/play/text_bg.png"],
['Btn_pause', "assets/play/Btn_pause.png"],
['Btn_play', "assets/play/Btn_play.png"],
['Btn_s_pause', "assets/play/Btn_s_pause.png"],
['Btn_s_play', "assets/play/Btn_s_play.png"],
['Img_line', "assets/play/Img_line.png"],
['Img_white', "assets/play/Img_white.jpg"],
['Img_scroll_bg', "assets/play/Img_scroll_bg.png"],
['Img_scroll_bar', "assets/play/Img_scroll_bar.png"],
]; ];
const resAudio = [ const resAudio = [
['audio_new_page', "assets/play/audio_new_page.mp3"],
['click', "assets/play/music/click.mp3"],
['into', "assets/play/default/into.mp3"],
['let', "assets/play/default/let.mp3"],
['put', "assets/play/default/put.mp3"],
['the', "assets/play/default/the.mp3"],
['tittle', "assets/play/default/tittle.mp3"],
['question_1', "assets/play/default/question_1.mp3"],
['total_audio', "assets/play/default/total_audio.mp3"],
]; ];
export {res, resAudio}; export { res, resAudio };
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