// 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, _g, { 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;