package.json

@@ -69,7 +69,6 @@
     "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",
@@ -106,4 +105,4 @@
     "not dead",
     "not ie <= 8"
   ]
-}
+}

src/page/index/PushCoinGame/game/index.js

@@ -44,7 +44,6 @@ class game {
         this.utils = utils;
 
         // init Matter
-        this.Matter = Matter;
         this.Engine = Matter.Engine,
             this.Render = Matter.Render,
             this.Runner = Matter.Runner,
@@ -105,7 +104,7 @@ class game {
                 this.gameView = this.VIEW.loading(this);
                 this.VIEW.createLoadingParticle();
                 this.scene = 1;
-                this.loadMainRes();
+                // this.loadMainRes();
             },
         });
     }
@@ -116,12 +115,10 @@ 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,
@@ -137,11 +134,7 @@ class game {
             },
             completeCallBack: (result) => {
                 // all loaded triger
-                this.VIEW.createGamePage(this);
-                setTimeout(() => {
-                    this.VIEW.hideLoading();
-                    this.webGL && this.VIEW.loadingCacheContainer.updateCache();
-                }, 100)
+                this.VIEW.hideLoading()
                 // this.mainResLoaded();
             },
         });
@@ -194,45 +187,57 @@ class game {
     initMatterEngine() {
         // create an engine 
         this.myEngine = this.Engine.create();
-        this.myEngine.gravity.y = 0;
         this.myWorld = this.myEngine.world;
 
 
         // create a renderer
-        this.myRender = this.Render.create({
-            // element: this.vue.$refs.container,
-            engine: this.myEngine,
-            canvas: this.vue.$refs.matter,
-            options: {
-                width: 375, //window.innerWidth,
-                height: 812,  //window.innerHeight,
-                pixelRatio: 1, // 设置像素比 window.devicePixelRatio
-                background: 'transparent',
-                wireframeBackground: "transparent",
-                showAngleIndicator: false,
-                wireframes: false,
-                showDebug: false,
-                showVelocity: true,
-            }
-        });
+        // 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
+        //     }
+        // });
 
         // 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.myRunner = this.Runner.create();
+        // this.Runner.run(this.myRunner, this.myEngine);
+        this.Engine.run(this.myEngine);
     }
 
     //debug mode destroyed

src/page/index/PushCoinGame/game/preload.js

@@ -24,22 +24,13 @@ export default {
 	main: {
 		imgList: [
 			{
-				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")
-			},
-
+				id: 'logo',
+				src: require("@/assets/images/logo.png")
+			}
 		],
 		audioList: [
 		]

src/page/index/PushCoinGame/game/view.js

@@ -3,7 +3,6 @@ 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
@@ -17,6 +16,8 @@ class layout {
 	}
 
 	init() {
+
+
 		//update btns position by viewport
 		// this.updatePosByViewport();
 
@@ -64,9 +65,8 @@ class layout {
 		}
 	}
 
-	createBitmap(name) {
-		let img = this.game.mainLoader && this.game.mainLoader.getResult(name);
-		return new createjs.Bitmap(img);
+	createBitmap(spriteSheet, name) {
+		return new createjs.Sprite(spriteSheet, name);
 	}
 
 	//创建loading页
@@ -95,125 +95,365 @@ class layout {
 		// 创建粒子动画
 		this.createLoadingParticle();
 
-		// console.log(this.loading_bg)
+		console.log(this.loading_bg)
 
 		return this
 	}
 
 	//隐藏loading页面
-	hideLoading() {
+	hideLoading(step = 1) {
 		//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 });
+		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 });
 	}
 
-	// 创建游戏页
-	createGamePage(game) {
-		this.game = game;
-		this.gamePage = new createjs.Container().set({ alpha: 0 });
-		this.game.stage.mainContainer.addChild(this.gamePage);
+	// 准备下一次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();
+		}
+	}
 
-		let bottom = this.createBitmap('bottom_ban').set({ y: 560 });
-		let top = this.createBitmap('top');
-		// 添加推板
-		let pusher = this.createBitmap('pusher').set({
-			x: 142,
-			y: 683
-		});
+	// 准备语言加载动画
+	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 })
 
