Commit 3d9785b1 authored by 范雪寒's avatar 范雪寒

feat: 铺界面

parent 3695f7ce
This diff is collapsed.
export let defaultData = {
tittle: {
word: "C",
text: "listen and select the right word you just heard.",
audio: "tittle"
},
showType: "B",
words: [
"aaaa bbbb cccc",
"ccc bbabb cccc",
"eee bbbb cccc",
"dd bbbb cccc",
"xxx bbbb cccc",
"zzzz bbbb cccc",
],
wholeAuido: "bbbb",
audios: [
"aaaa",
"aaaa",
"aaaa",
"aaaa",
"aaaa",
"aaaa",
]
};
\ No newline at end of file
This diff is collapsed.
import {
Game,
TouchSprite,
RandomInt,
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 = [];
// this.data.cubes.forEach((cube) => {
// imgUrlList.push(cube.image.url);
// });
let audioUrlList = [];
// this.data.cubes.forEach((cube) => {
// audioUrlList.push(...(cube.audios.flat(Infinity).filter(val => val !== '')));
// });
// audioUrlList.push(this.data.tittle.audio);
this.preLoadData(imgUrlList, audioUrlList);
}
}
preLoadData(imgUrlList, audioUrlList) {
for (var i = 0; i < imgUrlList.length; ++i) {
this._parent.addUrlToImages(imgUrlList[i]);
}
for (var i = 0; i < audioUrlList.length; ++i) {
this._parent.addUrlToAudioObj(audioUrlList[i]);
}
}
initView() {
// 初始化背景
this.initBg();
// 初始化标题
this.initTittle();
// 初始化中间部分
this.initMiddle();
// 游戏开始
this.gameStart();
}
bg = null;
initBg() {
this.removeChild(this.getChildByName('bg'));
this.getFullScaleXY();
let screenSize = this.getScreenSize();
let defaultSize = this.getDefaultScreenSize();
let bgSized = new TouchSprite();
bgSized.init(this.images.get('Img_bg'));
bgSized.anchorX = 0.5;
bgSized.anchorY = 1;
bgSized.setPosition(this._parent.canvasWidth / 2, this._parent.canvasHeight);
bgSized.setScaleXY(this.getFullScaleXY());
this.addChild(bgSized);
// 背景
let bg = new TouchSprite();
bg.init(this.images.get('Img_bg'))
bg.setPosition(this._parent.canvasWidth / 2, this._parent.canvasHeight / 2);
bg.setScaleXY(this._parent.mapScale);
bg.alpha = 0.5;
bg.setName('bg');
this.addChild(bg);
this.bg = bg;
const bgRect = new ShapeRect();
bgRect.setSize(57, 65);
bgRect.fillColor = '#f8c224';
const sx = this._parent.canvasWidth / this._parent.canvasBaseW;
bgRect.setScaleXY(sx);
bgRect.x = 65 * sx;
bgRect.alpha = 0;
this._parent.renderArr.push(bgRect);
this.bgRect = bgRect;
}
bgRect = null;
getTittleBlockPositionX() {
return this.bgRect.x + 28.5 * this.bgRect.scaleX;
}
initTittle() {
// 标题字母背景
let tittleWordBg = new TouchSprite();
tittleWordBg.init(this.images.get('Img_tittleBg'));
tittleWordBg.setScaleXY(this._parent.mapScale);
tittleWordBg.setPosition(this.getTittleBlockPositionX(), 31 * this._parent.mapScale);
this.addChild(tittleWordBg);
// 标题字母
let tittleWord = new MyLabel();
tittleWord.fontSize = 48;
tittleWord.fontName = 'BerlinSansFBDemi-Bold';
tittleWord.fontColor = '#ab5b22';
tittleWord.text = this.data.tittle.word;
tittleWord.anchorX = 0.5;
tittleWord.anchorY = 0.5;
tittleWord.setPosition(0, 0);
tittleWordBg.addChild(tittleWord);
tittleWord.refreshSize();
// 标题文字
let questionLabel = new MyLabel();
questionLabel.fontSize = 36;
questionLabel.fontName = 'FuturaBT-Bold';
questionLabel.fontColor = '#000000';
questionLabel.text = this.data.tittle.text;
questionLabel.anchorX = 0;
questionLabel.anchorY = 0.5;
questionLabel.setPosition(50, 0);
questionLabel.addTouchBeganListener(() => {
this.onClickTittle();
});
tittleWordBg.addChild(questionLabel);
questionLabel.refreshSize();
}
initMiddle() {
// 创建背景
this.createMiddlebg();
// 创建单词
this.createWords();
// 创建右下角的喇叭
this.createSpeaker();
}
createMiddlebg() {
// 背景
const bookBg = new TouchSprite();
bookBg.init(this.images.get(this.typeDiff('Img_whole_bg_type_A', 'Img_whole_bg_type_B')));
this.bg.addChild(bookBg);
}
createWords() {
const leftPosX = this.typeDiff(-500, -480);
const rightPosX = this.typeDiff(100, 90);
const topPosY = -170;
const middlePosY = 0;
const bottomPosY = this.typeDiff(165, 170);
const positionList = [
[leftPosX, topPosY],
[leftPosX, middlePosY],
[leftPosX, bottomPosY],
[rightPosX, topPosY],
[rightPosX, middlePosY],
[rightPosX, bottomPosY],
];
this.data.words.forEach((word, idx) => {
const questionLabel = new MyLabel();
questionLabel.fontSize = this.typeDiff(48, 54);
questionLabel.fontName = this.typeDiff('CenturyGothic', 'BerlinSansFBDemi-Bold');
questionLabel.fontColor = '#000000';
questionLabel.text = word;
questionLabel.anchorX = 0;
questionLabel.anchorY = 0.5;
questionLabel.setPosition(...positionList[idx]);
questionLabel.addTouchBeganListener(() => {
this.onClickWords(idx);
});
this.bg.addChild(questionLabel);
questionLabel.refreshSize();
});
}
createSpeaker() {
const speaker = new TouchSprite();
speaker.init(this.images.get('Btn_play'));
speaker.setPositionX((this.getScreenSize().width / 2 - 50));
speaker.setPositionY((this.getScreenSize().height / 2 - 50));
this.bg.addChild(speaker);
}
typeDiff(a, b) {
if (this.data.showType === 'A') {
return a;
} else {
return b;
}
}
printCurrentStatus() {
console.log(JSON.stringify(this.status));
}
onClickTittle() {
this._parent.playAudio(this.data.tittle.audio);
}
onClickWords(idx) {
// this._parent.playAudio(this.data.audios[idx]);
}
onClickWinWords(idx) {
}
gameStart() {
this.playIncomeAudio();
}
playIncomeAudio() {
this._parent.playAudio('audio_new_page');
}
}
......@@ -13,7 +13,24 @@
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
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.TTF") ;
}
......@@ -12,6 +12,7 @@ import {debounceTime} from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
import {MyGame} from "./game/MyGame";
......@@ -57,7 +58,7 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft;
canvasTop;
saveKey = 'test_0011';
saveKey = 'ym-2-26';
btnLeft;
......@@ -69,6 +70,8 @@ export class PlayComponent implements OnInit, OnDestroy {
curPic;
game;
@HostListener('window:resize', ['$event'])
onResize(event) {
this.winResizeEventStream.next();
......@@ -86,7 +89,13 @@ export class PlayComponent implements OnInit, OnDestroy {
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();
......@@ -432,10 +441,10 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
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';
// }
}
......@@ -444,8 +453,8 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
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);
}
......@@ -455,11 +464,15 @@ export class PlayComponent implements OnInit, OnDestroy {
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);
// 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
for (let item of this.rawAudios) {
if (item[0] != item[1]) {
// 音效
this.addUrlToAudioObj(item[0], this.rawAudios.get(item[0]), 0.3);
}
}
}
......@@ -491,88 +504,7 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化试图
*/
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();
this.game.initView();
}
lastPage() {
......@@ -620,39 +552,15 @@ export class PlayComponent implements OnInit, OnDestroy {
mapDown(event) {
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;
}
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});
}
......
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"],
['Btn_play', "assets/play/Btn_play.png"],
['Img_bg', "assets/play/Img_bg.png"],
['Img_mask', "assets/play/Img_mask.png"],
['Img_tittleBg', "assets/play/Img_tittleBg.png"],
['Img_whole_bg_type_A', "assets/play/Img_whole_bg_type_A.png"],
['Img_whole_bg_type_B', "assets/play/Img_whole_bg_type_B.png"],
['Img_winBg_type_A', "assets/play/Img_winBg_type_A.png"],
['Img_winBg_type_B', "assets/play/Img_winBg_type_B.png"],
];
......@@ -11,7 +16,7 @@ const res = [
const resAudio = [
['click', "assets/play/music/click.mp3"],
// ['click', "assets/play/music/click.mp3"],
];
......
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