Commit f22e8a60 authored by 范雪寒's avatar 范雪寒

feat: 素材准备

parent 429b4c9c
This diff is collapsed.
This diff is collapsed.
import {
Game,
TouchSprite,
RandomInt,
Between,
MyLabel,
blinkItem,
stopBlinkItem,
asyncDelayTime,
asyncTweenChange,
} from './Game';
import {
Label,
jelly,
showPopParticle,
tweenChange,
rotateItem,
scaleItem,
delayCall,
hideItem,
showItem,
moveItem,
shake,
ShapeRect,
} from './../Unit';
import TWEEN from '@tweenjs/tween.js';
import { defaultData } from './DefaultData';
export class MyGame extends Game {
images = null;
data = null;
status = null;
initData(data) {
this.images = data.images;
this.status = {};
if (!data.data || Object.is(data.data, {}) || !data.data.tittle) {
this.data = defaultData;
} else {
this.data = data.data;
let imgUrlList = [];
let audioUrlList = [];
// imgUrlList.push(...this.data.bottomLineCards.map(card => card.img));
// audioUrlList.push(this.data.tittle.audio);
imgUrlList = imgUrlList.filter((data) => data != null && data != '');
audioUrlList = audioUrlList.filter((data) => data != null && data != '');
this.preLoadData(imgUrlList, audioUrlList);
}
}
preLoadData(imgUrlList, audioUrlList) {
imgUrlList.forEach((data) => {
this._parent.addUrlToImages(data);
});
audioUrlList.forEach((data) => {
this._parent.addUrlToAudioObj(data);
});
}
initView() {
// 初始化标题
this.initTittle();
// 初始化中间部分
this.initMiddle();
}
initBg() {
}
initTittle() {
console.log('汪汪汪 ')
const titleBg = new TouchSprite();
titleBg.init(this.images.get('img_title_bg'));
this.addChild(titleBg);
// titleBg.x = this.getFullScaleXY();
// titleBg.y = titleBg.height / 2 * this.mapScale;
// titleBg.setScaleXY(this.mapScale);
// this.renderArr.push(titleBg);
// const titleLetter = new Label(this.ctx);
// titleLetter.x = titleBg.width * 1 / 8;
// titleLetter.y = 0;
// titleLetter.fontSize = 48;
// titleLetter.fontColor = "#facf46";
// titleLetter.fontName = 'BerlinSansFBDemi';
// titleLetter.anchorX = 0;
// titleLetter.anchorY = 0.5;
// titleLetter.text = this.data.titleLetter;
// titleBg.addChild(titleLetter);
// const titleLabel = new Label(this.ctx);
// titleLabel.x = titleBg.width * 5 / 8;
// titleLabel.y = 0;
// titleLabel.fontSize = 36;
// titleLabel.fontColor = "#000000";
// titleLabel.fontName = 'FuturaStd';
// titleLabel.anchorX = 0;
// titleLabel.anchorY = 0.5;
// titleLabel.text = this.data.title;
// titleBg.addChild(titleLabel);
}
initMiddle() {
// const bg = new MySprite(this.ctx, this.images.get('img_grey_bg'));
// bg.x = this.canvasWidth / 2;
// bg.y = this.canvasHeight / 2;
// bg.setScaleXY(this.mapScale);
// bg.alpha = 0.5;
// this.renderArr.push(bg);
// this.bg = bg;
}
}
...@@ -9,11 +9,27 @@ ...@@ -9,11 +9,27 @@
} }
@font-face
{
font-family: 'BerlinSansFBDemi';
src: url("../../assets/font/BerlinSansFBDemi-Bold.TTF") ;
}
@font-face
{
font-family: 'FuturaStd';
src: url("../../assets/font/FuturaStd-Medium.otf") ;
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../assets/font/GOTHICB_1.TTF") ;
}
@font-face @font-face
{ {
font-family: 'BRLNSDB'; font-family: 'ahronbd';
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/ahronbd-1.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="position: absolute; top: 0px; font-family: BerlinSansFBDemi">&nbsp;</span>
<span style="position: absolute; top: 0px; font-family: FuturaStd">&nbsp;</span>
<span style="position: absolute; top: 0px; font-family: GOTHICB">&nbsp;</span>
<span style="position: absolute; top: 0px; font-family: ahronbd">&nbsp;</span>
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, MySprite, tweenChange, Label,
MySprite, tweenChange,
} from './Unit'; } 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 { MyGame } from "./game/MyGame";
@Component({ @Component({
selector: 'app-play', selector: 'app-play',
templateUrl: './play.component.html', templateUrl: './play.component.html',
...@@ -16,8 +23,8 @@ import TWEEN from '@tweenjs/tween.js'; ...@@ -16,8 +23,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;
...@@ -33,7 +40,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -33,7 +40,6 @@ export class PlayComponent implements OnInit, OnDestroy {
mx; // 点击x坐标 mx; // 点击x坐标
my; // 点击y坐标 my; // 点击y坐标
// 资源 // 资源
rawImages = new Map(res); rawImages = new Map(res);
rawAudios = new Map(resAudio); rawAudios = new Map(resAudio);
...@@ -51,26 +57,44 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -51,26 +57,44 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_001211'; saveKey = 'test_00111';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true; canTouch = true;
curPic;
game;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
} }
ngOnInit() { ngOnInit() {
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') {
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();
...@@ -92,16 +116,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -92,16 +116,6 @@ export class PlayComponent implements OnInit, OnDestroy {
ngOnDestroy() { ngOnDestroy() {
window['curCtx'] = null; window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId); window.cancelAnimationFrame(this.animationId);
this.cleanAudio();
}
cleanAudio() {
if (this.audioObj) {
for (const key in this.audioObj) {
this.audioObj[key].pause();
}
}
} }
...@@ -109,9 +123,27 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -109,9 +123,27 @@ export class PlayComponent implements OnInit, OnDestroy {
// 预加载资源 // 预加载资源
this.loadResources().then(() => { this.loadResources().then(() => {
this.addServerListener();
window["air"].hideAirClassLoading(this.saveKey, this.data); window["air"].hideAirClassLoading(this.saveKey, this.data);
this.init();
this.update(); });
}
start() {
console.log(' in start');
this.init();
this.update();
}
addServerListener() {
const c = (<any>window).courseware;
if (!c || !c.onEvent) {
return;
}
c.onEvent('course-in-screen', (data, next) => { // 学生端 初始化时调用
this.start();
next();
}); });
} }
...@@ -129,6 +161,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -129,6 +161,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth; this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight; this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
this.ctx = this.canvas.nativeElement.getContext('2d'); this.ctx = this.canvas.nativeElement.getContext('2d');
this.canvas.nativeElement.width = this.canvasWidth; this.canvas.nativeElement.width = this.canvasWidth;
this.canvas.nativeElement.height = this.canvasHeight; this.canvas.nativeElement.height = this.canvasHeight;
...@@ -136,6 +169,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -136,6 +169,11 @@ export class PlayComponent implements OnInit, OnDestroy {
window['curCtx'] = this.ctx; window['curCtx'] = this.ctx;
} }
updateItem(item) { updateItem(item) {
if (item) { if (item) {
item.update(); item.update();
...@@ -151,6 +189,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -151,6 +189,12 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
initListener() { initListener() {
this.winResizeEventStream this.winResizeEventStream
...@@ -159,6 +203,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -159,6 +203,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderAfterResize(); this.renderAfterResize();
}); });
// --------------------------------------------- // ---------------------------------------------
const setParentOffset = () => { const setParentOffset = () => {
const rect = this.canvas.nativeElement.getBoundingClientRect(); const rect = this.canvas.nativeElement.getBoundingClientRect();
...@@ -182,6 +227,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -182,6 +227,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}; };
// --------------------------------------------- // ---------------------------------------------
let firstTouch = true; let firstTouch = true;
const touchDownFunc = (e) => { const touchDownFunc = (e) => {
...@@ -218,6 +264,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -218,6 +264,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.mapUp(e); this.mapUp(e);
}; };
const element = this.canvas.nativeElement; const element = this.canvas.nativeElement;
const addTouchListener = () => { const addTouchListener = () => {
...@@ -248,6 +295,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -248,6 +295,7 @@ export class PlayComponent implements OnInit, OnDestroy {
addTouchListener(); addTouchListener();
} }
playAudio(key, now = false, callback = null) { playAudio(key, now = false, callback = null) {
const audio = this.audioObj[key]; const audio = this.audioObj[key];
...@@ -266,6 +314,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -266,6 +314,8 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
loadResources() { loadResources() {
const pr = []; const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片 this.rawImages.forEach((value, key) => {// 预加载图片
...@@ -305,8 +355,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -305,8 +355,9 @@ export class PlayComponent implements OnInit, OnDestroy {
preloadAudio(url) { preloadAudio(url) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const audio = new Audio(); const audio = new Audio();
resolve({})
audio.oncanplay = (a) => { audio.oncanplay = (a) => {
resolve(null); //resolve();
}; };
audio.onerror = () => { audio.onerror = () => {
reject(); reject();
...@@ -316,12 +367,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -316,12 +367,17 @@ export class PlayComponent implements OnInit, OnDestroy {
}); });
} }
renderAfterResize() { renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight; this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init(); this.init();
} }
checkClickTarget(target) { checkClickTarget(target) {
const rect = target.getBoundingBox(); const rect = target.getBoundingBox();
...@@ -354,6 +410,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -354,6 +410,10 @@ export class PlayComponent implements OnInit, OnDestroy {
return false; return false;
} }
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;
...@@ -383,42 +443,64 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -383,42 +443,64 @@ export class PlayComponent implements OnInit, OnDestroy {
this.rawImages.set(url, url); this.rawImages.set(url, url);
} }
// ======================================================编写区域========================================================================== // ======================================================编写区域==========================================================================
/** /**
* 添加默认数据 便于无数据时的展示 * 添加默认数据 便于无数据时的展示
*/ */
initDefaultData() { initDefaultData() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg'; // if (!this.data.pic_url) {
this.data.pic_url_2 = 'assets/play/default/pic.jpg'; // this.data.pic_url = 'assets/play/default/pic.jpg';
} // this.data.pic_url_2 = 'assets/play/default/pic.jpg';
// }
} }
/** /**
* 添加预加载图片 * 添加预加载图片
*/ */
initImg() { initImg() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2); // this.addUrlToImages(this.data.pic_url);
// this.addUrlToImages(this.data.pic_url_2);
} }
/** /**
* 添加预加载音频 * 添加预加载音频
*/ */
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(item[0], this.rawAudios.get(item[0]), 0.3);
}
}
// 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
} }
/** /**
* 初始化数据 * 初始化数据
*/ */
initData() { initData() {
const sx = this.canvasWidth / this.canvasBaseW; const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH; const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy); const s = Math.min(sx, sy);
...@@ -427,36 +509,82 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -427,36 +509,82 @@ export class PlayComponent implements OnInit, OnDestroy {
// this.mapScale = sx; // this.mapScale = sx;
// this.mapScale = sy; // this.mapScale = sy;
this.renderArr = []; this.renderArr = [];
} }
/** /**
* 初始化试图 * 初始化试图
*/ */
initView() { initView() {
this.game._initView();
}
lastPage() {
if (this.curPic == this.pic1) {
return;
}
this.canTouch = false;
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;
});
} }
mapDown(event) { nextPage() {
if (!this.canTouch) {
if (this.curPic == this.pic2) {
return; return;
} }
// if ( this.checkClickTarget(this.btnLeft) ) { this.canTouch = false;
// this.btnLeftClicked();
// return; 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;
});
} }
mapMove(event) { pic1Clicked() {
this.playAudio(this.data.audio_url);
}
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
} }
mapUp(event) {
mapDown(event) {
this.game._onTouchBegan({ x: this.mx, y: this.my });
}
mapMove(event) {
this.game._onTouchMove({ x: this.mx, y: this.my });
}
mapUp(event) {
this.game._onTouchEnd({ x: this.mx, y: this.my });
} }
update() { update() {
// ---------------------------------------------------------- // ----------------------------------------------------------
this.animationId = window.requestAnimationFrame(this.update.bind(this)); this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容 // 清除画布内容
...@@ -465,6 +593,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -465,6 +593,13 @@ export class PlayComponent implements OnInit, OnDestroy {
TWEEN.update(); TWEEN.update();
// ---------------------------------------------------------- // ----------------------------------------------------------
this.updateArr(this.renderArr); this.updateArr(this.renderArr);
} }
} }
const res = [ const res = [
['btn_close', 'assets/play/btn_close.png'],
// ['bg', "assets/play/bg.jpg"], ['img_grey_bg', 'assets/play/img_grey_bg.png'],
['btn_left', "assets/play/btn_left.png"], ['img_line_grey', 'assets/play/img_line_grey.png'],
['btn_right', "assets/play/btn_right.png"], ['img_title_bg', 'assets/play/img_title_bg.png'],
// ['text_bg', "assets/play/text_bg.png"], ['btn_pause', 'assets/play/btn_pause.png'],
['img_group_bg_1', 'assets/play/img_group_bg_1.png'],
['img_line_purple', 'assets/play/img_line_purple.png'],
['img_white_bg', 'assets/play/img_white_bg.png'],
['btn_play', 'assets/play/btn_play.png'],
['img_group_bg_2', 'assets/play/img_group_bg_2.png'],
['img_line_red', 'assets/play/img_line_red.png'],
['img_win_bg', 'assets/play/img_win_bg.png'],
['btn_switch', 'assets/play/btn_switch.png'],
['img_line_black', 'assets/play/img_line_black.png'],
['img_oval_bg', 'assets/play/img_oval_bg.png '],
]; ];
const resAudio = [ const resAudio = [
// ['click', "assets/play/music/click.mp3"],
['click', "assets/play/music/click.mp3"],
]; ];
export {res, resAudio}; export { res, resAudio };
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<!-- <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">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script> <script type="text/javascript" src="//staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
</head> </head>
<body> <body>
......
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