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 @@
}
@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-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
font-family: 'ahronbd';
src: url("../../assets/font/ahronbd-1.ttf") ;
}
<div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas>
</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 {
Label, MySprite, tweenChange,
Label,
MySprite, tweenChange,
} from './Unit';
import {res, resAudio} from './resources';
import { res, resAudio } from './resources';
import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
import { MyGame } from "./game/MyGame";
@Component({
selector: 'app-play',
templateUrl: './play.component.html',
......@@ -16,8 +23,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;
......@@ -33,7 +40,6 @@ export class PlayComponent implements OnInit, OnDestroy {
mx; // 点击x坐标
my; // 点击y坐标
// 资源
rawImages = new Map(res);
rawAudios = new Map(resAudio);
......@@ -51,26 +57,44 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft;
canvasTop;
saveKey = 'test_001211';
saveKey = 'test_00111';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true;
curPic;
game;
@HostListener('window:resize', ['$event'])
onResize(event) {
this.winResizeEventStream.next();
}
ngOnInit() {
this.data = {};
// 获取数据
const getData = (<any> window).courseware.getData;
const getData = (<any>window).courseware.getData;
getData((data) => {
if (data && typeof data == 'object') {
this.data = data;
}
// console.log('data:' , data);
this.game = new MyGame(this);
this.game.initData({
images: this.images,
data: this.data,
});
// 初始化 各事件监听
this.initListener();
......@@ -92,16 +116,6 @@ export class PlayComponent implements OnInit, OnDestroy {
ngOnDestroy() {
window['curCtx'] = null;
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 {
// 预加载资源
this.loadResources().then(() => {
this.addServerListener();
window["air"].hideAirClassLoading(this.saveKey, this.data);
});
}
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 {
this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
this.ctx = this.canvas.nativeElement.getContext('2d');
this.canvas.nativeElement.width = this.canvasWidth;
this.canvas.nativeElement.height = this.canvasHeight;
......@@ -136,6 +169,11 @@ export class PlayComponent implements OnInit, OnDestroy {
window['curCtx'] = this.ctx;
}
updateItem(item) {
if (item) {
item.update();
......@@ -151,6 +189,12 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
initListener() {
this.winResizeEventStream
......@@ -159,6 +203,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderAfterResize();
});
// ---------------------------------------------
const setParentOffset = () => {
const rect = this.canvas.nativeElement.getBoundingClientRect();
......@@ -182,6 +227,7 @@ export class PlayComponent implements OnInit, OnDestroy {
};
// ---------------------------------------------
let firstTouch = true;
const touchDownFunc = (e) => {
......@@ -218,6 +264,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.mapUp(e);
};
const element = this.canvas.nativeElement;
const addTouchListener = () => {
......@@ -248,6 +295,7 @@ export class PlayComponent implements OnInit, OnDestroy {
addTouchListener();
}
playAudio(key, now = false, callback = null) {
const audio = this.audioObj[key];
......@@ -266,6 +314,8 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
loadResources() {
const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片
......@@ -305,8 +355,9 @@ export class PlayComponent implements OnInit, OnDestroy {
preloadAudio(url) {
return new Promise((resolve, reject) => {
const audio = new Audio();
resolve({})
audio.oncanplay = (a) => {
resolve(null);
//resolve();
};
audio.onerror = () => {
reject();
......@@ -316,12 +367,17 @@ export class PlayComponent implements OnInit, OnDestroy {
});
}
renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
}
checkClickTarget(target) {
const rect = target.getBoundingBox();
......@@ -354,6 +410,10 @@ export class PlayComponent implements OnInit, OnDestroy {
return false;
}
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
const audioObj = this.audioObj;
......@@ -383,42 +443,64 @@ export class PlayComponent implements OnInit, OnDestroy {
this.rawImages.set(url, url);
}
// ======================================================编写区域==========================================================================
/**
* 添加默认数据 便于无数据时的展示
*/
initDefaultData() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
}
// if (!this.data.pic_url) {
// this.data.pic_url = 'assets/play/default/pic.jpg';
// this.data.pic_url_2 = 'assets/play/default/pic.jpg';
// }
}
/**
* 添加预加载图片
*/
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() {
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// this.addUrlToAudioObj(this.data.audio_url);
// 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);
}
}
}
/**
* 初始化数据
*/
initData() {
const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy);
......@@ -427,36 +509,82 @@ export class PlayComponent implements OnInit, OnDestroy {
// this.mapScale = sx;
// this.mapScale = sy;
this.renderArr = [];
}
/**
* 初始化试图
*/
initView() {
this.game._initView();
}
lastPage() {
if (this.curPic == this.pic1) {
return;
}
mapDown(event) {
if (!this.canTouch) {
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;
});
}
nextPage() {
if (this.curPic == this.pic2) {
return;
}
// if ( this.checkClickTarget(this.btnLeft) ) {
// this.btnLeftClicked();
// 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.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() {
// ----------------------------------------------------------
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
......@@ -465,6 +593,13 @@ export class PlayComponent implements OnInit, OnDestroy {
TWEEN.update();
// ----------------------------------------------------------
this.updateArr(this.renderArr);
}
}
const res = [
// ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
// ['text_bg', "assets/play/text_bg.png"],
['btn_close', 'assets/play/btn_close.png'],
['img_grey_bg', 'assets/play/img_grey_bg.png'],
['img_line_grey', 'assets/play/img_line_grey.png'],
['img_title_bg', 'assets/play/img_title_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 = [
['click', "assets/play/music/click.mp3"],
// ['click', "assets/play/music/click.mp3"],
];
export {res, resAudio};
export { res, resAudio };
......@@ -7,7 +7,7 @@
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<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