301 lines
7.4 KiB
JavaScript
301 lines
7.4 KiB
JavaScript
// import frameData from './frameData';
|
|
import layoutData from './layout';
|
|
import createLayout from './createView';
|
|
// import maskCreater from './maskCreater'; //mask creater
|
|
import { gsap } from "gsap";
|
|
import decomp from 'poly-decomp';
|
|
// import utils from '@/utils/index.js'
|
|
// import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
|
|
// import Soul from './plugins/ScrollContainer'; //app scroll plugin module
|
|
|
|
class layout {
|
|
constructor() {
|
|
this.filterMatrix = new createjs.ColorMatrix().adjustSaturation(-200);
|
|
|
|
// 注册路径插件
|
|
// gsap.registerPlugin(MotionPathPlugin);
|
|
}
|
|
|
|
init() {
|
|
//update btns position by viewport
|
|
// this.updatePosByViewport();
|
|
|
|
return this
|
|
}
|
|
|
|
upgrate(GAME, VIEW, ANI) {
|
|
this.game = GAME;
|
|
this.view = VIEW;
|
|
this.ani = ANI;
|
|
|
|
return this
|
|
}
|
|
|
|
//根据页面更新适配内容
|
|
updatePosByViewport() {
|
|
// console.log(this.game.scene.oHeight)
|
|
if (this.game.oHeight <= 1181 / 2) {
|
|
if (this.game.scene.oHeight > 1110 / 2) {
|
|
//iphone 5 5s
|
|
console.log('iphone 5 5s')
|
|
this.game_score_text.y += 140;
|
|
this.game_time_bar.y += 140;
|
|
this.game_score_bar.y += 140;
|
|
this.game_time_text.y += 140;
|
|
|
|
} else {
|
|
//suitable huawei
|
|
console.log('suitable huawei')
|
|
this.game_score_text.y += 220;
|
|
this.game_time_bar.y += 220;
|
|
this.game_score_bar.y += 220;
|
|
this.game_time_text.y += 220;
|
|
|
|
}
|
|
} else if (this.game.scene.oHeight <= 673) {
|
|
console.log('iphone8p')
|
|
this.game_score_text.y += 120;
|
|
this.game_time_bar.y += 120;
|
|
this.game_score_bar.y += 120;
|
|
this.game_time_text.y += 120;
|
|
|
|
} else {
|
|
console.log('适配机型x')
|
|
}
|
|
}
|
|
|
|
createBitmap(name) {
|
|
let img = this.game.mainLoader && this.game.mainLoader.getResult(name);
|
|
return new createjs.Bitmap(img);
|
|
}
|
|
|
|
//创建loading页
|
|
loading(GAME) {
|
|
this.game = GAME;
|
|
this.loadingCacheContainer = new createjs.Container();
|
|
this.loadingAnimation = {};
|
|
//create layout
|
|
for (let i in layoutData['loading']) {
|
|
let item = layoutData['loading'][i];
|
|
item.layout = this;
|
|
item.game = this.game;
|
|
item.loader = this.game.loadingLoader;
|
|
item.container = this.game.stage.loadingContainer;
|
|
item.cacheContainer = this.loadingCacheContainer;
|
|
|
|
if (item.singleSprite && item.singleSprite.visible) {
|
|
item.singleSprite.parent = this.loadingSprite;
|
|
}
|
|
|
|
createLayout(item);
|
|
}
|
|
|
|
gsap.to(this.loading_snow, { rotation: 360, ease: 'none', repeat: -1, duration: 5 })
|
|
|
|
// 创建粒子动画
|
|
this.createLoadingParticle();
|
|
|
|
// console.log(this.loading_bg)
|
|
|
|
return this
|
|
}
|
|
|
|
//隐藏loading页面
|
|
hideLoading() {
|
|
//create story index
|
|
gsap.to(this.game.stage.loadingContainer, { alpha: 0, duration: 0.65, })
|
|
gsap.to([this.game.stage.mainContainer, this.gamePage], { alpha: 1, duration: 0.65 });
|
|
}
|
|
|
|
// 创建游戏页
|
|
createGamePage(game) {
|
|
this.game = game;
|
|
this.gamePage = new createjs.Container().set({ alpha: 0 });
|
|
this.game.stage.mainContainer.addChild(this.gamePage);
|
|
|
|
let bottom = this.createBitmap('bottom_ban').set({ y: 560 });
|
|
let top = this.createBitmap('top');
|
|
// 添加推板
|
|
let pusher = this.createBitmap('pusher').set({
|
|
x: 142,
|
|
y: 683
|
|
});
|
|
|
|
// console.log(pusher)
|
|
|
|
gsap.to(pusher, { y: '-=202', yoyo: true, repeat: -1, ease: 'none', duration: 5 })
|
|
|
|
// 添加到
|
|
this.gamePage.addChild(bottom, pusher, top);
|
|
|
|
|
|
// Create a concave polygon
|
|
var _g = [
|
|
// 顶点坐标
|
|
{ x: 0, y: 0 },
|
|
{ x: 0, y: 956 },
|
|
{ x: 141, y: 881 },
|
|
{ x: 206, y: 683 },
|
|
{ x: 548, y: 683 },
|
|
{ x: 614, y: 881 },
|
|
{ x: 750, y: 956 },
|
|
{ x: 750, y: 0 },
|
|
];
|
|
var concavePolygon = [
|
|
// 顶点坐标
|
|
[0, 0],
|
|
[0, 956],
|
|
[141, 881],
|
|
[206, 683],
|
|
[548, 683],
|
|
[614, 881],
|
|
[750, 956],
|
|
[750, 0],
|
|
];
|
|
|
|
// Make sure the polygon has counter-clockwise winding. Skip this step if you know it's already counter-clockwise.
|
|
decomp.makeCCW(concavePolygon);
|
|
|
|
|
|
var convexPolygons = decomp.quickDecomp(concavePolygon);
|
|
// ==> [ [[1,0],[1,1],[0.5,0.5]], [[0.5,0.5],[-1,1],[-1,0],[1,0]] ]
|
|
|
|
// // Decompose using the slow (but optimal) algorithm
|
|
// var convexPolygons = decomp.decomp(concavePolygon);
|
|
|
|
convexPolygons.forEach((item) => {
|
|
item.forEach((t, i) => {
|
|
item.push({
|
|
x: t[0],
|
|
y: t[1]
|
|
})
|
|
if (i == (item.length / 2) - 1) {
|
|
item.splice(0, item.length / 2)
|
|
}
|
|
})
|
|
})
|
|
|
|
console.log(convexPolygons)
|
|
// 添加ground
|
|
this.game.Composite.add(this.game.myWorld,
|
|
this.game.Bodies.fromVertices(
|
|
window.innerWidth / 2, window.innerHeight / 2,
|
|
convexPolygons,
|
|
{
|
|
isStatic: true,
|
|
scale: {
|
|
screenX: 0.5,
|
|
screenY: 0.5,
|
|
},
|
|
render: {
|
|
fillStyle: 'rgba(39,7,238,0.25)'
|
|
}
|
|
},
|
|
|
|
)
|
|
);
|
|
|
|
//
|
|
// let bounds = pusher.getBounds();
|
|
// pusher.body = this.game.Bodies.trapezoid(
|
|
// pusher.x,
|
|
// pusher.y,
|
|
// bounds.width,
|
|
// bounds.height,
|
|
// 1,
|
|
// { isStatic: true }
|
|
// );
|
|
// this.game.Composite.add(this.myWorld, [pusher.body]);
|
|
}
|
|
|
|
// 生成硬币
|
|
createCoin() {
|
|
let coinImg = this.game.mainLoader.getResult('coin');
|
|
let coin = new createjs.Bitmap(coinImg);
|
|
}
|
|
|
|
// loading 粒子制造机
|
|
createLoadingParticle() {
|
|
const container = new createjs.Container();
|
|
|
|
const arr = [];
|
|
for (let i = 0; i < (window.deviceInfo.system == 'IOS' ? 200 : 250); i++) {
|
|
const scale = Math.random() * 0.35 + 0.5;
|
|
const name = `snow_${this.game.utils.rangeRandom(1, 20)}`;
|
|
const sprite = this.createBitmap(this.loadingSprite.spriteSheet, name).set({
|
|
x: Math.random() * 750 - 30,
|
|
y: Math.random() * 1624,
|
|
ox: Math.random() * 750,
|
|
oy: -100,
|
|
// regX:14,
|
|
// regY:14,
|
|
scaleX: scale,
|
|
scaleY: scale,
|
|
speedX: (Math.random() > 0.5 ? 1 : -1) * (Math.random() * 0.25 + 0.25),
|
|
speedY: Math.random() * 1 + 0.5,
|
|
alpha: Math.random() * 0.3 + 0.5
|
|
})
|
|
|
|
arr.push(sprite)
|
|
}
|
|
// const mask = new createjs.Shape().setTransform(0, 0, 1, 1);
|
|
// mask.graphics.f('#000000').drawRoundRect(0, 0, 750, 1300, 0).es();
|
|
// contianer.mask = mask;
|
|
// contianer.compositeOperation = 'darker';
|
|
// arr.push(mask)
|
|
container.children = arr;
|
|
|
|
this.loadingPrarticleContainer = container;
|
|
this.game.stage.loadingContainer.addChild(container);
|
|
return container
|
|
}
|
|
|
|
//粒子动画更新
|
|
update() {
|
|
if (!this.game) return
|
|
if (this.game.scene == 1 && this.loadingPrarticleContainer) {
|
|
if (this.loadingPrarticleContainer.alpha == 0) {
|
|
// console.log('2=>1')
|
|
this.loadingPrarticleContainer.alpha = 1;
|
|
}
|
|
if (this.prarticleContainer && this.prarticleContainer.alpha == 1) {
|
|
this.prarticleContainer.alpha = 0;
|
|
}
|
|
this.loadingPrarticleContainer.children.forEach((item, index) => {
|
|
|
|
if (item.x < -30 || item.x > 800 || item.y > 1624) {
|
|
item.y = item.oy;
|
|
item.x = item.ox;
|
|
}
|
|
item.x += item.speedX
|
|
item.y += item.speedY
|
|
|
|
})
|
|
}
|
|
if (this.game.scene == 2 && this.prarticleContainer) {
|
|
if (this.prarticleContainer.alpha == 0) {
|
|
// console.log('1=>2')
|
|
this.prarticleContainer.alpha = 1;
|
|
}
|
|
|
|
if (this.loadingPrarticleContainer.alpha == 1) {
|
|
this.loadingPrarticleContainer.alpha = 0;
|
|
} //题目一 粒子运动
|
|
this.prarticleContainer.children.forEach((item, index) => {
|
|
|
|
if (item.x < -30 || item.x > 800 || item.y > 1400) {
|
|
item.y = item.oy;
|
|
item.x = item.ox;
|
|
item.rotation = 0;
|
|
}
|
|
item.x += item.speedX * this.game.globalSpeed
|
|
item.y += item.speedY * this.game.globalSpeed
|
|
item.rotation += item.speedR * this.game.globalSpeed
|
|
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
module.exports = layout; |