diff --git a/package.json b/package.json index 9d87972..8a5c03e 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "jsmpeg": "^1.0.0", "matter-js": "^0.18.0", "meshline": "^2.0.3", + "poly-decomp": "^0.3.0", "qrcode": "^1.4.4", "snapsvg-cjs": "^0.0.6", "stats.js": "^0.17.0", @@ -105,4 +106,4 @@ "not dead", "not ie <= 8" ] -} +} \ No newline at end of file diff --git a/src/assets/images/push-coin/bottom_ban.png b/src/assets/images/push-coin/bottom_ban.png new file mode 100644 index 0000000..c006aed Binary files /dev/null and b/src/assets/images/push-coin/bottom_ban.png differ diff --git a/src/assets/images/push-coin/coin.png b/src/assets/images/push-coin/coin.png new file mode 100644 index 0000000..1bcc4d1 Binary files /dev/null and b/src/assets/images/push-coin/coin.png differ diff --git a/src/assets/images/push-coin/pusher.png b/src/assets/images/push-coin/pusher.png new file mode 100644 index 0000000..be9ef1e Binary files /dev/null and b/src/assets/images/push-coin/pusher.png differ diff --git a/src/assets/images/push-coin/top.png b/src/assets/images/push-coin/top.png new file mode 100644 index 0000000..7b58dc0 Binary files /dev/null and b/src/assets/images/push-coin/top.png differ diff --git a/src/page/index/PushCoinGame/game/index.js b/src/page/index/PushCoinGame/game/index.js index 2402db8..02722a2 100644 --- a/src/page/index/PushCoinGame/game/index.js +++ b/src/page/index/PushCoinGame/game/index.js @@ -104,7 +104,7 @@ class game { this.gameView = this.VIEW.loading(this); this.VIEW.createLoadingParticle(); this.scene = 1; - // this.loadMainRes(); + this.loadMainRes(); }, }); } @@ -115,10 +115,12 @@ class game { imgList: Resource.main.imgList, // audioList: Resource.main.audioList, loadStart: () => { + this.scene = 2; // console.log(this.VIEW.loading_progress_bar.graphics.command.w) }, progressCallBack: (progress) => { // progress; // 0.99 + console.log() gsap.to(this.VIEW.loading_progress_bar.graphics.command, { w: 30 + 432 * progress, duration: 0.1, @@ -134,7 +136,11 @@ class game { }, completeCallBack: (result) => { // all loaded triger - this.VIEW.hideLoading() + this.VIEW.createGamePage(this); + setTimeout(() => { + this.VIEW.hideLoading(); + this.webGL && this.VIEW.loadingCacheContainer.updateCache(); + }, 100) // this.mainResLoaded(); }, }); @@ -187,57 +193,45 @@ class game { initMatterEngine() { // create an engine this.myEngine = this.Engine.create(); + this.myEngine.gravity.y = 0.1; this.myWorld = this.myEngine.world; // create a renderer - // this.myRender = this.Render.create({ - // element: this.vue.$refs.container, - // engine: this.myEngine, - // options: { - // width: window.innerWidth, - // height: window.innerHeight, - // pixelRatio: 1, // 设置像素比 - // showAngleIndicator: true, - // wireframes: true, - // showDebug: true - // } - // }); + this.myRender = this.Render.create({ + // element: this.vue.$refs.container, + engine: this.myEngine, + canvas: this.vue.$refs.matter, + options: { + width: window.innerWidth, + height: window.innerHeight, + pixelRatio: window.devicePixelRatio, // 设置像素比 + background: 'transparent', + wireframeBackground: "transparent", + showAngleIndicator: false, + wireframes: true, + showDebug: false, + showVelocity: true, + } + }); // create two boxes and a ground - var boxA = this.Bodies.rectangle(100, 200, 80, 80); - var boxB = this.Bodies.rectangle(150, 50, 80, 80); - var boxC = this.Bodies.rectangle(150, 50, 80, 80); - var boxD = this.Bodies.rectangle(150, 50, 80, 80); - var ground = this.Bodies.rectangle(0, 800, 750, 10, { isStatic: true }); + // var boxA = this.Bodies.rectangle(100, 200, 80, 80); + // var boxB = this.Bodies.rectangle(150, 50, 80, 80); + // var boxC = this.Bodies.rectangle(150, 50, 80, 80); + // var boxD = this.Bodies.rectangle(150, 50, 80, 80); + // var ground = this.Bodies.rectangle(0, 800, 750, 10, { isStatic: true }); + - // this.Composite.add(this.myWorld, [ - // this.Bodies.fromVertices( - // 0, 0, - // [ - // // 顶点坐标 - // { x: 0, y: 0 }, - // { x: 0, y: 890 }, - // { x: 140, y: 815 }, - // { x: 208, y: 614 }, - // { x: 548, y: 614 }, - // { x: 612, y: 815 }, - // { x: 750, y: 890 }, - // { x: 750, y: 0 } - // ], - // { isStatic: true } - // ) - // ]); // add all of the bodies to the world - this.Composite.add(this.myWorld, [boxA, boxB, boxC, boxD, ground]); + // this.Composite.add(this.myWorld, [boxA, boxB, boxC, boxD, ground]); // create runner - // this.Render.run(this.myRender); + this.Render.run(this.myRender); // run the engine - // this.myRunner = this.Runner.create(); - // this.Runner.run(this.myRunner, this.myEngine); - this.Engine.run(this.myEngine); + this.myRunner = this.Runner.create(); + this.Runner.run(this.myRunner, this.myEngine); } //debug mode destroyed diff --git a/src/page/index/PushCoinGame/game/preload.js b/src/page/index/PushCoinGame/game/preload.js index 2284eba..c940613 100644 --- a/src/page/index/PushCoinGame/game/preload.js +++ b/src/page/index/PushCoinGame/game/preload.js @@ -24,13 +24,22 @@ export default { main: { imgList: [ { - id: 'logo', - src: require("@/assets/images/logo.png") + id: 'coin', + src: require("@/assets/images/push-coin/coin.png") }, { - id: 'logo', - src: require("@/assets/images/logo.png") - } + id: 'top', + src: require("@/assets/images/push-coin/top.png") + }, + { + id: 'bottom_ban', + src: require("@/assets/images/push-coin/bottom_ban.png") + }, + { + id: 'pusher', + src: require("@/assets/images/push-coin/pusher.png") + }, + ], audioList: [ ] diff --git a/src/page/index/PushCoinGame/game/view.js b/src/page/index/PushCoinGame/game/view.js index 85bc290..f6e3e3b 100644 --- a/src/page/index/PushCoinGame/game/view.js +++ b/src/page/index/PushCoinGame/game/view.js @@ -3,6 +3,7 @@ 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 @@ -16,8 +17,6 @@ class layout { } init() { - - //update btns position by viewport // this.updatePosByViewport(); @@ -65,8 +64,9 @@ class layout { } } - createBitmap(spriteSheet, name) { - return new createjs.Sprite(spriteSheet, name); + createBitmap(name) { + let img = this.game.mainLoader && this.game.mainLoader.getResult(name); + return new createjs.Bitmap(img); } //创建loading页 @@ -95,365 +95,95 @@ class layout { // 创建粒子动画 this.createLoadingParticle(); - console.log(this.loading_bg) + // console.log(this.loading_bg) return this } //隐藏loading页面 - hideLoading(step = 1) { + hideLoading() { //create story index - this.game.scene = 2; - gsap.to(this.game.stage.loadingContainer, { - alpha: 0, duration: 0.65, delay: step == 3 ? 1 : 0, onComplete: () => { - // 将loading重置ui显示 为二次加载资源做显示 - this.changeLoadingLayout(step); - } - }) - gsap.to(this.game.stage.mainContainer, { alpha: 1, duration: 0.65 }); + gsap.to(this.game.stage.loadingContainer, { alpha: 0, duration: 0.65, }) + gsap.to([this.game.stage.mainContainer, this.gamePage], { alpha: 1, duration: 0.65 }); } - // 准备下一次loading - changeLoadingLayout(step) { - if (step == 1) { - // 进度归零 - this.loading_progress_text.text = '0%'; - // 隐藏元素 - gsap.set([this.loading_start, this.loading_progress_bg, this.loading_progress_bar, this.loading_snow, this.loading_text], { alpha: 0 }) - // 显示元素 - gsap.set([this.loading_text2, this.loading_box, this.loading_light, this.loading_person], { alpha: 1 }) - gsap.set(this.loading_progress_text, { alpha: 1, y: 1260 }) - // 准备动画 - this.readyLangLoaderAni(); - } else if (step == 2) { - // 隐藏元素 - gsap.set([this.loading_text2, this.loading_light, this.loading_person], { alpha: 0 }) - gsap.set(this.loading_progress_text, { alpha: 0 }) - // 显示元素 - gsap.set([this.loading_text3, this.loading_light2, this.loading_arrow], { alpha: 1 }) - // 如果是英文 显示英文文案 - if (this.game.langConfig.id == 3) { - gsap.set([this.loading_text2_en, this.loading_text3], { alpha: 0 }) - gsap.set([this.loading_text3_en], { alpha: 1 }) - } - // 准备动画 - this.readyPosterLoaderAni(); - } - } + // 创建游戏页 + createGamePage(game) { + this.game = game; + this.gamePage = new createjs.Container().set({ alpha: 0 }); + this.game.stage.mainContainer.addChild(this.gamePage); - // 准备语言加载动画 - readyLangLoaderAni() { - this.langLoaderAni = []; - let ani1 = new gsap.timeline({ repeat: -1, paused: true }) - .to([this.loading_light, this.loading_person], { alpha: 0.86, duration: 0.2 }) - .to([this.loading_light, this.loading_person], { alpha: 1, duration: 0.15 }) - .to([this.loading_light, this.loading_person], { alpha: 0.6, duration: 0.2 }) - .to([this.loading_light, this.loading_person], { alpha: 1, duration: 0.1 }) - - let ani2 = gsap.to([this.loading_person, this.loading_box], { y: '+=15', yoyo: true, repeat: -1, duration: 1.5 }) - - - this.langLoaderAni.push(ani1, ani2) - } - - // 播放语言加载时动画 - playLangLoaderAni() { - this.langLoaderAni.forEach((item) => { - item.restart(); - }) - } - - // 暂停语言加载时动画 - pauseLangLoaderAni() { - this.langLoaderAni.forEach((item) => { - item.pause(); - }) - } - - // 准备语言加载动画 - readyPosterLoaderAni() { - this.posterLoaderAni = []; - let ani1 = new gsap.timeline({ repeat: -1, paused: true }) - .to(this.loading_light2, { alpha: 0.86, duration: 0.2 }) - .to(this.loading_light2, { alpha: 1, duration: 0.15 }) - .to(this.loading_light2, { alpha: 0.6, duration: 0.2 }) - .to(this.loading_light2, { alpha: 1, duration: 0.1 }) - - let ani2 = gsap.to([this.loading_box], { y: '+=15', yoyo: true, repeat: -1, duration: 1.5 }) - - let ani3 = gsap.to([this.loading_arrow], { y: '+=15', scaleX: 0.95, yoyo: true, repeat: -1, duration: 1.5 }) - - - this.posterLoaderAni.push(ani1, ani2, ani3) - } - - // 播放语言加载时动画 - playPosterLoaderAni() { - this.posterLoaderAni.forEach((item) => { - item.restart(); - }) - } - - // 暂停语言加载时动画 - pausePosterLoaderAni() { - this.posterLoaderAni.forEach((item) => { - item.pause(); - }) - } - - - // 帧生成动画 - framePlayer(config) { - // 图像资源 - // 容器 - // const container = new createjs.Container(); - - // loader - const loader = this.game[config.name]; - - // images - const images = []; - config.imgIds.forEach((item) => { - images.push(loader.getResult(item)); - }) - - // handle speed - Object.keys(config.sprite.animations).forEach((key) => { - // console.log('speed=', this.game.globalSpeed * 0.18) - config.sprite.animations[key].speed = this.game.globalSpeed * 0.18; - config.sprite.animations[key].next = 'wait' + let bottom = this.createBitmap('bottom_ban').set({ y: 560 }); + let top = this.createBitmap('top'); + // 添加推板 + let pusher = this.createBitmap('pusher').set({ + x: 142, + y: 683 }); - // animation config - const aniData = { - images, - frames: config.sprite.frames, - animations: config.sprite.animations - } + console.log(pusher) - const spriteSheet = new createjs.SpriteSheet(aniData); - const animation = new createjs.Sprite(spriteSheet); + gsap.to(pusher, { y: '-=202', yoyo: true, repeat: -1, ease: 'none', duration: 5 }) - // default setting - if (config.name === 'guide' || config.name === 'wait') { - animation.set({ - name: config.name, - x: 390, - y: 280 + 512, - scaleX: 1.25, - scaleY: 1.25, - regX: 750 * 0.85 / 2, - regY: 1624 * 0.85 / 2, - alpha: 0 - }) - } else { - animation.set({ - name: config.name, - x: 220, - y: 565 + 512, - scaleX: 1, - scaleY: 1, - regX: 750 * 1 / 2, - regY: 1624 * 1 / 2, - alpha: 0 - }) - } + // 添加到 + this.gamePage.addChild(bottom, pusher, top); + // 添加ground + this.game.Composite.add(this.game.myWorld, [ + this.game.Bodies.fromVertices( + window.innerWidth / 2, window.innerHeight / 2, + [ + // 顶点坐标 + { 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 } + ], + // { isStatic: true } + ) + ]); + // Create a concave polygon + var concavePolygon = [ + [-1, 1], + [-1, 0], + [1, 0], + [1, 1], + [0.5, 0.5] + ]; + // Make sure the polygon has counter-clockwise winding. Skip this step if you know it's already counter-clockwise. + decomp.makeCCW(concavePolygon); + // Decompose into convex polygons, using the faster algorithm + var convexPolygons = decomp.quickDecomp(concavePolygon); + // ==> [ [[1,0],[1,1],[0.5,0.5]], [[0.5,0.5],[-1,1],[-1,0],[1,0]] ] - return animation - } + // Decompose using the slow (but optimal) algorithm + var convexPolygons = decomp.decomp(concavePolygon); - // 生成海报 - createPoster(nickname = '', level = 1) { - this.posterContainer = new createjs.Container().set({ alpha: 1, name: 'posterContainer' }); - // this.game.stage.mainContainer.addChild(this.posterContainer); - - // 海报图片 - let posterImg = this.game.posterLoader.getResult('poster_bg'); - // 海报对象 - let poster = new createjs.Bitmap(posterImg); - - // nickname - let nt; - if (nickname) { - nt = this.game.vue.$Utils.cutString(nickname, 20, true); - } - let nicknameText = new createjs.Text(nt, "38px Helvetica, Arial, sans-serif", "#31425b").set({ - x: 375, - y: 1086, - textAlign: 'center' - }); - - let levelImg = this.game.posterLoader.getResult(`word_${level}`); - let posConfig = [ - { - x: 50, - y: 239 - }, - { - x: 70, - y: 242 - }, - { - x: 54, - y: 243 - }, - { - x: 57, - y: 224 - }, - { - x: 50, - y: 243 - } - ] - // 等级称号 - let levelTitle = new createjs.Bitmap(levelImg).set( - this.game.langConfig.id == 3 ? posConfig[Number(level) - 1] : posConfig[4] + // + let bounds = pusher.getBounds(); + pusher.body = this.game.Bodies.trapezoid( + pusher.x, + pusher.y, + bounds.width, + bounds.height, + { isStatic: true } ); - - - let personImg = this.game.posterLoader.getResult('person'); - // 王冰冰 - let person = new createjs.Bitmap(personImg).set({ - x: this.game.langConfig.id == 3 ? 76 : 86, - y: this.game.langConfig.id == 3 ? 381 : 256 - }); - - // 根据版本选择不同的二维码 目前全部选用微信版本二维码 - let codeName = 'qrcode'; - // switch (process.env.VUE_APP_CURRENTMODE) { - // case 'ysprod': - // codeName = 'ys_qrcode'; - // break; - // case 'wbprod': - // codeName = 'wb_qrcode'; - // break; - // default: - // codeName = 'qrcode'; - // break; - // } - let qrcodeImg = this.game.posterLoader.getResult(codeName); - // 海报对象 - let qrcode = new createjs.Bitmap(qrcodeImg).set({ - x: this.game.langConfig.id == 3 ? 305 : 306, - y: this.game.langConfig.id == 3 ? 1256 : 1275, - scaleX: 0.34, - scaleY: 0.34, - width: 136, - height: 136 - }); - - let logoImg = this.game.posterLoader.getResult('logo'); - // 海报对象 - let logo = new createjs.Bitmap(logoImg).set({ - x: this.game.langConfig.id == 3 ? 341 : 341, - y: this.game.langConfig.id == 3 ? 1482 : 1482, - }); - - // 插入container - this.posterContainer.addChild(poster, nicknameText, qrcode, levelTitle, person, logo); - - this.posterContainer.cache(0, 0, 750, 1538); - - // easejs > 1.0.0 getCacheDataURL报错 0.8.2版本正常 - let baseUrl = this.posterContainer.cacheCanvas.toDataURL('image/png'); - // let baseUrl = this.posterContainer.getCacheDataURL(); - - setTimeout(() => { - this.destroyPosterCreater(); - }, 1000); - - return baseUrl + // this.game.Composite.add(this.myWorld, [pusher.body]); } - // 销毁海报生成器 - destroyPosterCreater() { - this.posterContainer.uncache(); - this.posterContainer.removeAllChildren(); - this.game.stage.mainContainer.removeChild(this.posterContainer); - this.posterContainer = null; + // 生成硬币 + createCoin() { + let coinImg = this.game.mainLoader.getResult('coin'); + let coin = new createjs.Bitmap(coinImg); } - // index 粒子制造机 - createParticle() { - - // 容器 - // const loadingContainer = this.game.stage.loadingContainer; - - // loader - const loader = this.game.vue.$beforeLoader; - - // sprite image - const spriteImg = loader.getResult('snowSprite'); - - - const container = new createjs.Container(); - - - const aniData = { - images: [spriteImg], - frames: [ - [1, 1, 77, 82, 0, 0, 0], - [1, 85, 57, 55, 0, 0, 0], - [1, 142, 46, 45, 0, 0, 0], - [49, 142, 15, 15, 0, 0, 0], - [60, 85, 8, 12, 0, 0, 0], - [60, 99, 6, 6, 0, 0, 0] - ], - animations: { - "snow-1": { "frames": [0] }, - "snow-2": { "frames": [1] }, - "snow-3": { "frames": [2] }, - "snow-4": { "frames": [3] }, - "snow-5": { "frames": [4] }, - "snow-6": { "frames": [3] }, - "snow-7": { "frames": [4] }, - "snow-8": { "frames": [2] }, - "snow-9": { "frames": [3] }, - "snow-10": { "frames": [1] }, - } - } - - const spriteSheet = new createjs.SpriteSheet(aniData); - - const arr = []; - for (let i = 0; i < (window.deviceInfo.system == 'IOS' ? 50 : 50); i++) { - const scale = Math.random() * 0.35 + 0.5; - const name = `snow-${this.game.vue.$Utils.rangeRandom(1, 10)}`; - const sprite = this.createBitmap(spriteSheet, name).set({ - x: Math.random() * 750 - 30, - y: Math.random() * 1300, - ox: Math.random() * 750, - oy: -50, - // regX:14, - // regY:14, - scaleX: scale, - scaleY: scale, - speedX: (Math.random() > 0.5 ? 1 : -1) * (Math.random() * 0.5 + 0.25), - speedY: Math.random() * 1 + 1, - speedR: Math.random() * 0.5 + 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.prarticleContainer = container; - this.game.stage.mainContainer.addChild(container); - return container - } - - // loading 粒子制造机 createLoadingParticle() { const container = new createjs.Container(); diff --git a/src/page/index/PushCoinGame/index.vue b/src/page/index/PushCoinGame/index.vue index d2fccf3..29c5c1d 100644 --- a/src/page/index/PushCoinGame/index.vue +++ b/src/page/index/PushCoinGame/index.vue @@ -7,37 +7,45 @@ * @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue --> \ No newline at end of file diff --git a/vue.config.js b/vue.config.js index 7593c27..5c590bd 100644 --- a/vue.config.js +++ b/vue.config.js @@ -40,6 +40,12 @@ module.exports = { // development模式时打包也带有 hash 值 config.output.filename('static/js/[name].[hash].js').chunkFilename('static/js/[name].[hash].js').end() + config.module + .rule('images') + .use('url-loader') + .loader('url-loader') + .tap(options => Object.assign(options, { limit: 0 })) + config.resolve.alias .set("@", resolve("src")) // .set("weui", resolve("src/utils/plugins/weui.js"))