-		// console.log(pusher)
-
-		gsap.to(pusher, { y: '-=202', yoyo: true, repeat: -1, ease: 'none', duration: 5 })
-
-		// 添加到
-		this.gamePage.addChild(bottom, pusher, top);
+		let ani2 = gsap.to([this.loading_person, this.loading_box], { y: '+=15', yoyo: true, repeat: -1, duration: 1.5 })
 
 
-		// 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],
-		];
+		this.langLoaderAni.push(ani1, ani2)
+	}
 
-		// Make sure the polygon has counter-clockwise winding. Skip this step if you know it's already counter-clockwise.
-		decomp.makeCCW(concavePolygon);
+	// 播放语言加载时动画
+	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 })
 
 
-		var convexPolygons = decomp.quickDecomp(concavePolygon);
-		// ==> [  [[1,0],[1,1],[0.5,0.5]],  [[0.5,0.5],[-1,1],[-1,0],[1,0]]  ]
+		this.posterLoaderAni.push(ani1, ani2, ani3)
+	}
 
-		// // Decompose using the slow (but optimal) algorithm
-		// var convexPolygons = decomp.decomp(concavePolygon);
+	// 播放语言加载时动画
+	playPosterLoaderAni() {
+		this.posterLoaderAni.forEach((item) => {
+			item.restart();
+		})
+	}
 
-		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)
-				}
-			})
+	// 暂停语言加载时动画
+	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));
 		})
 
-		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)'
-					}
-				},
+		// 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'
+		});
 
-			)
+		// animation config
+		const aniData = {
+			images,
+			frames: config.sprite.frames,
+			animations: config.sprite.animations
+		}
+
+		const spriteSheet = new createjs.SpriteSheet(aniData);
+		const animation = new createjs.Sprite(spriteSheet);
+
+		// 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
+			})
+		}
+
+
+
+
+
+		return animation
+	}
+
+	// 生成海报
+	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,
-		// 	1,
-		// 	{ isStatic: true }
-		// );
-		// this.game.Composite.add(this.myWorld, [pusher.body]);
+
+		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
 	}
 
-	// 生成硬币
-	createCoin() {
-		let coinImg = this.game.mainLoader.getResult('coin');
-		let coin = new createjs.Bitmap(coinImg);
+	// 销毁海报生成器
+	destroyPosterCreater() {
+		this.posterContainer.uncache();
+		this.posterContainer.removeAllChildren();
+		this.game.stage.mainContainer.removeChild(this.posterContainer);
+		this.posterContainer = null;
 	}
 
+	// 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();

src/page/index/PushCoinGame/index.vue

@@ -7,45 +7,37 @@
  * @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
 -->
 <template>
-  <div class="pushcoin" id="container" ref="container">
-    <canvas ref="matter" class="matter"></canvas>
-  </div>
+	<div class="pushcoin" id="container" ref="container"></div>
 </template>
 <script>
 // @ is an alias to /src
 import gsap from "gsap";
 import game from "./game/index";
 export default {
-  name: "ColorSort",
-  components: {},
-  data() {
-    return {};
-  },
-  computed: {
-    rennderCssHSL() {
-      return function (item) {
-        return `background-color: ${item.csshsl};`;
-      };
-    },
-  },
-  mounted() {
-    this.game = new game();
-    this.game.init(this);
-  },
-  methods: {},
+	name: "ColorSort",
+	components: {},
+	data() {
+		return {};
+	},
+	computed: {
+		rennderCssHSL() {
+			return function (item) {
+				return `background-color: ${item.csshsl};`;
+			};
+		},
+	},
+	mounted() {
+		this.game = new game();
+		this.game.init(this);
+	},
+	methods: {},
 };
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="less">
+<style scoped lang="less">
 .pushcoin {
-  .prLayout(100%,100%);
-  overflow: hidden;
-  background-color: #333;
-  .matter {
-    .paPos(0,0,1);
-  }
-  #stageCanvas {
-    .paLayout(0,0,750px,1624px,0);
-  }
+	.prLayout(100%,100%);
+	overflow: hidden;
+	background-color: #333;
 }
 </style>

vue.config.js

@@ -40,12 +40,6 @@ 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"))