Compare commits
No commits in common. "master" and "3ae20438f409d9962a7e43923e67da138e12e4ba" have entirely different histories.
master
...
3ae20438f4
@ -3,34 +3,26 @@
|
|||||||
// plugins.push("transform-remove-console")
|
// plugins.push("transform-remove-console")
|
||||||
// }
|
// }
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// presets: [
|
|
||||||
// // '@vue/cli-plugin-babel/preset',
|
|
||||||
// [
|
|
||||||
// // '@vue/cli-plugin-babel/preset',
|
|
||||||
// // '@vue/babel-preset-app',
|
|
||||||
// "@vue/app",
|
|
||||||
// {
|
|
||||||
// "useBuiltIns": "entry",
|
|
||||||
// corejs: 3,
|
|
||||||
// "targets": {
|
|
||||||
// "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
|
||||||
// },
|
|
||||||
// polyfills: [
|
|
||||||
// 'es.promise',
|
|
||||||
// 'es.symbol'
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// ],
|
|
||||||
// plugins: [
|
|
||||||
// "@babel/plugin-transform-runtime"
|
|
||||||
// ]
|
|
||||||
presets: [
|
presets: [
|
||||||
'@vue/cli-plugin-babel/preset'
|
// '@vue/cli-plugin-babel/preset',
|
||||||
|
[
|
||||||
|
// '@vue/cli-plugin-babel/preset',
|
||||||
|
// '@vue/babel-preset-app',
|
||||||
|
"@vue/app",
|
||||||
|
{
|
||||||
|
"useBuiltIns": "entry",
|
||||||
|
corejs: 3,
|
||||||
|
"targets": {
|
||||||
|
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||||
|
},
|
||||||
|
polyfills: [
|
||||||
|
'es.promise',
|
||||||
|
'es.symbol'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
],
|
],
|
||||||
plugins: [
|
plugins: [
|
||||||
["@babel/plugin-transform-modules-commonjs", {
|
"@babel/plugin-transform-runtime"
|
||||||
"allowTopLevelThis": true
|
|
||||||
}]
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,8 +16,8 @@ module.exports = {
|
|||||||
// },
|
// },
|
||||||
test: {
|
test: {
|
||||||
// 环境对象
|
// 环境对象
|
||||||
name: 'szxgl测试环境:pro', // 环境名称
|
name: 'szxgl测试环境', // 环境名称
|
||||||
script: 'npm run build:pro', // 打包命令
|
script: 'npm run build:dev', // 打包命令
|
||||||
host: '39.108.110.167', // 服务器地址
|
host: '39.108.110.167', // 服务器地址
|
||||||
port: 22, // 服务器端口号
|
port: 22, // 服务器端口号
|
||||||
username: 'front', // 服务器登录用户名
|
username: 'front', // 服务器登录用户名
|
||||||
|
|||||||
@ -20,7 +20,6 @@
|
|||||||
"eslint-config-standard": "^14.1.1",
|
"eslint-config-standard": "^14.1.1",
|
||||||
"eslint-plugin-promise": "^4.2.1",
|
"eslint-plugin-promise": "^4.2.1",
|
||||||
"eslint-plugin-standard": "^4.0.1",
|
"eslint-plugin-standard": "^4.0.1",
|
||||||
"file-saver": "^2.0.5",
|
|
||||||
"global": "^4.4.0",
|
"global": "^4.4.0",
|
||||||
"good-storage": "^1.1.1",
|
"good-storage": "^1.1.1",
|
||||||
"gsap": "^3.5.1",
|
"gsap": "^3.5.1",
|
||||||
@ -31,7 +30,6 @@
|
|||||||
"postcss-px2rem-exclude": "^0.0.6",
|
"postcss-px2rem-exclude": "^0.0.6",
|
||||||
"postcss-viewport-units": "^0.1.6",
|
"postcss-viewport-units": "^0.1.6",
|
||||||
"px2rem-loader": "^0.1.9",
|
"px2rem-loader": "^0.1.9",
|
||||||
"script-loader": "^0.7.2",
|
|
||||||
"style-resources-loader": "^1.3.3",
|
"style-resources-loader": "^1.3.3",
|
||||||
"swiper": "^6.2.0",
|
"swiper": "^6.2.0",
|
||||||
"tinyimg-webpack-plugin": "^0.0.5",
|
"tinyimg-webpack-plugin": "^0.0.5",
|
||||||
@ -43,8 +41,7 @@
|
|||||||
"vue-slider-component": "^3.2.11",
|
"vue-slider-component": "^3.2.11",
|
||||||
"vuex": "^3.4.0",
|
"vuex": "^3.4.0",
|
||||||
"webpack-glsl-loader": "^1.0.1",
|
"webpack-glsl-loader": "^1.0.1",
|
||||||
"wx-jssdk": "^0.0.7",
|
"wx-jssdk": "^0.0.7"
|
||||||
"xlsx": "^0.18.4"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.13.14",
|
"@babel/core": "^7.13.14",
|
||||||
@ -70,11 +67,8 @@
|
|||||||
"glslify": "^7.1.1",
|
"glslify": "^7.1.1",
|
||||||
"handtrackjs": "^0.1.5",
|
"handtrackjs": "^0.1.5",
|
||||||
"jsmpeg": "^1.0.0",
|
"jsmpeg": "^1.0.0",
|
||||||
"matter-js": "^0.18.0",
|
|
||||||
"meshline": "^2.0.3",
|
"meshline": "^2.0.3",
|
||||||
"poly-decomp": "^0.3.0",
|
|
||||||
"qrcode": "^1.4.4",
|
"qrcode": "^1.4.4",
|
||||||
"snapsvg-cjs": "^0.0.6",
|
|
||||||
"stats.js": "^0.17.0",
|
"stats.js": "^0.17.0",
|
||||||
"style-resources-loader": "^1.3.2",
|
"style-resources-loader": "^1.3.2",
|
||||||
"three": "^0.133.0",
|
"three": "^0.133.0",
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1,5 +0,0 @@
|
|||||||
{
|
|
||||||
"devDependencies": {
|
|
||||||
"easeljs": "^1.0.2"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -143,8 +143,6 @@ html,body{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//初始化开始循环 不初始化 不会开始循环
|
//初始化开始循环 不初始化 不会开始循环
|
||||||
.loop(@i);
|
.loop(@i);
|
||||||
}
|
}
|
||||||
@ -179,7 +177,6 @@ html,body{
|
|||||||
color: rgba(0,0,0,0.8);
|
color: rgba(0,0,0,0.8);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
animation: hide .5s ease 3s both;
|
animation: hide .5s ease 3s both;
|
||||||
font-size: 0.3rem;
|
|
||||||
}
|
}
|
||||||
#svg{
|
#svg{
|
||||||
animation: hide .5s ease 3s both;
|
animation: hide .5s ease 3s both;
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
@ -1,83 +0,0 @@
|
|||||||
{
|
|
||||||
|
|
||||||
"images": [
|
|
||||||
"loadingSprite.png"
|
|
||||||
],
|
|
||||||
|
|
||||||
"framerate": 20,
|
|
||||||
"frames": [
|
|
||||||
[1, 1, 645, 32, 0, 0, 0],
|
|
||||||
[648, 1, 359, 419, 0, 0, 0],
|
|
||||||
[1, 422, 395, 520, 0, 0, 0],
|
|
||||||
[398, 35, 246, 84, 0, 0, 0],
|
|
||||||
[1, 35, 392, 334, 0, 0, 0],
|
|
||||||
[398, 121, 243, 28, 0, 0, 0],
|
|
||||||
[643, 121, 3, 3, 0, 0, 0],
|
|
||||||
[643, 126, 3, 3, 0, 0, 0],
|
|
||||||
[1, 371, 37, 41, 0, 0, 0],
|
|
||||||
[1, 414, 4, 3, 0, 0, 0],
|
|
||||||
[7, 414, 4, 3, 0, 0, 0],
|
|
||||||
[40, 371, 402, 32, 0, 0, 0],
|
|
||||||
[40, 405, 15, 15, 0, 0, 0],
|
|
||||||
[57, 405, 14, 14, 0, 0, 0],
|
|
||||||
[73, 405, 10, 12, 0, 0, 0],
|
|
||||||
[85, 405, 11, 11, 0, 0, 0],
|
|
||||||
[98, 405, 10, 10, 0, 0, 0],
|
|
||||||
[110, 405, 10, 10, 0, 0, 0],
|
|
||||||
[122, 405, 7, 8, 0, 0, 0],
|
|
||||||
[131, 405, 7, 8, 0, 0, 0],
|
|
||||||
[140, 405, 10, 7, 0, 0, 0],
|
|
||||||
[152, 405, 8, 7, 0, 0, 0],
|
|
||||||
[1, 944, 30, 30, 0, 0, 0],
|
|
||||||
[1, 976, 26, 25, 0, 0, 0],
|
|
||||||
[29, 976, 21, 23, 0, 0, 0],
|
|
||||||
[33, 944, 385, 28, 0, 0, 0],
|
|
||||||
[52, 974, 328, 28, 0, 0, 0],
|
|
||||||
[382, 974, 23, 22, 0, 0, 0],
|
|
||||||
[407, 974, 19, 19, 0, 0, 0],
|
|
||||||
[444, 151, 171, 167, 0, 0, 0],
|
|
||||||
[398, 422, 392, 334, 0, 0, 0],
|
|
||||||
[428, 758, 306, 244, 0, 0, 0]
|
|
||||||
],
|
|
||||||
|
|
||||||
"animations": {
|
|
||||||
"loading_text2_en": { "frames": [0] },
|
|
||||||
"arrow": { "frames": [1] },
|
|
||||||
"person": { "frames": [2] },
|
|
||||||
"start": { "frames": [3] },
|
|
||||||
"light": { "frames": [4] },
|
|
||||||
"loading_text3": { "frames": [5] },
|
|
||||||
"snow_19": { "frames": [6] },
|
|
||||||
"snow_9": { "frames": [7] },
|
|
||||||
"snow_1": { "frames": [8] },
|
|
||||||
"snow_10": { "frames": [9] },
|
|
||||||
"snow_20": { "frames": [10] },
|
|
||||||
"loading_text3_en": { "frames": [11] },
|
|
||||||
"snow_2": { "frames": [12] },
|
|
||||||
"snow_8": { "frames": [13] },
|
|
||||||
"snow_11": { "frames": [14] },
|
|
||||||
"snow_13": { "frames": [15] },
|
|
||||||
"snow_17": { "frames": [16] },
|
|
||||||
"snow_6": { "frames": [17] },
|
|
||||||
"snow_14": { "frames": [18] },
|
|
||||||
"snow_7": { "frames": [19] },
|
|
||||||
"snow_16": { "frames": [20] },
|
|
||||||
"snow_15": { "frames": [21] },
|
|
||||||
"snow_3": { "frames": [22] },
|
|
||||||
"snow_12": { "frames": [23] },
|
|
||||||
"snow_18": { "frames": [24] },
|
|
||||||
"loading_text": { "frames": [25] },
|
|
||||||
"loading_text2": { "frames": [26] },
|
|
||||||
"snow_4": { "frames": [27] },
|
|
||||||
"snow_5": { "frames": [28] },
|
|
||||||
"snow": { "frames": [29] },
|
|
||||||
"light_2": { "frames": [30] },
|
|
||||||
"box": { "frames": [31] }
|
|
||||||
},
|
|
||||||
|
|
||||||
"texturepacker": [
|
|
||||||
"SmartUpdateHash: $TexturePacker:SmartUpdate:3da48f21b4a69792ffd2babe708727d0:90dbaba88b2a904ae79170eb342a1a0d:e0f80f5f67f3e04854c93f0048518df1$",
|
|
||||||
"Created with TexturePacker (https://www.codeandweb.com/texturepacker) for EaselJS"
|
|
||||||
]
|
|
||||||
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
@ -1,26 +0,0 @@
|
|||||||
{
|
|
||||||
|
|
||||||
"images": [
|
|
||||||
"snowSprite.png"
|
|
||||||
],
|
|
||||||
|
|
||||||
"framerate": 20,
|
|
||||||
"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": { "frames": [0, 1, 2, 3, 5, 4] }
|
|
||||||
},
|
|
||||||
|
|
||||||
"texturepacker": [
|
|
||||||
"SmartUpdateHash: $TexturePacker:SmartUpdate:5282c6d67fd56100f124116392fa0dda:00bfe33730c22fc59892c575329c8865:784870e134e9ba9b2fa4be9322fa91d0$",
|
|
||||||
"Created with TexturePacker (https://www.codeandweb.com/texturepacker) for EaselJS"
|
|
||||||
]
|
|
||||||
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB |
BIN
src/assets/images/suggbg.png
Normal file
BIN
src/assets/images/suggbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/images/suggbg2.png
Normal file
BIN
src/assets/images/suggbg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@ -40,151 +40,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="shadow" ref="shadow" :class="shown ? 'shown' : ''"></div>
|
<div class="shadow" ref="shadow" :class="shown ? 'shown' : ''"></div>
|
||||||
<div class="background">
|
|
||||||
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
|
|
||||||
<defs>
|
|
||||||
<radialGradient
|
|
||||||
id="Gradient1"
|
|
||||||
cx="50%"
|
|
||||||
cy="50%"
|
|
||||||
fx="10%"
|
|
||||||
fy="50%"
|
|
||||||
r=".5"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="fx"
|
|
||||||
dur="34s"
|
|
||||||
values="0%;3%;0%"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
<stop offset="0%" stop-color="#ff0" />
|
|
||||||
<stop offset="100%" stop-color="#ff00" />
|
|
||||||
</radialGradient>
|
|
||||||
<radialGradient
|
|
||||||
id="Gradient2"
|
|
||||||
cx="50%"
|
|
||||||
cy="50%"
|
|
||||||
fx="10%"
|
|
||||||
fy="50%"
|
|
||||||
r=".5"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="fx"
|
|
||||||
dur="23.5s"
|
|
||||||
values="0%;3%;0%"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
<stop offset="0%" stop-color="#0ff" />
|
|
||||||
<stop offset="100%" stop-color="#0ff0" />
|
|
||||||
</radialGradient>
|
|
||||||
<radialGradient
|
|
||||||
id="Gradient3"
|
|
||||||
cx="50%"
|
|
||||||
cy="50%"
|
|
||||||
fx="50%"
|
|
||||||
fy="50%"
|
|
||||||
r=".5"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="fx"
|
|
||||||
dur="21.5s"
|
|
||||||
values="0%;3%;0%"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
<stop offset="0%" stop-color="#f0f" />
|
|
||||||
<stop offset="100%" stop-color="#f0f0" />
|
|
||||||
</radialGradient>
|
|
||||||
</defs>
|
|
||||||
<rect
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
fill="url(#Gradient1)"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="x"
|
|
||||||
dur="20s"
|
|
||||||
values="25%;0%;25%"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
<animate
|
|
||||||
attributeName="y"
|
|
||||||
dur="21s"
|
|
||||||
values="0%;25%;0%"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
<animateTransform
|
|
||||||
attributeName="transform"
|
|
||||||
type="rotate"
|
|
||||||
from="0 50 50"
|
|
||||||
to="360 50 50"
|
|
||||||
dur="17s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</rect>
|
|
||||||
<rect
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
fill="url(#Gradient2)"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="x"
|
|
||||||
dur="23s"
|
|
||||||
values="-25%;0%;-25%"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
<animate
|
|
||||||
attributeName="y"
|
|
||||||
dur="24s"
|
|
||||||
values="0%;50%;0%"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
<animateTransform
|
|
||||||
attributeName="transform"
|
|
||||||
type="rotate"
|
|
||||||
from="0 50 50"
|
|
||||||
to="360 50 50"
|
|
||||||
dur="18s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</rect>
|
|
||||||
<rect
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
fill="url(#Gradient3)"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="x"
|
|
||||||
dur="25s"
|
|
||||||
values="0%;25%;0%"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
<animate
|
|
||||||
attributeName="y"
|
|
||||||
dur="26s"
|
|
||||||
values="0%;25%;0%"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
<animateTransform
|
|
||||||
attributeName="transform"
|
|
||||||
type="rotate"
|
|
||||||
from="360 50 50"
|
|
||||||
to="0 50 50"
|
|
||||||
dur="19s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</rect>
|
|
||||||
</svg>
|
|
||||||
<h1>
|
|
||||||
Rucky's<br />
|
|
||||||
Toy.
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@ -255,12 +110,6 @@ export default {
|
|||||||
name: "颜色归类",
|
name: "颜色归类",
|
||||||
active: false,
|
active: false,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
fontIconCode: "",
|
|
||||||
target: "PushCoin",
|
|
||||||
name: "推币游戏",
|
|
||||||
active: false,
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -386,13 +235,6 @@ export default {
|
|||||||
// 6px -18px 40px #f5c5cb inset, 11px -18px 40px #f0c1ef inset,
|
// 6px -18px 40px #f5c5cb inset, 11px -18px 40px #f0c1ef inset,
|
||||||
// 22px 7px 40px #d3c1f8 inset, 13px 17px 40px #c2c6fd inset;
|
// 22px 7px 40px #d3c1f8 inset, 13px 17px 40px #c2c6fd inset;
|
||||||
}
|
}
|
||||||
.background {
|
|
||||||
opacity: 0.15;
|
|
||||||
.paLayout(0,0,100%,100%,0);
|
|
||||||
svg {
|
|
||||||
.prLayout(100%,100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.page__hd {
|
.page__hd {
|
||||||
padding: 30px 0 180px 0px !important;
|
padding: 30px 0 180px 0px !important;
|
||||||
h1,
|
h1,
|
||||||
@ -400,10 +242,7 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-weight: 700;
|
|
||||||
mix-blend-mode: overlay;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.dialog {
|
.dialog {
|
||||||
|
|||||||
@ -1,668 +0,0 @@
|
|||||||
import 'gsap';
|
|
||||||
|
|
||||||
class animation {
|
|
||||||
/**
|
|
||||||
* @Author rucky
|
|
||||||
* @DateTime 2018-05-16
|
|
||||||
* @param {Object} game [game object]
|
|
||||||
* @param {Object} view [view object]
|
|
||||||
* @param {Object} ani [animations object]
|
|
||||||
* @return
|
|
||||||
*/
|
|
||||||
constructor(game,view,ani) {
|
|
||||||
this.game = game;
|
|
||||||
this.view = view;
|
|
||||||
this.ani = ani;
|
|
||||||
|
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
init(){
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
commonBtnAni(target,callbacks,onStart){
|
|
||||||
if(this.game.buttonDisabled) return
|
|
||||||
this.game.buttonDisabled = !this.game.buttonDisabled;
|
|
||||||
let timeline = new TimelineMax({
|
|
||||||
onStart:()=>{
|
|
||||||
onStart &&onStart();
|
|
||||||
// !this.game.mute && createjs.Sound.play('button');
|
|
||||||
},
|
|
||||||
onComplete:()=>{
|
|
||||||
timeline.kill();
|
|
||||||
callbacks&&callbacks();
|
|
||||||
this.game.buttonDisabled = !this.game.buttonDisabled;
|
|
||||||
}});
|
|
||||||
|
|
||||||
timeline
|
|
||||||
.to(target,.4,{scaleX:target.scaleX*.9,scaleY:target.scaleY*.9})
|
|
||||||
.to(target,.2,{scaleX:target.scaleX,scaleY:target.scaleY})
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @Author rucky
|
|
||||||
* @DateTime 2018-05-16
|
|
||||||
* @param {Object} argument [many prama]
|
|
||||||
* {
|
|
||||||
* now: null, //
|
|
||||||
* next: null,
|
|
||||||
* effect: 'fade', //scale | translate | fade
|
|
||||||
* translateOut: false,
|
|
||||||
* translateIn: false,
|
|
||||||
* scaleOut: false,
|
|
||||||
* scaleIn: false,
|
|
||||||
* direction: 'x',
|
|
||||||
* }
|
|
||||||
* @return {null}
|
|
||||||
*/
|
|
||||||
changePage(argument){
|
|
||||||
let _default = {
|
|
||||||
now: null,
|
|
||||||
next: null,
|
|
||||||
effect: 'fade', //scale | translate | fade
|
|
||||||
translateOut: false,
|
|
||||||
translateIn: false,
|
|
||||||
scaleOut: false,
|
|
||||||
scaleIn: false,
|
|
||||||
direction: 'x',
|
|
||||||
onStart: function(){},
|
|
||||||
callbacks: function(){},
|
|
||||||
}
|
|
||||||
|
|
||||||
let opts = Object.assign({}, _default, argument );
|
|
||||||
|
|
||||||
let timeLine = new TimelineMax({
|
|
||||||
onStart:()=>{
|
|
||||||
opts.onStart && opts.onStart();
|
|
||||||
// !this.game.mute && this.game.soundLoader && this.game.soundLoader.getResult('open') &&createjs.sound.play('open')
|
|
||||||
},
|
|
||||||
onComplete:()=>{
|
|
||||||
opts.callbacks && opts.callbacks();
|
|
||||||
timeLine.kill();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
let hideData = {alpha:0,autoAlpha:0};
|
|
||||||
let showStartData = {alpha:0,x:0,y:0,autoAlpha:0};
|
|
||||||
let showEndData = {alpha:1,autoAlpha:1};
|
|
||||||
|
|
||||||
|
|
||||||
if(opts.effect == 'scale'){
|
|
||||||
hideData.scaleX = .99;
|
|
||||||
hideData.scaleY = .99;
|
|
||||||
showStartData.scaleX = .99;
|
|
||||||
showStartData.scaleY = .99;
|
|
||||||
showEndData.scaleX = 1;
|
|
||||||
showEndData.scaleY = 1;
|
|
||||||
}
|
|
||||||
if(opts.effect == 'translate'){
|
|
||||||
if(opts.direction == 'x')
|
|
||||||
hideData.x = -750;
|
|
||||||
else
|
|
||||||
hideData.y = -1450;
|
|
||||||
|
|
||||||
if(opts.direction == 'x'){
|
|
||||||
showStartData.x = 750;
|
|
||||||
showEndData.x = 0;
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
showStartData.y = 1450;
|
|
||||||
showEndData.y = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(opts.effect == 'translate' && opts.direction == 'y'){
|
|
||||||
timeLine
|
|
||||||
.to(opts.now,.6,hideData,'start')
|
|
||||||
.fromTo(opts.next,.6,showStartData,showEndData,'start')
|
|
||||||
// .to(this.game.gameView.interfaceBackground,.3,{y:-30},'start')
|
|
||||||
// .to(this.game.gameView.interfaceBackground,.5,{y:0},'start+=.3')
|
|
||||||
}else{
|
|
||||||
timeLine
|
|
||||||
.to(opts.now,.6,hideData,'start')
|
|
||||||
.fromTo(opts.next,.6,showStartData,showEndData,'start')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
loadingAnimations(){
|
|
||||||
let A = {};
|
|
||||||
let view = this.game.loadingView;
|
|
||||||
//progress animation
|
|
||||||
let progress = {value : 0};
|
|
||||||
|
|
||||||
A.overProgress = TweenMax.to(progress,.5,{value:100,ease:Linear.easeNone,paused:true,
|
|
||||||
onUpdate:()=>{
|
|
||||||
view.loading_progress_text.text = Math.floor(progress.value)+'%';
|
|
||||||
view.loading_progress_bar.graphics.command.w = progress.value/100 * 376;
|
|
||||||
},
|
|
||||||
onComplete:()=>{
|
|
||||||
this.game.loadingAniEnding = true;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// console.log(view.loading_progress_bar.graphics)
|
|
||||||
TweenMax.to(progress,4,{value:86,ease:Linear.easeNone,
|
|
||||||
onUpdate:()=>{
|
|
||||||
view.loading_progress_text.text = Math.floor(progress.value)+'%';
|
|
||||||
view.loading_progress_bar.graphics.command.w = progress.value/100 * 376;
|
|
||||||
},
|
|
||||||
onComplete:()=>{
|
|
||||||
// this.game.loadingAniEnding = true;
|
|
||||||
if(this.game.mainResourceLoaded === true){
|
|
||||||
A.overProgress.play();
|
|
||||||
}else{
|
|
||||||
this.watch(this.game,'mainResourceLoaded',()=>{
|
|
||||||
if(this.game.mainResourceLoaded === true){
|
|
||||||
A.overProgress.play();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
A.flashEye = new TimelineMax({repeat:-1,repeatDelay:1.5})
|
|
||||||
.fromTo([view.loading_eye_1,view.loading_eye_2],.6,{scaleY:1,alpha:1},{scaleY:.1,alpha:.5})
|
|
||||||
.to([view.loading_eye_1,view.loading_eye_2],.3,{scaleY:1,alpha:1})
|
|
||||||
|
|
||||||
// console.log(view.loading_bingo.parent.mask.x)
|
|
||||||
|
|
||||||
A.drawAni = new TimelineMax()
|
|
||||||
.fromTo(view.loading_pen,.6,
|
|
||||||
{x:view.loading_pen.ox,y:view.loading_pen.oy},
|
|
||||||
{x:view.loading_pen.ox+12,y:view.loading_pen.oy-8,ease:Linear.easeNone
|
|
||||||
},'start')
|
|
||||||
.fromTo(view.loading_bingo.parent.mask,.6,{x:-100},{x:-91,ease:Linear.easeNone},'start+=.2')
|
|
||||||
|
|
||||||
.to(view.loading_pen,.6,
|
|
||||||
{x:view.loading_pen.ox+36,y:view.loading_pen.oy+32,ease:Linear.easeNone}
|
|
||||||
,'start2')
|
|
||||||
.to(view.loading_bingo.parent.mask,.6,
|
|
||||||
{x:-54,ease:Linear.easeNone}
|
|
||||||
,'start2+=.15')
|
|
||||||
|
|
||||||
.to(view.loading_pen,.6,
|
|
||||||
{x:view.loading_pen.ox+96,y:view.loading_pen.oy-33,ease:Linear.easeNone}
|
|
||||||
,'start3')
|
|
||||||
.to(view.loading_bingo.parent.mask,.6,
|
|
||||||
{x:0,ease:Linear.easeNone}
|
|
||||||
,'start3')
|
|
||||||
.timeScale(.5)
|
|
||||||
|
|
||||||
|
|
||||||
return A
|
|
||||||
}
|
|
||||||
|
|
||||||
indexAnimations(){
|
|
||||||
let A = {};
|
|
||||||
let gameView = this.game.gameView;
|
|
||||||
|
|
||||||
//wait ani
|
|
||||||
A.waitLine = new TimelineMax({
|
|
||||||
paused:true,
|
|
||||||
repeat:-1,
|
|
||||||
yoyo:true
|
|
||||||
})
|
|
||||||
|
|
||||||
for(let i = 1; i < 10; i++){
|
|
||||||
A.waitLine
|
|
||||||
|
|
||||||
.fromTo(gameView[`index_text_${i}`],Math.random() * 2 + 1,
|
|
||||||
{rotation:0},
|
|
||||||
{rotation:(Math.random()>.5?1:-1) * Math.random() * 10+5,ease:Linear.easeNone},
|
|
||||||
`start`
|
|
||||||
)
|
|
||||||
.to(gameView[`index_text_${i}`],Math.random() * 1 + 1,
|
|
||||||
{rotation:0,ease:Linear.easeNone},
|
|
||||||
`start2`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
//show ani
|
|
||||||
A.textTimeLine = new TimelineMax({
|
|
||||||
paused:true
|
|
||||||
})
|
|
||||||
|
|
||||||
let speArr = [1,2,4,5],
|
|
||||||
speArr2= [6,7,8,9]
|
|
||||||
for(let i = 1; i < 10; i++){
|
|
||||||
let timelineSpan = new TimelineMax()
|
|
||||||
//text
|
|
||||||
.fromTo(gameView[`index_text_${i}`],1,
|
|
||||||
{y:gameView[`index_text_${i}`].oy-700,x:gameView[`index_text_${i}`].ox-200},
|
|
||||||
{y:gameView[`index_text_${i}`].oy,x:gameView[`index_text_${i}`].ox,ease:i > 5 ? Back.easeOut.config(0) : Back.easeOut.config(1.2)},
|
|
||||||
`text_${i}`
|
|
||||||
)
|
|
||||||
//line
|
|
||||||
.fromTo(gameView[`index_line_${i}`],1,
|
|
||||||
{y:gameView[`index_line_${i}`].oy-700,x:gameView[`index_line_${i}`].ox-200},
|
|
||||||
{y:gameView[`index_line_${i}`].oy,x:gameView[`index_line_${i}`].ox,ease:i > 5 ? Back.easeOut.config(0) : Back.easeOut.config(1.2)},
|
|
||||||
`text_${i}`
|
|
||||||
)
|
|
||||||
.fromTo(gameView[`index_text_${i}`],.5,
|
|
||||||
{rotation:0},
|
|
||||||
{rotation:-25},
|
|
||||||
`text_${i}+=.4`
|
|
||||||
)
|
|
||||||
.to(gameView[`index_text_${i}`],.6,
|
|
||||||
{rotation:0},
|
|
||||||
`text_${i}+=1`
|
|
||||||
)
|
|
||||||
.timeScale(2.2)
|
|
||||||
// if(speArr.indexOf(i) > -1){
|
|
||||||
// let index = speArr2[speArr.indexOf(i)];
|
|
||||||
|
|
||||||
// timelineSpan
|
|
||||||
|
|
||||||
// .fromTo(gameView[`index_text_${index}`],1,
|
|
||||||
// {y:gameView[`index_text_${index}`].oy-700},
|
|
||||||
// {y:gameView[`index_text_${index}`].oy,ease:Back.easeOut.config(1.2)},
|
|
||||||
// `text_${i}`
|
|
||||||
// )
|
|
||||||
// //line
|
|
||||||
// .fromTo(gameView[`index_line_${index}`],1,
|
|
||||||
// {y:gameView[`index_line_${index}`].oy-700},
|
|
||||||
// {y:gameView[`index_line_${index}`].oy,ease:Back.easeOut.config(1.2)},
|
|
||||||
// `text_${i}`
|
|
||||||
// )
|
|
||||||
// .fromTo(gameView[`index_text_${index}`],.5,
|
|
||||||
// {rotation:0},
|
|
||||||
// {rotation:-25},
|
|
||||||
// `text_${i}+=.4`
|
|
||||||
// )
|
|
||||||
// .to(gameView[`index_text_${index}`],.6,
|
|
||||||
// {rotation:0},
|
|
||||||
// `text_${i}+=1`
|
|
||||||
// )
|
|
||||||
// // timelineSpan.add(otherLine,'same_${i}')
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
A.textTimeLine.add(timelineSpan,`-=${i == 1 ? 0 : .6}`)
|
|
||||||
A.textTimeLine.timeScale(1.2)
|
|
||||||
}
|
|
||||||
|
|
||||||
//other show animations
|
|
||||||
A.textTimeLine
|
|
||||||
.fromTo(
|
|
||||||
gameView.index_robot,
|
|
||||||
.7,
|
|
||||||
{y:gameView.index_robot.oy-1400},
|
|
||||||
{y:gameView.index_robot.oy,ease:Back.easeOut.config(1.2),
|
|
||||||
onStart:()=>{
|
|
||||||
A.waitLine.play();
|
|
||||||
},
|
|
||||||
onComplete:()=>{
|
|
||||||
A.robotFloat = TweenMax.to(gameView.index_robot,1,{y:gameView.index_robot.oy+20,yoyo:true,repeat:-1})
|
|
||||||
A.askFloat = TweenMax.to(gameView.index_ask,1,{y:gameView.index_ask.oy+20,yoyo:true,repeat:-1})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'robot-=.3'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
gameView.index_ask,
|
|
||||||
.7,
|
|
||||||
{x:gameView.index_ask.ox-150,alpha:0},
|
|
||||||
{x:gameView.index_ask.ox,alpha:1,ease:Back.easeOut.config(1.2)},
|
|
||||||
'robot+=.2'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
gameView.index_btn,
|
|
||||||
.7,
|
|
||||||
{y:gameView.index_btn.oy-1400+122/2},
|
|
||||||
{y:gameView.index_btn.oy+122/2,ease:Back.easeOut.config(1.2),
|
|
||||||
onComplete:()=>{
|
|
||||||
A.robotFloat = TweenMax.to(gameView.index_btn,1,{scaleX:.95,scaleY:.95,ease:Elastic.easeOut.config(1, 0.3),yoyo:true,repeat:-1})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'robot-=.3'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
gameView.index_pipe,
|
|
||||||
.7,
|
|
||||||
{y:-800},
|
|
||||||
{y:gameView.index_pipe.oy,ease:Back.easeOut.config(1.2)},
|
|
||||||
'robot-=.3'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
[gameView.index_title,gameView.index_desc],
|
|
||||||
.7,
|
|
||||||
{alpha:0},
|
|
||||||
{alpha:1},
|
|
||||||
'robot+=.3'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
[gameView.index_stars_1],
|
|
||||||
.7,
|
|
||||||
{x:gameView.index_stars_1.ox+300,alpha:0},
|
|
||||||
{x:gameView.index_stars_1.ox,alpha:1},
|
|
||||||
'robot+=.3'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
[gameView.index_stars_2],
|
|
||||||
.7,
|
|
||||||
{x:gameView.index_stars_2.ox-300,alpha:0},
|
|
||||||
{x:gameView.index_stars_2.ox,alpha:1},
|
|
||||||
'robot+=.55'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
[gameView.index_stars_3],
|
|
||||||
.7,
|
|
||||||
{x:gameView.index_stars_3.ox-300,alpha:0},
|
|
||||||
{x:gameView.index_stars_3.ox,alpha:1},
|
|
||||||
'robot+=.625'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
[gameView.index_star_2],
|
|
||||||
.7,
|
|
||||||
{x:gameView.index_star_2.ox-300,alpha:0},
|
|
||||||
{x:gameView.index_star_2.ox,alpha:1},
|
|
||||||
'robot+=.7'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
[gameView.index_leida],
|
|
||||||
.7,
|
|
||||||
{x:gameView.index_leida.ox+300,alpha:0},
|
|
||||||
{x:gameView.index_leida.ox,alpha:1},
|
|
||||||
'robot+=.8'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
[gameView.index_star_1],
|
|
||||||
.7,
|
|
||||||
{x:gameView.index_star_1.ox+300,alpha:0},
|
|
||||||
{x:gameView.index_star_1.ox,alpha:1},
|
|
||||||
'robot+=.9'
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 暂停
|
|
||||||
A.pause = function(){
|
|
||||||
A.textTimeLine.pause();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 开始
|
|
||||||
A.play = function(){
|
|
||||||
A.textTimeLine.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return A
|
|
||||||
}
|
|
||||||
|
|
||||||
createAnimations(){
|
|
||||||
let A = {},
|
|
||||||
gameView = this.game.gameView;
|
|
||||||
|
|
||||||
A.showTimeLine = new TimelineMax({
|
|
||||||
paused:true
|
|
||||||
})
|
|
||||||
|
|
||||||
for(let i = 1; i < 7; i++){
|
|
||||||
|
|
||||||
// console.log(gameView[`create_text_${i}`])
|
|
||||||
let timelineSpan = new TimelineMax()
|
|
||||||
//text
|
|
||||||
.fromTo(gameView[`create_text_${i}`],1,
|
|
||||||
{y:gameView[`create_text_${i}`].oy-100,x:gameView[`create_text_${i}`].ox-600},
|
|
||||||
{y:gameView[`create_text_${i}`].oy,x:gameView[`create_text_${i}`].ox,ease:i > 5 ? Back.easeOut.config(0) : Back.easeOut.config(1.2)},
|
|
||||||
`text_${i}`
|
|
||||||
)
|
|
||||||
//line
|
|
||||||
.fromTo(gameView[`create_line_${i}`],1,
|
|
||||||
{y:gameView[`create_line_${i}`].oy-100,x:gameView[`create_line_${i}`].ox-600},
|
|
||||||
{y:gameView[`create_line_${i}`].oy,x:gameView[`create_line_${i}`].ox,ease:i > 5 ? Back.easeOut.config(0) : Back.easeOut.config(1.2)},
|
|
||||||
`text_${i}`
|
|
||||||
)
|
|
||||||
.fromTo(gameView[`create_text_${i}`],.5,
|
|
||||||
{rotation:0},
|
|
||||||
{rotation:-25},
|
|
||||||
`text_${i}+=.4`
|
|
||||||
)
|
|
||||||
.to(gameView[`create_text_${i}`],.6,
|
|
||||||
{rotation:0},
|
|
||||||
`text_${i}+=1`
|
|
||||||
)
|
|
||||||
.timeScale(2)
|
|
||||||
|
|
||||||
A.showTimeLine.add(timelineSpan,`-=${i == 1? 0 : .55}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 暂停
|
|
||||||
A.pause = function(){
|
|
||||||
A.showTimeLine.pause();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 开始
|
|
||||||
A.play = function(){
|
|
||||||
A.showTimeLine.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return A
|
|
||||||
}
|
|
||||||
|
|
||||||
questionAnimations(target){
|
|
||||||
const A = {};
|
|
||||||
|
|
||||||
A.topAni = TweenMax.fromTo(target.topCartoon,2,{y:target.topCartoon.oy-16},{y:target.topCartoon.oy,yoyo:true,repeat:-1});
|
|
||||||
|
|
||||||
A.ld = TweenMax.fromTo(target.d_2,2,{x:target.d_2.ox-16},{x:target.d_2.ox,yoyo:true,repeat:-1});
|
|
||||||
|
|
||||||
A.star = TweenMax.fromTo(target.star,2,{rotation:0},{rotation:360,repeat:-1,ease:Linear.easeNone});
|
|
||||||
|
|
||||||
if(target.index == 1)
|
|
||||||
A.d_3 = TweenMax.fromTo(target.d_3,1.5,{y:target.d_3.oy-10,scaleX:1,scaleY:1},{y:target.d_3.oy,scaleX:.9,scaleY:.9,yoyo:true,repeat:-1});
|
|
||||||
|
|
||||||
if(target.index == 5)
|
|
||||||
A.d_4 = TweenMax.fromTo(target.d_4,1.5,{y:target.d_4.oy-10,scaleX:1,scaleY:1},{y:target.d_4.oy,scaleX:.9,scaleY:.9,yoyo:true,repeat:-1});
|
|
||||||
|
|
||||||
return A
|
|
||||||
}
|
|
||||||
|
|
||||||
showAnswerAnimation(target){
|
|
||||||
const A = {};
|
|
||||||
|
|
||||||
//ballLine
|
|
||||||
A.ballLine = new TimelineMax({paused:true,repeat:-1})
|
|
||||||
.to(target.ball_1,.5,{alpha:1})
|
|
||||||
.fromTo(target.ball_1,2,{x:302+12},{x:302+12+256,ease:SlowMo.ease.config(0.05, 0.7, true)},'start')
|
|
||||||
.fromTo(target.square,.4,{rotation:90},{rotation:90+360,ease:SlowMo.ease.config(0.05, 0.7, true)},'start+=.9')
|
|
||||||
.to(target.ball_1,.5,{alpha:0},'start+=1.9')
|
|
||||||
.fromTo(target.ball_2,.25,{alpha:0},{alpha:1},'start+=2.2')
|
|
||||||
.fromTo(target.ball_2,2,{x:302+12},{x:302+12+256,ease:SlowMo.ease.config(0.05, 0.7, true)},'start+=2.6')
|
|
||||||
.fromTo(target.square,.4,{rotation:90},{rotation:90+360},'start+=3.5')
|
|
||||||
.to(target.ball_2,.5,{alpha:0})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//show answer timeline
|
|
||||||
A.timeline = new TimelineMax({
|
|
||||||
onStart:()=>{
|
|
||||||
TweenMax.set(target.ball_2,{alpha:0})
|
|
||||||
},
|
|
||||||
onComplete:()=>{
|
|
||||||
A.ballLine.play();
|
|
||||||
A.float_1 = TweenMax.fromTo(target.star_1,2,{y:836},{y:836+10,yoyo:true,ease:Linear.easeNone,repeat:-1});
|
|
||||||
A.float_2 = TweenMax.fromTo(target.star_2,2,{y:441},{y:441+20,yoyo:true,ease:Linear.easeNone,repeat:-1,delay:1});
|
|
||||||
A.float_3 = TweenMax.fromTo(target.ld,2,{x:560},{x:560+15,yoyo:true,ease:Linear.easeNone,repeat:-1,delay:1.5});
|
|
||||||
A.btn = TweenMax.to(target.btn,1,{scaleX:.95,scaleY:.95,ease:Elastic.easeOut.config(1, 0.3),yoyo:true,repeat:-1,delay:2})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.fromTo(this.game.gameView.answerContainer,.4,{alpha:0},{alpha:1})
|
|
||||||
.fromTo(target.box,.45,{alpha:0,y:654},{alpha:1,y:354,ease:Back.easeOut.config(1.2)},'shown_1')
|
|
||||||
.fromTo(target.answer,.45,{alpha:0,y:363+98/2-200,scaleX:2,scaleY:2},{alpha:1,y:363+98/2,ease:Back.easeOut.config(1.2),scaleX:1,scaleY:1},'shown_1+=.2')
|
|
||||||
.fromTo(target.pipe,.55,{alpha:0,/*x:469-100,*/y:959-300},{alpha:1/*,x:469*/,y:959,ease:Back.easeOut.config(1.1)},'shown_2')
|
|
||||||
.fromTo(target.btn,.55,{alpha:0,/*x:221+318/2-100,*/y:1070+122/2-300},{alpha:1/*,x:221+318/2*/,y:1070+122/2,ease:Back.easeOut.config(1.1)},'shown_2')
|
|
||||||
.fromTo(target.answer_text,.55,{alpha:0,y:571+100},{alpha:1,y:571,ease:Back.easeOut.config(0)},'shown_3-=.3')
|
|
||||||
.fromTo(target.ld,.55,{alpha:0,x:560+200},{alpha:1,x:560,ease:Back.easeOut.config(1.1)},'shown_3-=.2')
|
|
||||||
.fromTo(target.star_1,.55,{alpha:0,x:96-200},{alpha:1,x:96,ease:Back.easeOut.config(1.1)},'shown_3-=.2')
|
|
||||||
.fromTo(target.star_2,.55,{alpha:0,x:491+100},{alpha:1,x:491,ease:Back.easeOut.config(1.1)},'shown_3-=.2')
|
|
||||||
.staggerFromTo([target.ball_1,target.ball_2,target.ban,target.square],.45,{alpha:0,scaleX:1.4,scaleY:1.4},{scaleX:1,scaleY:1,alpha:1,ease:Back.easeOut.config(1.1)},.1,'shown_3-=.1')
|
|
||||||
|
|
||||||
|
|
||||||
return A
|
|
||||||
}
|
|
||||||
|
|
||||||
//zhane result page ani
|
|
||||||
zhaneResultAnimations(){
|
|
||||||
let A = {};
|
|
||||||
let gameView = this.game.gameView;
|
|
||||||
|
|
||||||
//wait ani
|
|
||||||
A.waitLine = new TimelineMax({
|
|
||||||
paused:true,
|
|
||||||
repeat:-1,
|
|
||||||
yoyo:true
|
|
||||||
})
|
|
||||||
|
|
||||||
for(let i = 1; i < 10; i++){
|
|
||||||
A.waitLine
|
|
||||||
|
|
||||||
.fromTo(gameView[`zhane_index_text_${i}`],Math.random() * 2 + 1,
|
|
||||||
{rotation:0},
|
|
||||||
{rotation:(Math.random()>.5?1:-1) * Math.random() * 10+5,ease:Linear.easeNone},
|
|
||||||
`start`
|
|
||||||
)
|
|
||||||
.to(gameView[`zhane_index_text_${i}`],Math.random() * 1 + 1,
|
|
||||||
{rotation:0,ease:Linear.easeNone},
|
|
||||||
`start2`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
//show ani
|
|
||||||
A.textTimeLine = new TimelineMax({
|
|
||||||
paused:false,
|
|
||||||
delay: 1
|
|
||||||
})
|
|
||||||
|
|
||||||
.fromTo(
|
|
||||||
[gameView.zhane_index_title],
|
|
||||||
.7,
|
|
||||||
{x:0,alpha:0},
|
|
||||||
{x:gameView.zhane_index_title.ox+399/2,alpha:1,onComplete:()=>{
|
|
||||||
A.flash = TweenMax.to(gameView.zhane_index_title,.6,{scaleX:1.1,scaleY:1.1,ease:Back.easeOut.config(1.2),yoyo:true,repeat:-1})
|
|
||||||
}},
|
|
||||||
'start1'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
gameView.zhane_index_btn,
|
|
||||||
.7,
|
|
||||||
{y:gameView.zhane_index_btn.oy+500+122/2},
|
|
||||||
{y:gameView.zhane_index_btn.oy+122/2,ease:Back.easeOut.config(1.2),
|
|
||||||
onStart:()=>{
|
|
||||||
// A.waitLine.play();
|
|
||||||
},
|
|
||||||
onComplete:()=>{
|
|
||||||
A.robotFloat = TweenMax.to(gameView.zhane_index_btn,1,{scaleX:.95,scaleY:.95,ease:Elastic.easeOut.config(1, 0.3),yoyo:true,repeat:-1})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'start1+=.4'
|
|
||||||
)
|
|
||||||
|
|
||||||
let speArr = [1,2,4,5],
|
|
||||||
speArr2= [6,7,8,9]
|
|
||||||
for(let i = 1; i < 10; i++){
|
|
||||||
let timelineSpan = new TimelineMax()
|
|
||||||
//text
|
|
||||||
.fromTo(gameView[`zhane_index_text_${i}`],1,
|
|
||||||
{y:gameView[`zhane_index_text_${i}`].oy-700,x:gameView[`zhane_index_text_${i}`].ox-200},
|
|
||||||
{y:gameView[`zhane_index_text_${i}`].oy,x:gameView[`zhane_index_text_${i}`].ox,ease:i > 5 ? Back.easeOut.config(0) : Back.easeOut.config(1.2)},
|
|
||||||
`text_${i}`
|
|
||||||
)
|
|
||||||
//line
|
|
||||||
.fromTo(gameView[`zhane_index_line_${i}`],1,
|
|
||||||
{y:gameView[`zhane_index_line_${i}`].oy-700,x:gameView[`zhane_index_line_${i}`].ox-200},
|
|
||||||
{y:gameView[`zhane_index_line_${i}`].oy,x:gameView[`zhane_index_line_${i}`].ox,ease:i > 5 ? Back.easeOut.config(0) : Back.easeOut.config(1.2)},
|
|
||||||
`text_${i}`
|
|
||||||
)
|
|
||||||
.fromTo(gameView[`zhane_index_text_${i}`],.5,
|
|
||||||
{rotation:0},
|
|
||||||
{rotation:-25},
|
|
||||||
`text_${i}+=.4`
|
|
||||||
)
|
|
||||||
.to(gameView[`zhane_index_text_${i}`],.6,
|
|
||||||
{rotation:0},
|
|
||||||
`text_${i}+=1`
|
|
||||||
)
|
|
||||||
.timeScale(2.2)
|
|
||||||
|
|
||||||
|
|
||||||
A.textTimeLine.add(timelineSpan,`-=${i == 1 ? 0 : .6}`)
|
|
||||||
A.textTimeLine.timeScale(1.2)
|
|
||||||
}
|
|
||||||
|
|
||||||
//other show animations
|
|
||||||
A.textTimeLine
|
|
||||||
|
|
||||||
|
|
||||||
// .fromTo(
|
|
||||||
// gameView.index_pipe,
|
|
||||||
// .7,
|
|
||||||
// {y:-800},
|
|
||||||
// {y:gameView.index_pipe.oy,ease:Back.easeOut.config(1.2)},
|
|
||||||
// 'robot-=.3'
|
|
||||||
// )
|
|
||||||
|
|
||||||
.fromTo(
|
|
||||||
[gameView.zhane_index_stars_1],
|
|
||||||
.7,
|
|
||||||
{x:gameView.zhane_index_stars_1.ox+300,alpha:0},
|
|
||||||
{x:gameView.zhane_index_stars_1.ox,alpha:1,onComplete:()=>{
|
|
||||||
A.waitLine.play();
|
|
||||||
}},
|
|
||||||
'robot+=.3'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
[gameView.zhane_index_stars_2],
|
|
||||||
.7,
|
|
||||||
{x:gameView.zhane_index_stars_2.ox-300,alpha:0},
|
|
||||||
{x:gameView.zhane_index_stars_2.ox,alpha:1},
|
|
||||||
'robot+=.55'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
[gameView.zhane_index_stars_3],
|
|
||||||
.7,
|
|
||||||
{x:gameView.zhane_index_stars_3.ox-300,alpha:0},
|
|
||||||
{x:gameView.zhane_index_stars_3.ox,alpha:1},
|
|
||||||
'robot+=.625'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
[gameView.zhane_index_star_2],
|
|
||||||
.7,
|
|
||||||
{x:gameView.zhane_index_star_2.ox-300,alpha:0},
|
|
||||||
{x:gameView.zhane_index_star_2.ox,alpha:1},
|
|
||||||
'robot+=.7'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
[gameView.zhane_index_leida],
|
|
||||||
.7,
|
|
||||||
{x:gameView.zhane_index_leida.ox+300,alpha:0},
|
|
||||||
{x:gameView.zhane_index_leida.ox,alpha:1},
|
|
||||||
'robot+=.8'
|
|
||||||
)
|
|
||||||
.fromTo(
|
|
||||||
[gameView.zhane_index_star_1],
|
|
||||||
.7,
|
|
||||||
{x:gameView.zhane_index_star_1.ox+300,alpha:0},
|
|
||||||
{x:gameView.zhane_index_star_1.ox,alpha:1},
|
|
||||||
'robot+=.9'
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 暂停
|
|
||||||
A.pause = function(){
|
|
||||||
A.textTimeLine.pause();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 开始
|
|
||||||
A.play = function(){
|
|
||||||
A.textTimeLine.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return A
|
|
||||||
}
|
|
||||||
}
|
|
||||||
module.exports = animation;
|
|
||||||
@ -1,496 +0,0 @@
|
|||||||
import frameData from './frameData';
|
|
||||||
import maskCreater from './maskCreater'; //mask creater
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @method
|
|
||||||
* @desc - a creater for game view
|
|
||||||
* @param argument{
|
|
||||||
* @param {Object} game - find game object
|
|
||||||
* @param {Object} loader - find game loader
|
|
||||||
* @param {Object} layout - find layout object
|
|
||||||
* @param {Boolean} sprite - is sprite ?
|
|
||||||
* @param {Object} circle - draw circle param
|
|
||||||
* @param {String} layId - layout id
|
|
||||||
* @param {String} imgId - img id
|
|
||||||
* @param {Number} x - obj x-pos
|
|
||||||
* @param {Number} y - obj y-pos
|
|
||||||
* @param {Number} width - createjs rect width
|
|
||||||
* @param {Number} height - createjs rect height
|
|
||||||
* @param {String} bg - createjs rect background
|
|
||||||
* @param {Number} regX - animation orgin x
|
|
||||||
* @param {Number} regY - animation orgin y
|
|
||||||
* @param {Number} scaleX - obj scale x
|
|
||||||
* @param {Number} scaleY - obj scale y
|
|
||||||
* @param {Number} moved - obj can move or no
|
|
||||||
* @param {Number} vx - obj x move speed
|
|
||||||
* @param {Number} alpha - obj alpha
|
|
||||||
* @param {Number} type - obj type --- 1 normal / 2 ding / 3 break / 4 word-1 / 5 word -2
|
|
||||||
* @param {Boolean} visible - obj visible
|
|
||||||
* @param {Number} framesName - sprite frames name
|
|
||||||
* @param {String} aniName - sprite name
|
|
||||||
* @param {String} ani_1 - sprite aniamtions name - 1
|
|
||||||
* @param {String} container - addchild container
|
|
||||||
* @param {String} textBaseline - text base line
|
|
||||||
* @param {String} textAlign - text align
|
|
||||||
* @param {String} textColor - text color
|
|
||||||
* @param {String} textSize - text size
|
|
||||||
* @param {Boolean} shadow - show text shadow true or false
|
|
||||||
* @param {Boolean} shadowColor - text shadow color
|
|
||||||
* @param {Boolean} shadowOffsetX- text shadow offsetX
|
|
||||||
* @param {Boolean} shadowOffsetY- text shadow offsetY
|
|
||||||
* @param {Boolean} shadowBlur - text shadow blur
|
|
||||||
* @param {Number} cacheX - cache Text X
|
|
||||||
* @param {Number} cacheY - cache Text Y
|
|
||||||
* @param {Number} cacheW - cache Text width
|
|
||||||
* @param {Number} cacheH - cache Text height
|
|
||||||
* }
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
const creater = function (argument) {
|
|
||||||
let _default = {
|
|
||||||
game: null,
|
|
||||||
loader: null,
|
|
||||||
layout: null,
|
|
||||||
sprite: false,
|
|
||||||
single: false,
|
|
||||||
empty: false,
|
|
||||||
layId: '',
|
|
||||||
imgId: '',
|
|
||||||
name: '',
|
|
||||||
ox: 0,
|
|
||||||
oy: 0,
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
width: 750,
|
|
||||||
height: 1334,
|
|
||||||
rotation: 0,
|
|
||||||
bg: 'rgba(255,255,255,1)',
|
|
||||||
regX: 0,
|
|
||||||
regY: 0,
|
|
||||||
visible: true,
|
|
||||||
hide: false,
|
|
||||||
moved: 0,
|
|
||||||
vx: 1,
|
|
||||||
circle: {
|
|
||||||
visible: false,
|
|
||||||
sector: false,
|
|
||||||
startAngle: 0,
|
|
||||||
endAngle: Math.PI * 2,
|
|
||||||
},
|
|
||||||
circleLine: {
|
|
||||||
visible: false,
|
|
||||||
borderWidth: 2,
|
|
||||||
color: '#ffffff',
|
|
||||||
},
|
|
||||||
mask: {
|
|
||||||
visible: false,
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
r: 0,
|
|
||||||
p: null,
|
|
||||||
debug: false
|
|
||||||
},
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 1,
|
|
||||||
type: 0,
|
|
||||||
framesName: '',
|
|
||||||
defaultAni: 'default',
|
|
||||||
container: '',
|
|
||||||
rect: {
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
borderWidth: 1,
|
|
||||||
p: null,
|
|
||||||
blurFilter: false
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
visible: false,
|
|
||||||
word: "",
|
|
||||||
baseline: "alphabetic",
|
|
||||||
align: "center",
|
|
||||||
color: "#ffffff",
|
|
||||||
size: "26px fzzt",
|
|
||||||
lineHeight: "30"
|
|
||||||
},
|
|
||||||
singleSprite: {
|
|
||||||
visible: false,
|
|
||||||
parent: {},
|
|
||||||
name: ''
|
|
||||||
},
|
|
||||||
shadow: false,
|
|
||||||
shadowColor: '#dddddd',
|
|
||||||
roCenter: false,
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowOffsetY: 0,
|
|
||||||
shadowBlur: 2,
|
|
||||||
cacheX: 0,
|
|
||||||
cacheY: 0,
|
|
||||||
cacheW: 750,
|
|
||||||
cacheH: 1334,
|
|
||||||
return: false,
|
|
||||||
mouseEnabled: true,
|
|
||||||
compositeOperation: ''
|
|
||||||
}
|
|
||||||
|
|
||||||
let maskObj = Object.assign({}, _default.mask, argument.mask);
|
|
||||||
let textObj = Object.assign({}, _default.text, argument.text);
|
|
||||||
let rectObj = Object.assign({}, _default.rect, argument.rect);
|
|
||||||
let circleObj = Object.assign({}, _default.circle, argument.circle);
|
|
||||||
let singleSpriteObj = Object.assign({}, _default.singleSprite, argument.singleSprite);
|
|
||||||
let circleLineObj = Object.assign({}, _default.circleLine, argument.circleLine);
|
|
||||||
|
|
||||||
|
|
||||||
let opts = Object.assign({}, _default, argument);
|
|
||||||
opts.mask = maskObj;
|
|
||||||
opts.text = textObj;
|
|
||||||
opts.rect = rectObj;
|
|
||||||
opts.circle = circleObj;
|
|
||||||
opts.circleLine = circleLineObj;
|
|
||||||
opts.singleSprit = singleSpriteObj;
|
|
||||||
|
|
||||||
// console.log(opts.layId,opts.imgId)
|
|
||||||
//雪碧图单帧
|
|
||||||
if (opts.singleSprite.visible) {
|
|
||||||
// console.log(opts.singleSprite.parent,opts.singleSprite.name)
|
|
||||||
opts.layout[opts.layId] = new createjs.Sprite(opts.singleSprite.parent.spriteSheet, opts.singleSprite.name).set({
|
|
||||||
x: opts.x + (opts.roCenter ? opts.width / 2 : 0),
|
|
||||||
y: opts.y + (opts.roCenter ? opts.height / 2 : 0),
|
|
||||||
ox: opts.ox ? opts.ox : opts.x + (opts.roCenter ? opts.width / 2 : 0),
|
|
||||||
oy: opts.oy ? opts.oy : opts.y + (opts.roCenter ? opts.height / 2 : 0),
|
|
||||||
regX: opts.regX + (opts.roCenter ? opts.width / 2 : 0),
|
|
||||||
regY: opts.regY + (opts.roCenter ? opts.height / 2 : 0),
|
|
||||||
type: opts.type,
|
|
||||||
tindex: opts.tindex,
|
|
||||||
hide: opts.hide,
|
|
||||||
state: opts.state,
|
|
||||||
scaleX: opts.scaleX,
|
|
||||||
scaleY: opts.scaleY,
|
|
||||||
rotation: opts.rotation,
|
|
||||||
width: opts.width,
|
|
||||||
height: opts.height,
|
|
||||||
name: opts.name || opts.layId,
|
|
||||||
moved: opts.moved,
|
|
||||||
vx: opts.vx,
|
|
||||||
sp: opts.sp,
|
|
||||||
hs: opts.hs,
|
|
||||||
alpha: opts.alpha,
|
|
||||||
visible: opts.visible,
|
|
||||||
mask: opts.mask.visible ? shape : null,
|
|
||||||
mouseEnabled: opts.mouseEnabled
|
|
||||||
});
|
|
||||||
if (opts.maskAnimation) {
|
|
||||||
opts.maskContainer = new createjs.Container();
|
|
||||||
|
|
||||||
if (opts.transform)
|
|
||||||
opts.layout[opts.layId].setTransform(...opts.transform);
|
|
||||||
|
|
||||||
|
|
||||||
opts.maskContainer.mask = new maskCreater(opts.mask.name, opts.mask.type, opts.mask.transform);
|
|
||||||
opts.maskContainer.compositeOperation = opts.compositeOperation;
|
|
||||||
opts.maskContainer.addChild(opts.layout[opts.layId]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//帧动画
|
|
||||||
else if (opts.sprite) {
|
|
||||||
let img = opts.loader.getResult(opts.imgId);
|
|
||||||
var spriteSheet = new createjs.SpriteSheet({
|
|
||||||
images: [img],
|
|
||||||
frames: frameData[opts.framesName].frames,
|
|
||||||
animations: opts.animations
|
|
||||||
});
|
|
||||||
|
|
||||||
opts.layout[opts.layId] = new createjs.Sprite(spriteSheet, opts.defaultAni).set({
|
|
||||||
x: opts.x + (opts.roCenter ? opts.width / 2 : 0),
|
|
||||||
y: opts.y + (opts.roCenter ? opts.height / 2 : 0),
|
|
||||||
// width: frameData[opts.framesName].sourceW,
|
|
||||||
// height: frameData[opts.framesName].sourceH,
|
|
||||||
ox: opts.ox ? opts.ox : opts.x + (opts.roCenter ? opts.width / 2 : 0),
|
|
||||||
oy: opts.oy ? opts.oy : opts.y + (opts.roCenter ? opts.height / 2 : 0),
|
|
||||||
regX: opts.regX + (opts.roCenter ? opts.width / 2 : 0),
|
|
||||||
regY: opts.regY + (opts.roCenter ? opts.height / 2 : 0),
|
|
||||||
type: opts.type,
|
|
||||||
state: opts.state,
|
|
||||||
scaleX: opts.scaleX,
|
|
||||||
scaleY: opts.scaleY,
|
|
||||||
name: opts.name || opts.layId,
|
|
||||||
compositeOperation: opts.compositeOperation,
|
|
||||||
alpha: opts.alpha
|
|
||||||
});
|
|
||||||
} else if (opts.maskAnimation) {
|
|
||||||
//遮罩动画
|
|
||||||
opts.maskContainer = new createjs.Container();
|
|
||||||
let img = opts.loader.getResult(opts.imgId);
|
|
||||||
|
|
||||||
opts.layout[opts.layId] = new createjs.Bitmap(img).setTransform(...opts.transform).set({
|
|
||||||
alpha: opts.alpha,
|
|
||||||
ox: opts.ox,
|
|
||||||
oy: opts.oy
|
|
||||||
});
|
|
||||||
|
|
||||||
opts.maskContainer.mask = new maskCreater(opts.mask.name, opts.mask.type, opts.mask.transform);
|
|
||||||
opts.maskContainer.compositeOperation = opts.compositeOperation;
|
|
||||||
opts.maskContainer.addChild(opts.layout[opts.layId]);
|
|
||||||
|
|
||||||
} else if (opts.text.visible) {
|
|
||||||
//文字
|
|
||||||
let shape;
|
|
||||||
if (opts.mask.visible) {
|
|
||||||
let g = new createjs.Graphics();
|
|
||||||
shape = new createjs.Shape().set({
|
|
||||||
graphics: g.drawRect(opts.mask.x, opts.mask.y, opts.mask.width, opts.mask.height),
|
|
||||||
x: opts.mask.x,
|
|
||||||
y: opts.mask.y,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
let shadow = opts.shadow ? new createjs.Shadow(opts.shadowColor, opts.shadowOffsetX, opts.shadowOffsetY, opts.shadowBlur) : null;
|
|
||||||
|
|
||||||
opts.layout[opts.layId] = new createjs.Text(opts.text.word, opts.text.size, opts.text.color).set({
|
|
||||||
x: opts.x,
|
|
||||||
y: opts.y,
|
|
||||||
ox: opts.ox ? opts.ox : opts.x,
|
|
||||||
oy: opts.oy ? opts.oy : opts.y,
|
|
||||||
regX: opts.regX,
|
|
||||||
regY: opts.regY,
|
|
||||||
scaleX: opts.scaleX,
|
|
||||||
scaleY: opts.scaleY,
|
|
||||||
alpha: opts.alpha,
|
|
||||||
shadow: shadow,
|
|
||||||
name: opts.name || opts.layId,
|
|
||||||
mask: opts.mask.visible ? shape : null,
|
|
||||||
lineHeight: opts.text.lineHeight,
|
|
||||||
textBaseline: opts.text.baseline,
|
|
||||||
textAlign: opts.text.align,
|
|
||||||
mouseEnabled: opts.mouseEnabled
|
|
||||||
})
|
|
||||||
// console.log(opts.layout[opts.layId])
|
|
||||||
opts.game.webGL && opts.cacheContainer.addChild(opts.layout[opts.layId])
|
|
||||||
opts.game.webGL && opts.cacheContainer.cache(opts.cacheX, opts.cacheY, opts.cacheW, opts.cacheH);
|
|
||||||
} else if (opts.rect.visible) {
|
|
||||||
//Graphics rect
|
|
||||||
let g = new createjs.Graphics();
|
|
||||||
|
|
||||||
// if (opts.mask.visible) {
|
|
||||||
// let g2 = new createjs.Graphics();
|
|
||||||
// shape = new createjs.Shape().set({
|
|
||||||
// graphics: opts.mask.p ? g2.p(opts.mask.p) : g2.drawRect(opts.mask.x, opts.mask.y, opts.mask.width, opts.mask.height),
|
|
||||||
// x: opts.x,
|
|
||||||
// y: opts.y,
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
|
|
||||||
let graphics;
|
|
||||||
if (opts.rect.blurFilter) {
|
|
||||||
graphics = g.beginBitmapFill(opts.loader.getResult(opts.imgId), 'no-repeat')
|
|
||||||
.drawRect(opts.rect.x, opts.rect.y, opts.rect.width, opts.rect.height)
|
|
||||||
|
|
||||||
} else {
|
|
||||||
// console.log(opts.rect)
|
|
||||||
if (opts.rect.round && opts.rect.roundLine)
|
|
||||||
graphics = g.setStrokeStyle(opts.rect.borderWidth).f(opts.bg).s(opts.rect.bg).drawRoundRect(opts.rect.x, opts.rect.y, opts.rect.width, opts.rect.height, opts.rect.r).es();
|
|
||||||
else if (opts.rect.round)
|
|
||||||
graphics = g.f(opts.bg).drawRoundRect(opts.rect.x, opts.rect.y, opts.rect.width, opts.rect.height, opts.rect.r)
|
|
||||||
else if (opts.rect.roundLine)
|
|
||||||
graphics = g.setStrokeStyle(opts.rect.borderWidth).f(opts.bg).s(opts.rect.bg).drawRect(opts.rect.x, opts.rect.y, opts.rect.width, opts.rect.height).es();
|
|
||||||
else if (opts.rect.p)
|
|
||||||
graphics = g.p(opts.rect.p);
|
|
||||||
else
|
|
||||||
graphics = g.f(opts.bg).drawRect(opts.rect.x, opts.rect.y, opts.rect.width, opts.rect.height);
|
|
||||||
}
|
|
||||||
|
|
||||||
//create shape
|
|
||||||
opts.layout[opts.layId] = new createjs.Shape().set({
|
|
||||||
graphics: graphics,
|
|
||||||
x: opts.x,
|
|
||||||
y: opts.y,
|
|
||||||
regX: opts.regX,
|
|
||||||
regY: opts.regY,
|
|
||||||
alpha: opts.alpha,
|
|
||||||
name: opts.name || opts.layId,
|
|
||||||
mouseEnabled: opts.mouseEnabled
|
|
||||||
});
|
|
||||||
|
|
||||||
opts.layout[opts.layId].mask = new maskCreater(opts.mask.name, opts.mask.type, opts.mask.transform);
|
|
||||||
|
|
||||||
if (opts.rect.blurFilter) {
|
|
||||||
let blurFilter = new createjs.BlurFilter(10, 10, 10);
|
|
||||||
opts.layout[opts.layId].filters = [blurFilter];
|
|
||||||
opts.layout[opts.layId].cache(opts.rect.x, opts.rect.y, opts.rect.width, opts.rect.height);
|
|
||||||
}
|
|
||||||
|
|
||||||
opts.game.webGL && opts.cacheContainer.addChild(opts.layout[opts.layId])
|
|
||||||
opts.game.webGL && opts.cacheContainer.cache(opts.cacheX, opts.cacheY, opts.cacheW, opts.cacheH);
|
|
||||||
}
|
|
||||||
else if (opts.circle.visible) {
|
|
||||||
//Graphics circle
|
|
||||||
let g = new createjs.Graphics();
|
|
||||||
let angle, startAngle, endAngle, x1 = 0, y1 = 0;
|
|
||||||
if (opts.circle.sector) { //画扇形
|
|
||||||
angle = (Math.abs(opts.circle.angle) > 360) ? 360 : opts.circle.angle;
|
|
||||||
startAngle = opts.circle.startAngle * Math.PI / 180;
|
|
||||||
endAngle = opts.circle.startAngle + angle * Math.PI / 180;
|
|
||||||
x1 = opts.circle.x + opts.circle.r * Math.cos(startAngle);
|
|
||||||
y1 = opts.circle.x + opts.circle.r * Math.sin(startAngle);
|
|
||||||
}
|
|
||||||
|
|
||||||
opts.layout[opts.layId] = new createjs.Shape().set({
|
|
||||||
graphics: g.f(opts.bg).moveTo(opts.circle.x, opts.circle.y).arc(opts.circle.x, opts.circle.y, opts.circle.r, startAngle ? startAngle : 0, endAngle ? endAngle : Math.PI * 2).endFill(),
|
|
||||||
x: opts.x + (opts.roCenter ? opts.circle.r : 0),
|
|
||||||
y: opts.y + (opts.roCenter ? opts.circle.r : 0),
|
|
||||||
regX: opts.regX + (opts.roCenter ? opts.circle.r : 0),
|
|
||||||
regY: opts.regY + (opts.roCenter ? opts.circle.r : 0),
|
|
||||||
rotation: opts.rotation,
|
|
||||||
alpha: opts.alpha,
|
|
||||||
name: opts.name || opts.layId,
|
|
||||||
mouseEnabled: opts.mouseEnabled
|
|
||||||
});
|
|
||||||
// opts.game.webGL && opts.cacheContainer.addChild(opts.layout[opts.layId])
|
|
||||||
// opts.game.webGL && opts.cacheContainer.cache(opts.cacheX,opts.cacheY,opts.cacheW,opts.cacheH);
|
|
||||||
}
|
|
||||||
else if (opts.circleLine.visible) {
|
|
||||||
//circle line
|
|
||||||
let g = new createjs.Graphics();
|
|
||||||
|
|
||||||
opts.layout[opts.layId] = new createjs.Shape().set({
|
|
||||||
graphics: g.setStrokeStyle(opts.circleLine.borderWidth).s(opts.circleLine.color).arc(opts.circleLine.x, opts.circleLine.y, opts.circleLine.r, opts.circleLine.startAngle, opts.circleLine.endAngle).endFill(),
|
|
||||||
x: opts.x + (opts.roCenter ? opts.circleLine.r : 0),
|
|
||||||
y: opts.y + (opts.roCenter ? opts.circleLine.r : 0),
|
|
||||||
regX: opts.regX + (opts.roCenter ? opts.circleLine.r : 0),
|
|
||||||
regY: opts.regY + (opts.roCenter ? opts.circleLine.r : 0),
|
|
||||||
rotation: opts.rotation,
|
|
||||||
alpha: opts.alpha,
|
|
||||||
name: opts.name || opts.layId,
|
|
||||||
mouseEnabled: opts.mouseEnabled
|
|
||||||
});
|
|
||||||
|
|
||||||
// opts.game.webGL && opts.cacheContainer.addChild(opts.layout[opts.layId])
|
|
||||||
// opts.game.webGL && opts.cacheContainer.cache(opts.cacheX,opts.cacheY,opts.cacheW,opts.cacheH);
|
|
||||||
}
|
|
||||||
else if (opts.bitmapShap) {
|
|
||||||
let g = new createjs.Graphics();
|
|
||||||
let img = opts.loader.getResult(opts.imgId);
|
|
||||||
opts.layout[opts.layId] = new createjs.Shape().set({
|
|
||||||
graphics: g.beginBitmapFill(img, "no-repeat").drawRect(0, 0, opts.width, opts.height),
|
|
||||||
x: opts.x,
|
|
||||||
y: opts.y,
|
|
||||||
scaleX: opts.scaleX,
|
|
||||||
scaleY: opts.scaleY,
|
|
||||||
alpha: opts.alpha,
|
|
||||||
name: opts.name || opts.layId,
|
|
||||||
mouseEnabled: false
|
|
||||||
});
|
|
||||||
// (opts.game.webGL || opts.game.needCache) && opts.cacheContainer.cache(opts.cacheX,opts.cacheY,opts.cacheW,opts.cacheH);
|
|
||||||
}
|
|
||||||
else if (opts.bitmapCircle) {
|
|
||||||
let g = new createjs.Graphics();
|
|
||||||
let img;
|
|
||||||
if (typeof (opts.imgId) == 'object') {
|
|
||||||
if (opts.imgId.other) {
|
|
||||||
img = opts.game.friend.loadedPhoto;
|
|
||||||
}
|
|
||||||
else if (opts.imgId.fighter) {
|
|
||||||
img = opts.imgId.fighter
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
img = opts.game.userinfo.loadedPhoto
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
img = opts.loader.getResult(opts.imgId)
|
|
||||||
}
|
|
||||||
opts.layout[opts.layId] = new createjs.Shape().set({
|
|
||||||
graphics: g.beginBitmapFill(img, "no-repeat").drawCircle(opts.circle.x, opts.circle.y, opts.circle.r),
|
|
||||||
x: opts.x,
|
|
||||||
y: opts.y,
|
|
||||||
scaleX: opts.scaleX,
|
|
||||||
scaleY: opts.scaleY,
|
|
||||||
alpha: opts.alpha,
|
|
||||||
name: opts.name || opts.layId,
|
|
||||||
mouseEnabled: false
|
|
||||||
});
|
|
||||||
// (opts.game.webGL || opts.game.needCache) && opts.cacheContainer.cache(opts.cacheX,opts.cacheY,opts.cacheW,opts.cacheH);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
//图
|
|
||||||
let img = opts.loader.getResult(opts.imgId);
|
|
||||||
//taikohui userphoto
|
|
||||||
let shape;
|
|
||||||
if (opts.mask.visible) {
|
|
||||||
let g = new createjs.Graphics();
|
|
||||||
shape = new createjs.Shape().set({
|
|
||||||
graphics: g.drawRect(opts.mask.x, opts.mask.y, opts.mask.width, opts.mask.height),
|
|
||||||
x: opts.x,
|
|
||||||
y: opts.y,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
opts.layout[opts.layId] = new createjs.Bitmap(img).set({
|
|
||||||
x: opts.x + (opts.roCenter ? opts.width / 2 : 0),
|
|
||||||
y: opts.y + (opts.roCenter ? opts.height / 2 : 0),
|
|
||||||
ox: opts.ox ? opts.ox : opts.x,
|
|
||||||
oy: opts.oy ? opts.oy : opts.y,
|
|
||||||
width: opts.width ? opts.width : img.width,
|
|
||||||
height: opts.height ? opts.height : img.height,
|
|
||||||
regX: opts.regX + (opts.roCenter ? opts.width / 2 : 0),
|
|
||||||
regY: opts.regY + (opts.roCenter ? opts.height / 2 : 0),
|
|
||||||
rotation: opts.rotation,
|
|
||||||
visible: opts.visible,
|
|
||||||
scaleX: opts.scaleX,
|
|
||||||
scaleY: opts.scaleY,
|
|
||||||
type: opts.type,
|
|
||||||
moved: opts.moved,
|
|
||||||
name: opts.name || opts.layId,
|
|
||||||
vx: opts.vx,
|
|
||||||
hide: opts.hide,
|
|
||||||
state: opts.state,
|
|
||||||
mask: opts.mask.visible ? shape : null,
|
|
||||||
alpha: opts.alpha,
|
|
||||||
mouseEnabled: opts.mouseEnabled
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (opts.mask.visible) {
|
|
||||||
let shape;
|
|
||||||
let g = new createjs.Graphics();
|
|
||||||
if (opts.mask.graph == 'rect') {
|
|
||||||
shape = new createjs.Shape().set({
|
|
||||||
graphics: g.drawRect(opts.mask.x, opts.mask.y, opts.mask.width, opts.mask.height),
|
|
||||||
// x : opts.mask.x,
|
|
||||||
// y : opts.mask.y,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else if (opts.mask.graph == 'rectRound') {
|
|
||||||
shape = new createjs.Shape().set({
|
|
||||||
graphics: g.drawRoundRect(opts.mask.x, opts.mask.y, opts.mask.width, opts.mask.height, opts.mask.r)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
shape = new createjs.Shape().set({
|
|
||||||
graphics: g.drawCircle(0, 0, opts.mask.r),
|
|
||||||
x: opts.mask.x,
|
|
||||||
y: opts.mask.y,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
opts.layout[opts.layId].mask = shape;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!opts.return) {
|
|
||||||
let target = opts.layout[opts.layId];
|
|
||||||
|
|
||||||
if ((opts.text.visible || opts.rect.visible) && opts.game.webGL) {
|
|
||||||
target = opts.cacheContainer
|
|
||||||
} else {
|
|
||||||
opts.maskContainer
|
|
||||||
}
|
|
||||||
|
|
||||||
opts.container.addChild(target)
|
|
||||||
// opts.container.addChild(opts.text.visible || opts.rect.visible ? opts.cacheContainer : opts.maskAnimation ? opts.maskContainer : opts.layout[opts.layId])
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return opts.layout[opts.layId]
|
|
||||||
}
|
|
||||||
module.exports = creater;
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
/*================================*/
|
|
||||||
/*============= 帧数据 ============*/
|
|
||||||
/*================================*/
|
|
||||||
const framesData = {
|
|
||||||
'loading': {
|
|
||||||
"sourceW": 1506,
|
|
||||||
"sourceH": 1837,
|
|
||||||
"frames": [
|
|
||||||
[1, 1, 645, 32, 0, 0, 0],
|
|
||||||
[648, 1, 359, 419, 0, 0, 0],
|
|
||||||
[1, 422, 395, 520, 0, 0, 0],
|
|
||||||
[398, 35, 246, 84, 0, 0, 0],
|
|
||||||
[1, 35, 392, 334, 0, 0, 0],
|
|
||||||
[398, 121, 243, 28, 0, 0, 0],
|
|
||||||
[643, 121, 3, 3, 0, 0, 0],
|
|
||||||
[643, 126, 3, 3, 0, 0, 0],
|
|
||||||
[1, 371, 37, 41, 0, 0, 0],
|
|
||||||
[1, 414, 4, 3, 0, 0, 0],
|
|
||||||
[7, 414, 4, 3, 0, 0, 0],
|
|
||||||
[40, 371, 402, 32, 0, 0, 0],
|
|
||||||
[40, 405, 15, 15, 0, 0, 0],
|
|
||||||
[57, 405, 14, 14, 0, 0, 0],
|
|
||||||
[73, 405, 10, 12, 0, 0, 0],
|
|
||||||
[85, 405, 11, 11, 0, 0, 0],
|
|
||||||
[98, 405, 10, 10, 0, 0, 0],
|
|
||||||
[110, 405, 10, 10, 0, 0, 0],
|
|
||||||
[122, 405, 7, 8, 0, 0, 0],
|
|
||||||
[131, 405, 7, 8, 0, 0, 0],
|
|
||||||
[140, 405, 10, 7, 0, 0, 0],
|
|
||||||
[152, 405, 8, 7, 0, 0, 0],
|
|
||||||
[1, 944, 30, 30, 0, 0, 0],
|
|
||||||
[1, 976, 26, 25, 0, 0, 0],
|
|
||||||
[29, 976, 21, 23, 0, 0, 0],
|
|
||||||
[33, 944, 385, 28, 0, 0, 0],
|
|
||||||
[52, 974, 328, 28, 0, 0, 0],
|
|
||||||
[382, 974, 23, 22, 0, 0, 0],
|
|
||||||
[407, 974, 19, 19, 0, 0, 0],
|
|
||||||
[444, 151, 171, 167, 0, 0, 0],
|
|
||||||
[398, 422, 392, 334, 0, 0, 0],
|
|
||||||
[428, 758, 306, 244, 0, 0, 0]
|
|
||||||
],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
module.exports = framesData;
|
|
||||||
@ -1,369 +0,0 @@
|
|||||||
import STAGE from "./stage";
|
|
||||||
import LAYOUT from "./view";
|
|
||||||
import { gsap } from "gsap";
|
|
||||||
import Resource from "./preload";
|
|
||||||
import utils from '@/utils/index.js';
|
|
||||||
import Matter from 'matter-js';
|
|
||||||
import decomp from 'poly-decomp';
|
|
||||||
|
|
||||||
|
|
||||||
class game {
|
|
||||||
// 构造器
|
|
||||||
constructor() {
|
|
||||||
// 开始debug
|
|
||||||
this.debug = process.env.NODE_ENV === "development" ? true : false; // process.env !== "production", // 游戏测试模式是否开启
|
|
||||||
// 需要显示的页面
|
|
||||||
this.showPageIndex = 0; // 0 loading | 1 story | 2 rule | 3 game index | 4 result | 5 poster
|
|
||||||
this.needUpdate = true;
|
|
||||||
|
|
||||||
this.scene = 1; // 1 - loading | 2 - index
|
|
||||||
|
|
||||||
this.webGL = true;//window.deviceInfo.system == 'IOS' ? true : false; // 是否开启webGL
|
|
||||||
|
|
||||||
this.momentFPS = [];
|
|
||||||
|
|
||||||
this.averageFPS = 60; //平均帧率
|
|
||||||
|
|
||||||
this.nowPlayingAnimation = null; // 当前正在播放的动画
|
|
||||||
|
|
||||||
this.playingSound = null; // 当前正在播放的声音
|
|
||||||
|
|
||||||
this.afterResLoadedStatus = false; // 语言资源全部加载完毕状态
|
|
||||||
|
|
||||||
this.otherLoadedStatus = false; // 对应语言剩余资源全部加载完毕状态
|
|
||||||
|
|
||||||
this.langConfig = { id: 2 }; //语言配置 默认为普通话
|
|
||||||
|
|
||||||
this.playingSounds = []; // 将播放过的音频推入数据记录
|
|
||||||
|
|
||||||
// 选择语言后的后置资源加载
|
|
||||||
this.afterLoaderArr = [];
|
|
||||||
|
|
||||||
// 备用资源加载 更多反应资源加载
|
|
||||||
this.otherLoaderArr = [];
|
|
||||||
|
|
||||||
this.utils = utils;
|
|
||||||
|
|
||||||
// init Matter
|
|
||||||
this.Matter = Matter;
|
|
||||||
this.Engine = Matter.Engine,
|
|
||||||
this.Render = Matter.Render,
|
|
||||||
this.Runner = Matter.Runner,
|
|
||||||
this.Bodies = Matter.Bodies,
|
|
||||||
this.Composite = Matter.Composite;
|
|
||||||
Matter.Common.setDecomp(decomp)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化
|
|
||||||
init(pointer) {
|
|
||||||
this.vue = pointer;
|
|
||||||
// 初始化画布
|
|
||||||
this.stage = new STAGE().createStage(this);
|
|
||||||
//实例化layout
|
|
||||||
this.VIEW = new LAYOUT(this);
|
|
||||||
|
|
||||||
// 保存帧率
|
|
||||||
// this.saveMomentFPS = setInterval(() => {
|
|
||||||
// if (this.FPS > 30)
|
|
||||||
// this.momentFPS.push(this.FPS)
|
|
||||||
// // console.log(this.momentFPS.length)
|
|
||||||
// if (this.momentFPS.length > 20)
|
|
||||||
// this.momentFPS.shift();
|
|
||||||
// }, 10);
|
|
||||||
|
|
||||||
|
|
||||||
// 绑定事件
|
|
||||||
// this.bindEvents();
|
|
||||||
|
|
||||||
|
|
||||||
// 初始化主资源加载器
|
|
||||||
this.loadingRes();
|
|
||||||
|
|
||||||
// 初始化物理引擎
|
|
||||||
this.initMatterEngine();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// 开发debug模式
|
|
||||||
devDebugMode() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
loadingRes() {
|
|
||||||
this.loadingLoader = utils.preload({
|
|
||||||
imgList: Resource.before.imgList,
|
|
||||||
// audioList: Resource.main.audioList,
|
|
||||||
loadStart: () => {
|
|
||||||
// console.log(this.VIEW.loading_progress_bar.graphics.command.w)
|
|
||||||
},
|
|
||||||
progressCallBack: (progress) => {
|
|
||||||
// progress; // 0.99
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
completeCallBack: (result) => {
|
|
||||||
// all loaded triger
|
|
||||||
// 初始化 loading 界面
|
|
||||||
this.gameView = this.VIEW.loading(this);
|
|
||||||
this.VIEW.createLoadingParticle();
|
|
||||||
this.scene = 1;
|
|
||||||
this.loadMainRes();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 主资源
|
|
||||||
loadMainRes() {
|
|
||||||
this.mainLoader = utils.preload({
|
|
||||||
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,
|
|
||||||
onUpdate: () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.VIEW.loading_progress_text.text =
|
|
||||||
Math.floor(progress * 100) + "%";
|
|
||||||
|
|
||||||
this.webGL && this.VIEW.loadingCacheContainer.updateCache();
|
|
||||||
},
|
|
||||||
completeCallBack: (result) => {
|
|
||||||
// all loaded triger
|
|
||||||
this.VIEW.createGamePage(this);
|
|
||||||
setTimeout(() => {
|
|
||||||
this.VIEW.hideLoading();
|
|
||||||
this.webGL && this.VIEW.loadingCacheContainer.updateCache();
|
|
||||||
}, 100)
|
|
||||||
// this.mainResLoaded();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 主资源加载完毕 显示首页
|
|
||||||
mainResLoaded() {
|
|
||||||
gsap.to([this.gameView.loading_progress_bg, this.gameView.loading_progress_bar, this.gameView.loading_text, this.gameView.loading_progress_text,], {
|
|
||||||
alpha: 0,
|
|
||||||
onUpdate: () => {
|
|
||||||
this.webGL && this.VIEW.loadingCacheContainer.updateCache();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
gsap.fromTo(this.gameView.loading_start, { alpha: 0, scaleX: 0.95, scaleY: 0.95 }, { alpha: 1, scaleX: 1, scaleY: 1, ease: "elastic.out(1, 0.3)" })
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 求数组平均数
|
|
||||||
getArrAverage(arr) {
|
|
||||||
return arr.reduce((num, item, index) => {
|
|
||||||
if (index != arr.length - 1) {
|
|
||||||
return num + item;
|
|
||||||
} else {
|
|
||||||
return (num + item) / arr.length;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取平均fps
|
|
||||||
getAverageFPS() {
|
|
||||||
// 计算平均帧率
|
|
||||||
this.saveMomentFPS && clearInterval(this.saveMomentFPS)
|
|
||||||
this.averageFPS = this.getArrAverage(this.momentFPS);
|
|
||||||
if (this.averageFPS <= 50) {
|
|
||||||
console.log('低等性能手机，刷新率为', this.averageFPS)
|
|
||||||
}
|
|
||||||
else if (this.averageFPS > 50 && this.averageFPS < 70) {
|
|
||||||
console.log('中等性能手机，刷新率为', this.averageFPS)
|
|
||||||
}
|
|
||||||
else if (this.averageFPS >= 70) {
|
|
||||||
console.log('高性能手机，高刷新率为', this.averageFPS)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 计算出全局speed
|
|
||||||
this.globalSpeed = 60 / this.averageFPS;
|
|
||||||
console.log(this.globalSpeed)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化物理引擎
|
|
||||||
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,// 375, //window.innerWidth,
|
|
||||||
height: 812, //812, //window.innerHeight,
|
|
||||||
pixelRatio: 1, // 设置像素比 window.devicePixelRatio
|
|
||||||
background: 'transparent',
|
|
||||||
wireframeBackground: "transparent",
|
|
||||||
showAngleIndicator: false,
|
|
||||||
wireframes: false,
|
|
||||||
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 });
|
|
||||||
|
|
||||||
|
|
||||||
// add all of the bodies to the world
|
|
||||||
// this.Composite.add(this.myWorld, [boxA, boxB, boxC, boxD, ground]);
|
|
||||||
|
|
||||||
// create runner
|
|
||||||
this.Render.run(this.myRender);
|
|
||||||
|
|
||||||
// run the engine
|
|
||||||
this.myRunner = this.Runner.create();
|
|
||||||
this.Runner.run(this.myRunner, this.myEngine);
|
|
||||||
}
|
|
||||||
|
|
||||||
//debug mode destroyed
|
|
||||||
|
|
||||||
//game model
|
|
||||||
model() {
|
|
||||||
let M = {};
|
|
||||||
return M
|
|
||||||
}
|
|
||||||
|
|
||||||
//game viewer
|
|
||||||
view() {
|
|
||||||
let V = {};
|
|
||||||
let A = {};
|
|
||||||
|
|
||||||
this.adaptY = _stage.adaptScreen();
|
|
||||||
|
|
||||||
this.gameView = _layout.init(this, V, A);
|
|
||||||
|
|
||||||
V.checkIPhoneX = () => {
|
|
||||||
let windowW = window.innerWidth;
|
|
||||||
let windowH = window.innerHeight;
|
|
||||||
if (windowH < 1130) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if (windowW / windowH < 0.56) { // ios phone X 640*1386 wechat(640*1277) || 750*1624 wechat(750*1496)
|
|
||||||
this.phoneX = true;
|
|
||||||
} else { // ios other
|
|
||||||
this.phoneX = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
V.checkIPhoneX();
|
|
||||||
|
|
||||||
A.commonBtnAni = (target, callbacks) => {
|
|
||||||
let timeline = new TimelineMax({
|
|
||||||
onComplete: () => {
|
|
||||||
timeline.kill();
|
|
||||||
callbacks && callbacks();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
timeline
|
|
||||||
.to(target, .4, { scaleX: .9, scaleY: .9 })
|
|
||||||
.to(target, .2, { scaleX: 1, scaleY: 1 })
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
layout: V,
|
|
||||||
ani: A
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// 静音音频
|
|
||||||
silenceSoundInit() {
|
|
||||||
var audioTag = document.createElement("audio");
|
|
||||||
audioTag.controls = false;
|
|
||||||
audioTag.preload = "auto";
|
|
||||||
audioTag.loop = false; // looping this seems to cause clicking on older iOS devices
|
|
||||||
audioTag.src = silenceDataURI;
|
|
||||||
document.addEventListener("visibilitychange", function () {
|
|
||||||
if (document.visibilityState == 'visible') audioTag.play();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.silenceAudio = audioTag;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 播放音效
|
|
||||||
playSound(musicId, spe) {
|
|
||||||
// 移除所有声音
|
|
||||||
// createjs.Sound.removeAllSounds();
|
|
||||||
// 暂停上一个音频
|
|
||||||
// console.log(this.playingSound)
|
|
||||||
if (this.playingSound) {
|
|
||||||
console.log('准备暂停音频=>', this.playingSound.name)
|
|
||||||
this.playingSound.paused = true;
|
|
||||||
this.playingSound.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
console.log('准备播放音频=>', musicId)
|
|
||||||
// let props = new createjs.PlayPropsConfig().set({
|
|
||||||
// interrupt: createjs.Sound.INTERRUPT_ANY,
|
|
||||||
// loop: 0,
|
|
||||||
// volume: 1
|
|
||||||
// });
|
|
||||||
this.playingSound = createjs.Sound.play(('sound-' + musicId)); //如果声音的最大实例数已经在播放，如何中断同一源的任何当前播放的音频实例。值在Sound类上被定义为INTERRUPT_TYPE常量
|
|
||||||
this.playingSound.name = musicId
|
|
||||||
// return sound
|
|
||||||
}
|
|
||||||
|
|
||||||
// 绑定事件
|
|
||||||
bindEvents() {
|
|
||||||
this.gameView.loading_start
|
|
||||||
.on('mousedown', (e) => {
|
|
||||||
this.silenceAudio.play();
|
|
||||||
// createjs.Sound.play('sound-silence', { loop: -1 });
|
|
||||||
console.log(this.vue.$BGM.paused, this.vue.$BGM.mute)
|
|
||||||
// 如果存在背景音乐 如果音乐被暂停同时用户未静音的话
|
|
||||||
if (this.vue.$BGM && this.vue.$BGM.paused && !this.vue.$BGM.mute) {
|
|
||||||
console.log('playing bgm music')
|
|
||||||
this.vue.$BGM.play();
|
|
||||||
}
|
|
||||||
this.gameView.loading_start.mouseEnabled = false;
|
|
||||||
// console.log('点击了开始')
|
|
||||||
// 埋点
|
|
||||||
this.vue.$Utils.addTrackEvent("用户点击了开始", '用户loading页点击了开始');
|
|
||||||
this.vue.$Utils.btnTouched(e.currentTarget, () => {
|
|
||||||
|
|
||||||
|
|
||||||
// 将canvas设置为不可交互
|
|
||||||
let style = this.stage.stage.canvas.className;
|
|
||||||
this.stage.stage.canvas.className = 'none'
|
|
||||||
|
|
||||||
// 初始化 view
|
|
||||||
this.VIEW.init();
|
|
||||||
|
|
||||||
// 隐藏loading
|
|
||||||
this.VIEW.hideLoading();
|
|
||||||
// 播放guide动画
|
|
||||||
this.changeSpriteAnimation('guide');
|
|
||||||
// 播放声音
|
|
||||||
this.playSound('guide');
|
|
||||||
// 显示按钮动画
|
|
||||||
this.vue.showLangBtnAni();
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default game
|
|
||||||
@ -1,292 +0,0 @@
|
|||||||
const layoutData = {
|
|
||||||
loading: [
|
|
||||||
{
|
|
||||||
sprite: true,
|
|
||||||
framesName: 'loading',
|
|
||||||
layId: 'loadingSprite',
|
|
||||||
imgId: 'loadingSprite',
|
|
||||||
x: 750,
|
|
||||||
"animations": {
|
|
||||||
"loading_text2_en": { "frames": [0] },
|
|
||||||
"arrow": { "frames": [1] },
|
|
||||||
"person": { "frames": [2] },
|
|
||||||
"start": { "frames": [3] },
|
|
||||||
"light": { "frames": [4] },
|
|
||||||
"loading_text3": { "frames": [5] },
|
|
||||||
"snow_19": { "frames": [6] },
|
|
||||||
"snow_9": { "frames": [7] },
|
|
||||||
"snow_1": { "frames": [8] },
|
|
||||||
"snow_10": { "frames": [9] },
|
|
||||||
"snow_20": { "frames": [10] },
|
|
||||||
"loading_text3_en": { "frames": [11] },
|
|
||||||
"snow_2": { "frames": [12] },
|
|
||||||
"snow_8": { "frames": [13] },
|
|
||||||
"snow_11": { "frames": [14] },
|
|
||||||
"snow_13": { "frames": [15] },
|
|
||||||
"snow_17": { "frames": [16] },
|
|
||||||
"snow_6": { "frames": [17] },
|
|
||||||
"snow_14": { "frames": [18] },
|
|
||||||
"snow_7": { "frames": [19] },
|
|
||||||
"snow_16": { "frames": [20] },
|
|
||||||
"snow_15": { "frames": [21] },
|
|
||||||
"snow_3": { "frames": [22] },
|
|
||||||
"snow_12": { "frames": [23] },
|
|
||||||
"snow_18": { "frames": [24] },
|
|
||||||
"loading_text": { "frames": [25] },
|
|
||||||
"loading_text2": { "frames": [26] },
|
|
||||||
"snow_4": { "frames": [27] },
|
|
||||||
"snow_5": { "frames": [28] },
|
|
||||||
"snow": { "frames": [29] },
|
|
||||||
"light_2": { "frames": [30] },
|
|
||||||
"box": { "frames": [31] }
|
|
||||||
},
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 0
|
|
||||||
},
|
|
||||||
//bg
|
|
||||||
{
|
|
||||||
layId: 'loading_bg',
|
|
||||||
imgId: 'bg',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 1
|
|
||||||
},
|
|
||||||
// imgId: 'snow',
|
|
||||||
{
|
|
||||||
layId: 'loading_snow',
|
|
||||||
singleSprite: {
|
|
||||||
visible: true,
|
|
||||||
name: 'snow'
|
|
||||||
},
|
|
||||||
x: 290,
|
|
||||||
y: 504,
|
|
||||||
width: 171,
|
|
||||||
height: 167,
|
|
||||||
roCenter: true,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 1
|
|
||||||
},
|
|
||||||
// tips-1
|
|
||||||
{
|
|
||||||
layId: 'loading_text',
|
|
||||||
singleSprite: {
|
|
||||||
visible: true,
|
|
||||||
name: 'loading_text'
|
|
||||||
},
|
|
||||||
x: 182,
|
|
||||||
y: 820,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
layId: 'loading_text2',
|
|
||||||
singleSprite: {
|
|
||||||
visible: true,
|
|
||||||
name: 'loading_text2'
|
|
||||||
},
|
|
||||||
x: 211,
|
|
||||||
y: 1157,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
layId: 'loading_text2_en',
|
|
||||||
singleSprite: {
|
|
||||||
visible: true,
|
|
||||||
name: 'loading_text2_en'
|
|
||||||
},
|
|
||||||
x: 54,
|
|
||||||
y: 1160,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
layId: 'loading_text3',
|
|
||||||
singleSprite: {
|
|
||||||
visible: true,
|
|
||||||
name: 'loading_text3'
|
|
||||||
},
|
|
||||||
x: 253,
|
|
||||||
y: 1157,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
layId: 'loading_text3_en',
|
|
||||||
singleSprite: {
|
|
||||||
visible: true,
|
|
||||||
name: 'loading_text3_en'
|
|
||||||
},
|
|
||||||
x: 174,
|
|
||||||
y: 1160,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
layId: 'loading_box',
|
|
||||||
singleSprite: {
|
|
||||||
visible: true,
|
|
||||||
name: 'box'
|
|
||||||
},
|
|
||||||
x: 232,
|
|
||||||
y: 869,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 0
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// layId: 'loading_box2',
|
|
||||||
// singleSprite: {
|
|
||||||
// visible: true,
|
|
||||||
// name: 'box'
|
|
||||||
// },
|
|
||||||
// x: 232,
|
|
||||||
// y: 869,
|
|
||||||
// scaleX: 1,
|
|
||||||
// scaleY: 1,
|
|
||||||
// alpha: 0
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
layId: 'loading_person',
|
|
||||||
singleSprite: {
|
|
||||||
visible: true,
|
|
||||||
name: 'person'
|
|
||||||
},
|
|
||||||
x: 178,
|
|
||||||
y: 313,
|
|
||||||
width: 395,
|
|
||||||
height: 520,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
layId: 'loading_arrow',
|
|
||||||
singleSprite: {
|
|
||||||
visible: true,
|
|
||||||
name: 'arrow'
|
|
||||||
},
|
|
||||||
x: 195,
|
|
||||||
y: 438,
|
|
||||||
width: 359,
|
|
||||||
height: 419,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
layId: 'loading_light',
|
|
||||||
singleSprite: {
|
|
||||||
visible: true,
|
|
||||||
name: 'light'
|
|
||||||
},
|
|
||||||
x: 176,
|
|
||||||
y: 673,
|
|
||||||
width: 392,
|
|
||||||
height: 334,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
layId: 'loading_light2',
|
|
||||||
singleSprite: {
|
|
||||||
visible: true,
|
|
||||||
name: 'light_2'
|
|
||||||
},
|
|
||||||
x: 176,
|
|
||||||
y: 673,
|
|
||||||
width: 392,
|
|
||||||
height: 334,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 0
|
|
||||||
},
|
|
||||||
// progress_bg
|
|
||||||
{
|
|
||||||
layId: 'loading_progress_bg',
|
|
||||||
rect: {
|
|
||||||
visible: true,
|
|
||||||
round: true,
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
r: 15,
|
|
||||||
roundLine: 4,
|
|
||||||
width: 462,
|
|
||||||
height: 30,
|
|
||||||
bg: '#0b3046'
|
|
||||||
},
|
|
||||||
bg: '#23669c',
|
|
||||||
x: 139,
|
|
||||||
y: 760,
|
|
||||||
ox: 0,
|
|
||||||
oy: 0,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 1
|
|
||||||
},
|
|
||||||
// progress_bar
|
|
||||||
{
|
|
||||||
layId: 'loading_progress_bar',
|
|
||||||
rect: {
|
|
||||||
visible: true,
|
|
||||||
round: true,
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
r: 15,
|
|
||||||
width: 30, //462/2
|
|
||||||
height: 30
|
|
||||||
},
|
|
||||||
bg: '#caf0f6',
|
|
||||||
x: 139,
|
|
||||||
y: 760,
|
|
||||||
ox: 0,
|
|
||||||
oy: 0,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 1
|
|
||||||
},
|
|
||||||
// progress text
|
|
||||||
{
|
|
||||||
layId: 'loading_progress_text',
|
|
||||||
x: 375,
|
|
||||||
y: 910,
|
|
||||||
text: {
|
|
||||||
visible: true,
|
|
||||||
word: '0%',
|
|
||||||
size: '46px hycm',
|
|
||||||
color: '#ffffff',
|
|
||||||
align: 'center',
|
|
||||||
lineHeight: 40
|
|
||||||
},
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
layId: 'loading_start',
|
|
||||||
singleSprite: {
|
|
||||||
visible: true,
|
|
||||||
name: 'start'
|
|
||||||
},
|
|
||||||
x: 252,
|
|
||||||
y: 800,
|
|
||||||
width: 248,
|
|
||||||
height: 84,
|
|
||||||
roCenter: true,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
alpha: 0,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
module.exports = layoutData
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import base64Str from './pathCodes'
|
|
||||||
|
|
||||||
/*create mask*/
|
|
||||||
class maskCreater {
|
|
||||||
|
|
||||||
constructor(pname, type, param, debug) {
|
|
||||||
let mask = new createjs.Shape();
|
|
||||||
|
|
||||||
if (type == 'code')
|
|
||||||
mask.graphics.p(base64Str[pname]);
|
|
||||||
|
|
||||||
if (type == 'func')
|
|
||||||
// ;(new Function('',base64Str[pname]))();
|
|
||||||
// eval(base64Str[pname])
|
|
||||||
base64Str[pname](mask)
|
|
||||||
|
|
||||||
|
|
||||||
if (param)
|
|
||||||
mask.setTransform(...param)
|
|
||||||
// console.log(mask)
|
|
||||||
|
|
||||||
return mask;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = maskCreater;
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
"rect": (mask) => {
|
|
||||||
return mask.graphics.f('#000000').drawRoundRect(0, 0, 559, 10, 0).es()
|
|
||||||
},
|
|
||||||
|
|
||||||
"cardMask": "mask.graphics.f('#000000').drawRoundRect(177,439,400,550,0).es()",
|
|
||||||
|
|
||||||
"upload_mask": "mask.graphics.f('#000000').drawRoundRect(140,444,477,647,0).es()"
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
export default {
|
|
||||||
before: {
|
|
||||||
imgList: [
|
|
||||||
{
|
|
||||||
id: 'loadingSprite',
|
|
||||||
src: require("@/assets/images/loading/loadingSprite.png")
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'bg',
|
|
||||||
src: require("@/assets/images/loading/bg.jpg")
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'snowSprite',
|
|
||||||
src: require("@/assets/images/loading/snowSprite.png")
|
|
||||||
},
|
|
||||||
],
|
|
||||||
audioList: [
|
|
||||||
// {
|
|
||||||
// id: 'sound-silence',
|
|
||||||
// src: require("@/assets/media/silence.mp3")
|
|
||||||
// }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
main: {
|
|
||||||
imgList: [
|
|
||||||
{
|
|
||||||
id: 'coin',
|
|
||||||
src: require("@/assets/images/push-coin/coin.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: [
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// 剩余资源
|
|
||||||
after: {
|
|
||||||
imgList: [],
|
|
||||||
audioList: []
|
|
||||||
},
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,185 +0,0 @@
|
|||||||
// import 'createjs';
|
|
||||||
// import '../plugins/easeljs-0.8.2.min';
|
|
||||||
import '@/utils/plugins/easeljs-1.0.0.min';
|
|
||||||
import Stats from '@/utils/plugins/stats-2d'; //frame rate
|
|
||||||
import Stats3d from '@/utils/plugins/stats-3d.min'; //frame rate
|
|
||||||
import { gsap } from 'gsap' //动画插件
|
|
||||||
import utils from '@/utils/index.js'
|
|
||||||
|
|
||||||
class creater {
|
|
||||||
constructor() {
|
|
||||||
this.FPS = 60;
|
|
||||||
window.createjs = createjs;
|
|
||||||
}
|
|
||||||
|
|
||||||
createStage(APP) {
|
|
||||||
this.app = APP;
|
|
||||||
let that = this;
|
|
||||||
let stage = document.createElement('canvas');
|
|
||||||
// stage.width = 750;
|
|
||||||
// stage.height = 1450;
|
|
||||||
stage.id = 'stageCanvas';
|
|
||||||
let container = document.getElementById('container');
|
|
||||||
container.appendChild(stage);
|
|
||||||
if (this.app.webGL) {
|
|
||||||
this.stage = new createjs.StageGL(stage, { transparent: true, antialias: true });
|
|
||||||
this.stage.setTextureParams = function (gl, isPOT) {
|
|
||||||
if (this._antialias) {
|
|
||||||
//non POT linear works in some devices, but performance is NOT good, investigate
|
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
||||||
} else {
|
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
|
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
|
|
||||||
}
|
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
||||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
||||||
};
|
|
||||||
console.log('开启了webgl')
|
|
||||||
} else {
|
|
||||||
this.stage = new createjs.Stage(stage);
|
|
||||||
console.log('未开启webgl,canvas2d模式')
|
|
||||||
}
|
|
||||||
this.setStage();
|
|
||||||
|
|
||||||
//add stage frame rate stats
|
|
||||||
// if (this.app.debug) {
|
|
||||||
Stats.startFPS(this.stage, { x: 0, y: 200 }, this.app)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// 3d stats
|
|
||||||
if (this.app.debug) {
|
|
||||||
this.stats = new Stats3d();
|
|
||||||
container.appendChild(this.stats.domElement);
|
|
||||||
}
|
|
||||||
|
|
||||||
createjs.Ticker.timingMode = createjs.Ticker.RAF//TIMEOUT || RAF_SYNCHED || RAF
|
|
||||||
createjs.Ticker.framerate = this.FPS;
|
|
||||||
|
|
||||||
let count = 0;
|
|
||||||
|
|
||||||
createjs.Ticker.on("tick", function handleTicker(event) {
|
|
||||||
that.stage.update();
|
|
||||||
that.app.FPS = Stats.FPS;
|
|
||||||
// 3d states
|
|
||||||
that.app.debug && that.stats.update();
|
|
||||||
// count++;
|
|
||||||
// if (count % 100 == 0) {
|
|
||||||
// console.log("Paused:", event.delta);
|
|
||||||
// }
|
|
||||||
if (APP.status == 2 && !APP.paused) APP.update()
|
|
||||||
if (APP.needUpdate && APP.gameView) {
|
|
||||||
APP.gameView.update();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
|
|
||||||
//屏幕自适应
|
|
||||||
adaptScreen() {
|
|
||||||
if (this.app.needAdaptScreen === false) return
|
|
||||||
// 横屏模式
|
|
||||||
if (window.innerWidth > window.innerHeight) {
|
|
||||||
this.currentStageWidth = window.innerWidth;
|
|
||||||
this.currentStageHeight = window.innerHeight;
|
|
||||||
this.currentWidthHeightScale = this.currentStageWidth / this.currentStageHeight;
|
|
||||||
this.offsetTop = 0;
|
|
||||||
} else {
|
|
||||||
this.currentStageWidth = window.innerWidth;
|
|
||||||
this.currentStageHeight = 1624 / 750 * window.innerWidth;
|
|
||||||
this.currentWidthHeightScale = this.currentStageWidth / this.currentStageHeight;
|
|
||||||
this.offsetTop = (window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY;
|
|
||||||
}
|
|
||||||
if (this.currentStageWidth > this.currentStageHeight) {
|
|
||||||
if (this.initWidthHeightScale < this.currentWidthHeightScale)
|
|
||||||
this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageWidth / this.initStageWidth;
|
|
||||||
else
|
|
||||||
this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageHeight / this.initStageHeight;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (this.initWidthHeightScale < this.currentWidthHeightScale)
|
|
||||||
this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageWidth / this.initStageWidth;
|
|
||||||
else
|
|
||||||
this.stageCanvas.scaleX = this.stageCanvas.scaleY = this.currentStageHeight / this.initStageHeight;
|
|
||||||
}
|
|
||||||
this.stage.x = 0//(this.currentStageWidth - this.initStageWidth) * this.stageCanvas.scaleX / 2;
|
|
||||||
this.stage.y = 0//(window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY / 2;
|
|
||||||
|
|
||||||
|
|
||||||
if (window.innerHeight < this.currentStageHeight)
|
|
||||||
gsap.set(this.stageCanvas, { y: this.offsetTop }); //+ (window.deviceInfo.screenSize <= 2 ? 20 : 0)
|
|
||||||
else
|
|
||||||
gsap.set(this.stageCanvas, { y: 0 });
|
|
||||||
|
|
||||||
|
|
||||||
// console.log(this.stageCanvas.scaleX,this.stageCanvas.scaleY,window.devicePixelRatio)
|
|
||||||
// console.log(this.stageContainer.x,this.stageContainer.y,this.currentStageHeight,this.offsetTop)
|
|
||||||
|
|
||||||
if (!this.ratio) {
|
|
||||||
this.ratio = /*appPlugins.isAndriod() ? 1 :*/ 2 //window.devicePixelRatio //appPlugins.getDevicePixelRatio(this.stageCanvas.getContext("3d"));
|
|
||||||
}
|
|
||||||
this.stageCanvas.width = this.currentStageWidth * this.ratio;
|
|
||||||
this.stageCanvas.height = this.currentStageHeight * this.ratio;
|
|
||||||
this.stageCanvas.style.width = this.currentStageWidth + "px";
|
|
||||||
this.stageCanvas.style.height = this.currentStageHeight + "px";
|
|
||||||
this.stage.scaleX = this.ratio * this.stageCanvas.scaleX;
|
|
||||||
this.stage.scaleY = this.ratio * this.stageCanvas.scaleY;
|
|
||||||
this.stageRenderWidth = 750;
|
|
||||||
this.stageRenderHeight = this.currentStageHeight / this.currentStageWidth * this.stageRenderWidth;
|
|
||||||
|
|
||||||
// console.log(this.stageRenderWidth,this.stageCanvas.height)
|
|
||||||
|
|
||||||
if (this.app.webGL) {
|
|
||||||
this.stage.updateViewport(this.stageCanvas.width, this.stageCanvas.height)
|
|
||||||
}
|
|
||||||
// this.stage.updateViewport(this.stageCanvas.width,this.stageCanvas.height)
|
|
||||||
//
|
|
||||||
return (this.currentStageHeight - this.initStageHeight) * this.stageCanvas.scaleY / 2
|
|
||||||
}
|
|
||||||
|
|
||||||
setStage() {
|
|
||||||
var initWidth = 750;
|
|
||||||
var initHeight = 1624;
|
|
||||||
|
|
||||||
this.stageCanvas = this.stage.canvas;
|
|
||||||
this.stageCanvas.width = initHeight;
|
|
||||||
this.stageCanvas.height = initHeight;
|
|
||||||
this.initStageWidth = initWidth;
|
|
||||||
this.initStageHeight = initHeight;
|
|
||||||
this.initWidthHeightScale = initWidth / initHeight;
|
|
||||||
|
|
||||||
|
|
||||||
// this.backgroundContainer = new createjs.Container();//加载层
|
|
||||||
this.loadingContainer = new createjs.Container(); //加载层
|
|
||||||
this.mainContainer = new createjs.Container().set({ alpha: 0 }); //游戏层
|
|
||||||
|
|
||||||
// this.mission_success_Container = new createjs.Container().set({alpha:0}); //通关层
|
|
||||||
// this.timeCount_Container = new createjs.Container().set({alpha:0}); //timeCount层
|
|
||||||
|
|
||||||
// this.resultContainer = new createjs.Container(); //游戏结果页
|
|
||||||
this.stageContainer = new createjs.Container(); //我的 最外层
|
|
||||||
// this.panelContainer = new createjs.Container().set({alpha:0});
|
|
||||||
|
|
||||||
this.stageContainer.addChild(this.loadingContainer, this.mainContainer);
|
|
||||||
|
|
||||||
this.stage.addChild(this.stageContainer);
|
|
||||||
// this.app.webGL && this.stage.setClearColor("#051e56");
|
|
||||||
|
|
||||||
createjs.Touch.enable(this.stage);
|
|
||||||
// console.log(this.stage)
|
|
||||||
this.stage.enableMouseOver(10);
|
|
||||||
this.stage.mouseMoveOutside = true;
|
|
||||||
|
|
||||||
this.adaptScreen();
|
|
||||||
|
|
||||||
window.addEventListener("resize", (event) => {
|
|
||||||
utils.sleep(300).then(() => {
|
|
||||||
this.adaptScreen();
|
|
||||||
})
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = creater;
|
|
||||||
@ -1,301 +0,0 @@
|
|||||||
// 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;
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: your name
|
|
||||||
* @Date: 2020-08-28 15:20:15
|
|
||||||
* @LastEditTime: 2020-10-10 17:19:06
|
|
||||||
* @LastEditors: Please set LastEditors
|
|
||||||
* @Description: In User Settings Edit
|
|
||||||
* @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>
|
|
||||||
</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: {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style lang="less">
|
|
||||||
.pushcoin {
|
|
||||||
.prLayout(100%,100%);
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: #333;
|
|
||||||
.matter {
|
|
||||||
.paPos(0,0,1);
|
|
||||||
}
|
|
||||||
#stageCanvas {
|
|
||||||
.paLayout(0,0,750px,1624px,0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -22,42 +22,36 @@
|
|||||||
v-for="(item, index) in newColorArr"
|
v-for="(item, index) in newColorArr"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<div class="header">Group {{ item.name }}</div>
|
<div class="header">Group {{ index + 1 }}</div>
|
||||||
<div class="spans">
|
|
||||||
<div
|
<div
|
||||||
class="color-span"
|
class="color-span"
|
||||||
v-for="(t, i) in item.data"
|
v-for="(t, i) in item"
|
||||||
:key="i"
|
:key="i"
|
||||||
:style="rennderCssHSL(t)"
|
:style="rennderCssHSL(t)"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="desc" v-if="sortedStatus">
|
<div class="show-con cluster" ref="clusterCon">
|
||||||
<div class="row">
|
<div
|
||||||
<p>最小值: {{ item.min }}</p>
|
class="color-group"
|
||||||
|
v-for="(item, index) in clusters"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="header">
|
||||||
|
<div class="span" :style="rennderHeaderCss(item)"></div>
|
||||||
|
{{ item.name }} Group
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="color-span"
|
class="color-span"
|
||||||
:style="rennderCssHex(item.min)"
|
v-for="(item, index) in item.colors"
|
||||||
|
:key="index"
|
||||||
|
:style="rennderCssHex(item)"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<p>平均值: {{ item.average }}</p>
|
|
||||||
<div
|
|
||||||
class="color-span"
|
|
||||||
:style="rennderCssHex(item.average)"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<p>最大值: {{ item.max }}</p>
|
|
||||||
<div
|
|
||||||
class="color-span"
|
|
||||||
:style="rennderCssHex(item.max)"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-groups">
|
<div class="btn-groups">
|
||||||
|
<!-- <div class="btn" @click="sortColor">颜色归类</div> -->
|
||||||
|
|
||||||
<div class="p">根据Hue色调分组</div>
|
<div class="p">根据Hue色调分组</div>
|
||||||
<div class="ios-checkbox">
|
<div class="ios-checkbox">
|
||||||
<input
|
<input
|
||||||
@ -71,8 +65,7 @@
|
|||||||
/>
|
/>
|
||||||
<label for="ios-checkbox" class="emulate-ios-button"></label>
|
<label for="ios-checkbox" class="emulate-ios-button"></label>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="p">根据固定颜色分组</div>
|
||||||
<!-- <div class="p">根据固定颜色分组</div>
|
|
||||||
<div class="ios-checkbox">
|
<div class="ios-checkbox">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -84,22 +77,30 @@
|
|||||||
hidden
|
hidden
|
||||||
/>
|
/>
|
||||||
<label for="ios-checkbox2" class="emulate-ios-button"></label>
|
<label for="ios-checkbox2" class="emulate-ios-button"></label>
|
||||||
</div> -->
|
</div>
|
||||||
|
<div
|
||||||
|
class="btn"
|
||||||
|
@click="sortColorSaturation"
|
||||||
|
:class="{ active: active1 }"
|
||||||
|
ref="btn1"
|
||||||
|
>
|
||||||
|
根据饱和度排序
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="btn"
|
class="btn"
|
||||||
@click="sortColorLight"
|
@click="sortColorLight"
|
||||||
:class="{ active: active2 }"
|
:class="{ active: active2 }"
|
||||||
ref="btn2"
|
ref="btn2"
|
||||||
>
|
>
|
||||||
排序
|
根据明度排序
|
||||||
</div>
|
</div>
|
||||||
|
<div class="show-color" ref="showColor">
|
||||||
<div
|
<div
|
||||||
class="btn"
|
class="color-span"
|
||||||
@click="export2Excel"
|
v-for="(item, index) in clusters"
|
||||||
:class="{ active: active3 }"
|
:key="index"
|
||||||
ref="btn3"
|
:style="rennderHeaderCss(item)"
|
||||||
>
|
></div>
|
||||||
导出excel
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -108,7 +109,6 @@
|
|||||||
// @ is an alias to /src
|
// @ is an alias to /src
|
||||||
import colorUtil from "color-util";
|
import colorUtil from "color-util";
|
||||||
import colors from "@/data/color.json";
|
import colors from "@/data/color.json";
|
||||||
import { export_json_to_excel } from "@/utils/plugins/Export2Excel";
|
|
||||||
import gsap from "gsap";
|
import gsap from "gsap";
|
||||||
export default {
|
export default {
|
||||||
name: "ColorSort",
|
name: "ColorSort",
|
||||||
@ -116,405 +116,274 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
hideOrigin: false,
|
hideOrigin: false,
|
||||||
|
hideOrigin2: false,
|
||||||
colorArr: colors,
|
colorArr: colors,
|
||||||
sortedStatus: false,
|
|
||||||
active1: false,
|
active1: false,
|
||||||
active2: false,
|
active2: false,
|
||||||
active3: false,
|
|
||||||
hlsColorArr: [],
|
hlsColorArr: [],
|
||||||
newColorArr: [
|
clustersColorArr: [],
|
||||||
{
|
newColorArr: [[], [], [], [], [], [], [], [], [], [], [], []],
|
||||||
name: "红",
|
clusters: [
|
||||||
data: [],
|
//指定颜色分类
|
||||||
average: "",
|
{ name: "red", leadColor: [255, 0, 0], colors: [] },
|
||||||
min: "",
|
{ name: "orange", leadColor: [255, 128, 0], colors: [] },
|
||||||
max: "",
|
{ name: "yellow", leadColor: [255, 255, 0], colors: [] },
|
||||||
},
|
{ name: "chartreuse", leadColor: [128, 255, 0], colors: [] },
|
||||||
{
|
{ name: "green", leadColor: [0, 255, 0], colors: [] },
|
||||||
name: "紫",
|
{ name: "spring green", leadColor: [0, 255, 128], colors: [] },
|
||||||
data: [],
|
{ name: "cyan", leadColor: [0, 255, 255], colors: [] },
|
||||||
average: "",
|
{ name: "azure", leadColor: [0, 127, 255], colors: [] },
|
||||||
min: "",
|
{ name: "blue", leadColor: [0, 0, 255], colors: [] },
|
||||||
max: "",
|
{ name: "violet", leadColor: [127, 0, 255], colors: [] },
|
||||||
},
|
{ name: "magenta", leadColor: [255, 0, 255], colors: [] },
|
||||||
{
|
{ name: "rose", leadColor: [255, 0, 128], colors: [] },
|
||||||
name: "蓝紫",
|
{ name: "black", leadColor: [0, 0, 0], colors: [] },
|
||||||
data: [],
|
{ name: "grey", leadColor: [235, 235, 235], colors: [] },
|
||||||
average: "",
|
// { name: "white", leadColor: [255, 255, 255], colors: [] },
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "蓝",
|
|
||||||
data: [],
|
|
||||||
average: "",
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "青",
|
|
||||||
data: [],
|
|
||||||
average: "",
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "绿",
|
|
||||||
data: [],
|
|
||||||
average: "",
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "黄绿",
|
|
||||||
data: [],
|
|
||||||
average: "",
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "黄",
|
|
||||||
data: [],
|
|
||||||
average: "",
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "橘色",
|
|
||||||
data: [],
|
|
||||||
average: "",
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "黑",
|
|
||||||
data: [],
|
|
||||||
average: "",
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "白",
|
|
||||||
data: [],
|
|
||||||
average: "",
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "灰",
|
|
||||||
data: [],
|
|
||||||
average: "",
|
|
||||||
min: "",
|
|
||||||
max: "",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
sortedColorArr: [],
|
|
||||||
// 1-12 对应 hue 每30度 | 13 - 黑 | 14 - 白 | 15 - 灰
|
|
||||||
balance: [0.9, 0, 0.01],
|
|
||||||
balance2: [0.3, 0, 0],
|
|
||||||
balance3: [0.5, 0.2, 0.1],
|
|
||||||
caclulTime: 0,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
rennderCssHSL() {
|
rennderCssHSL() {
|
||||||
return function (item) {
|
return function (item) {
|
||||||
return `background-color: ${item.csshsl};`;
|
return `background-color: ${colorUtil.hsl.to.csshsl(item)};`;
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
rennderCssHex() {
|
rennderCssHex() {
|
||||||
return function (item) {
|
return function (item) {
|
||||||
return `background-color: ${item};`;
|
return `background-color: ${item.csshsl};`;
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
rennderHeaderCss() {
|
rennderHeaderCss() {
|
||||||
return function (item) {
|
return function (item) {
|
||||||
return `background-color: ${item.csshsl};`;
|
return `background-color: ${colorUtil.rgb.to.cssrgb({
|
||||||
|
r: item.leadColor[0],
|
||||||
|
g: item.leadColor[1],
|
||||||
|
b: item.leadColor[2],
|
||||||
|
a: 255,
|
||||||
|
})};`;
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
// console.log(this.newColorArr);
|
||||||
this.reHandleColor();
|
this.reHandleColor();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 显示隐藏分组
|
// 显示隐藏分组
|
||||||
showGroup(index) {
|
showGroup(index) {
|
||||||
gsap.to(this.$refs.sortCon, {
|
let target = this.$refs.sortCon;
|
||||||
|
gsap.to(target, {
|
||||||
autoAlpha: 1,
|
autoAlpha: 1,
|
||||||
x: this.hideOrigin ? 0 : "100%",
|
x: this.hideOrigin ? 0 : "100%",
|
||||||
zIndex: this.hideOrigin ? 2 : 10,
|
zIndex: this.hideOrigin ? 2 : 10,
|
||||||
onStart: () => {},
|
onStart: () => {
|
||||||
});
|
if (this.active1) {
|
||||||
},
|
this.sortColorSaturation();
|
||||||
// 格式化json数据
|
}
|
||||||
formatJson(filterVal, jsonData) {
|
if (this.active2) {
|
||||||
return jsonData.map(v => filterVal.map(j => v[j]))
|
this.sortColorLight();
|
||||||
},
|
}
|
||||||
// 导出excel
|
},
|
||||||
export2Excel(){
|
});
|
||||||
if (!this.active2 || !this.hideOrigin){
|
|
||||||
this.$Utils.showTips({
|
if (this.hideOrigin) {
|
||||||
message: `请先分组排序...`,
|
this.hideOrigin2 = false;
|
||||||
});
|
gsap.to(this.$refs.clusterCon, {
|
||||||
return false
|
autoAlpha: 0,
|
||||||
|
zIndex: 2,
|
||||||
|
x: 0,
|
||||||
|
});
|
||||||
|
gsap.to([this.$refs.btn1, this.$refs.btn2], { autoAlpha: 1 });
|
||||||
|
gsap.to(this.$refs.showColor, { autoAlpha: 0 });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showGroup2(index) {
|
||||||
|
let target = this.$refs.clusterCon;
|
||||||
|
gsap.to(target, {
|
||||||
|
autoAlpha: 1,
|
||||||
|
zIndex: this.hideOrigin2 ? 2 : 10,
|
||||||
|
x: this.hideOrigin2 ? 0 : "100%",
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.hideOrigin2) {
|
||||||
|
this.hideOrigin = false;
|
||||||
|
gsap.to(this.$refs.sortCon, {
|
||||||
|
autoAlpha: 0,
|
||||||
|
zIndex: 2,
|
||||||
|
x: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
gsap.to(this.$refs.showColor, { autoAlpha: 1 });
|
||||||
|
gsap.to([this.$refs.btn1, this.$refs.btn2], { autoAlpha: 0 });
|
||||||
|
} else {
|
||||||
|
gsap.to(this.$refs.showColor, { autoAlpha: 0 });
|
||||||
|
gsap.to([this.$refs.btn1, this.$refs.btn2], { autoAlpha: 1 });
|
||||||
}
|
}
|
||||||
const tHeader = ['组名','最小值','最大值','平均值','组内全部颜色',];
|
|
||||||
const filterVal = ['name', 'min', 'max', 'average', 'hexArr', ];
|
|
||||||
const list = this.newColorArr;
|
|
||||||
const data = this.formatJson(filterVal, list);
|
|
||||||
export_json_to_excel(tHeader, data, '颜色色环分组排序');
|
|
||||||
},
|
},
|
||||||
// 颜色数据转换为hsl
|
// 颜色数据转换为hsl
|
||||||
reHandleColor() {
|
reHandleColor() {
|
||||||
// this.colorArr
|
|
||||||
this.colorArr.forEach((item, index) => {
|
this.colorArr.forEach((item, index) => {
|
||||||
|
if (item.R && item.G && item.B) {
|
||||||
this.hlsColorArr.push(
|
this.hlsColorArr.push(
|
||||||
colorUtil.color(item.HEX) //item.HEX
|
// this.rgbToHsl(item.R, item.G, item.B)
|
||||||
|
colorUtil.rgb.to.hsl({
|
||||||
|
r: item.R,
|
||||||
|
g: item.G,
|
||||||
|
b: item.B,
|
||||||
|
a: 255,
|
||||||
|
})
|
||||||
);
|
);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// console.log(this.hexColorArr);
|
console.log(this.hlsColorArr);
|
||||||
//根据hue分组
|
//根据hue分组
|
||||||
this.sortColorByHue();
|
this.sortColorByHue();
|
||||||
|
// 按照预定颜色分组
|
||||||
|
this.sortColorByClusters();
|
||||||
},
|
},
|
||||||
// 按照色环分组
|
// 按照色环分组
|
||||||
sortColorByHue() {
|
sortColorByHue() {
|
||||||
this.hlsColorArr.forEach((item, index) => {
|
this.hlsColorArr.forEach((item, index) => {
|
||||||
let color = item.hsl;
|
if (item.h) {
|
||||||
if (color.h) {
|
let _index = 11 - Math.floor((item.h * 360) / 30); //将360度色盘区分为12个维度
|
||||||
let _index = 8 - Math.floor((color.h * 360) / 40); //将360度色盘区分为12个维度
|
// let _index = Math.floor(
|
||||||
// // 灰
|
// (item.h * item.hsl[1] * item.hsl[2]) / 20
|
||||||
// if (
|
// );
|
||||||
// // 当饱和度为0时
|
// if (_index > 11) {
|
||||||
// color.s <= 0.3 &&
|
|
||||||
// color.l <= 0.7 &&
|
|
||||||
// color.l >= 0.1
|
|
||||||
// ) {
|
|
||||||
// _index = 11;
|
// _index = 11;
|
||||||
// }
|
// }
|
||||||
// // 黑色
|
this.newColorArr[_index].push(item);
|
||||||
// if (color.l < 0.4 && color.s < 0.4) {
|
|
||||||
// _index = 9;
|
|
||||||
// }
|
|
||||||
// // 白色
|
|
||||||
// if (color.l > 0.7 && color.s < 0.3) {
|
|
||||||
// _index = 10;
|
|
||||||
// }
|
|
||||||
// 灰
|
|
||||||
if (
|
|
||||||
// 当饱和度为0时
|
|
||||||
color.s <= 0.15 &&
|
|
||||||
color.l <= 0.75 &&
|
|
||||||
color.l >= 0.2
|
|
||||||
) {
|
|
||||||
_index = 11;
|
|
||||||
}
|
|
||||||
// 黑色
|
|
||||||
if ((color.l < 0.3 && color.s < 0.2) || color.l < 0.1) {
|
|
||||||
_index = 9;
|
|
||||||
}
|
|
||||||
// 白色
|
|
||||||
if ((color.l > 0.7 && color.s < 0.4) || color.l > 0.9) {
|
|
||||||
_index = 10;
|
|
||||||
}
|
|
||||||
this.newColorArr[_index].data.push(item);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// console.log(this.newColorArr);
|
// console.log(this.newColorArr);
|
||||||
},
|
},
|
||||||
// 根据亮度
|
// 按照预定颜色分组
|
||||||
sortColorLight() {
|
sortColorByClusters() {
|
||||||
this.active2 = true;
|
const sortedClusters = this.sortWithClusters(this.hlsColorArr);
|
||||||
this.caclulTime++;
|
const sortedColors = sortedClusters.reduce((acc, curr) => {
|
||||||
this.$Utils.showTips({
|
const colors = curr.colors.map((color) => color.hex);
|
||||||
message: `正在计算，请稍等...`,
|
return [...acc, ...colors];
|
||||||
});
|
}, []);
|
||||||
|
|
||||||
let height = 100; //boxHeight
|
this.clustersColorArr = sortedColors;
|
||||||
// if (word.length > 180) {
|
console.log(this.clustersColorArr);
|
||||||
// height = 180;
|
},
|
||||||
// }
|
// 根据饱和度排序
|
||||||
|
sortColorSaturation() {
|
||||||
setTimeout(() => {
|
this.active1 = true;
|
||||||
|
this.active2 = false;
|
||||||
if (this.hideOrigin) {
|
if (this.hideOrigin) {
|
||||||
// 分组
|
// 分组
|
||||||
this.newColorArr.forEach((item, index) => {
|
this.newColorArr.forEach((item, index) => {
|
||||||
// 存储排序后的hex
|
item.sort((a, b) => {
|
||||||
let hexArr = [];
|
return b.s - a.s;
|
||||||
// 灰度区分
|
|
||||||
// item = this.sortColorByHSL(item);
|
|
||||||
item.data.forEach((t, i) => {
|
|
||||||
let hsl = t.hsl;
|
|
||||||
let rgb = t.rgb;
|
|
||||||
// t.grey = hsl.l * 10 + hsl.s * 4 + hsl.h
|
|
||||||
t.grey = rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
|
|
||||||
// console.log(t.grey)
|
|
||||||
if (hsl.l > 0.8){
|
|
||||||
t.grey *= 1.8;
|
|
||||||
}
|
|
||||||
if (hsl.s < 0.1){
|
|
||||||
t.grey *= 0.85;
|
|
||||||
}
|
|
||||||
if (hsl.l < 0.3 && hsl.s > 0.8) {
|
|
||||||
t.grey *= 0.95;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
item.data.sort((a, b) => {
|
|
||||||
let deltaGrey = b.grey - a.grey;
|
|
||||||
return deltaGrey
|
|
||||||
});
|
|
||||||
item.data.forEach(element => {
|
|
||||||
hexArr.push(element.hex)
|
|
||||||
});
|
|
||||||
item.hexArr = hexArr;
|
|
||||||
|
|
||||||
// let sortedArr = this.sortColors(item.data);
|
|
||||||
// this.newColorArr[index].data = [];
|
|
||||||
// this.newColorArr[index].data.push(...sortedArr);
|
|
||||||
|
|
||||||
// // let other = this.getOtherInfo(sortedArr);
|
|
||||||
// console.log(sortedArr[0]);
|
|
||||||
this.newColorArr[index].min = item.data[0].hex;
|
|
||||||
this.newColorArr[index].max =
|
|
||||||
item.data[item.data.length - 1].hex;
|
|
||||||
this.newColorArr[index].average =
|
|
||||||
item.data[Math.ceil(item.data.length / 2)].hex;
|
|
||||||
// this.newColorArr[index].name =
|
|
||||||
// this.newColorArr[index].average;
|
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// this.hlsColorArr.sort((a, b) => {
|
this.hlsColorArr.sort((a, b) => {
|
||||||
// return b.hsl.l - a.hsl.l;
|
return b.s - a.s;
|
||||||
// });
|
});
|
||||||
this.hlsColorArr = this.sortColors(this.hlsColorArr);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// this.active2 = false;
|
console.log(this.newColorArr);
|
||||||
this.sortedStatus = true;
|
},
|
||||||
}, 1000);
|
// 根据亮度
|
||||||
|
sortColorLight() {
|
||||||
|
this.active1 = false;
|
||||||
|
this.active2 = true;
|
||||||
|
if (this.hideOrigin) {
|
||||||
|
// 分组
|
||||||
|
this.newColorArr.forEach((item, index) => {
|
||||||
|
item.sort((a, b) => {
|
||||||
|
return (
|
||||||
|
b.l - a.l
|
||||||
|
// b.hsl[0] * b.hsl[1] * b.hsl[2] -
|
||||||
|
// a.hsl[0] * a.hsl[1] * a.hsl[2]
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.hlsColorArr.sort((a, b) => {
|
||||||
|
return b.l - a.l;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// console.log(this.newColorArr);
|
// console.log(this.newColorArr);
|
||||||
},
|
},
|
||||||
// 计算hsl颜色距离
|
// 计算颜色距离
|
||||||
colorDistanceHsl(_color1, _color2) {
|
colorDistance(color1, color2) {
|
||||||
let color1 = _color1;
|
const x =
|
||||||
let color2 = _color2;
|
Math.pow(color1[0] - color2[0], 2) +
|
||||||
let result = 0;
|
Math.pow(color1[1] - color2[1], 2) +
|
||||||
color1 = color1.hsl;
|
Math.pow(color1[2] - color2[2], 2);
|
||||||
color2 = color2.hsl;
|
return Math.sqrt(x);
|
||||||
Object.keys(color1).forEach((key, index) => {
|
},
|
||||||
if (key != "a") {
|
// 一维排序
|
||||||
result +=
|
oneDimensionSorting(colors, dim) {
|
||||||
(color1[key] - color2[key]) *
|
return colors.sort((colorA, colorB) => {
|
||||||
(color1[key] - color2[key]) *
|
if (colorA.hsl[dim] < colorB.hsl[dim]) {
|
||||||
this.balance2[index];
|
return -1;
|
||||||
}
|
} else if (colorA.hsl[dim] > colorB.hsl[dim]) {
|
||||||
});
|
return 1;
|
||||||
if (Math.floor(color1.r / 30) !== Math.floor(color2.r / 30)) {
|
} else {
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
return result;
|
|
||||||
},
|
|
||||||
// 计算rgb颜色距离
|
|
||||||
colorDistanceRgb(_color1, _color2) {
|
|
||||||
let color1 = _color1;
|
|
||||||
let color2 = _color2;
|
|
||||||
let result = 0;
|
|
||||||
color1 = color1.rgb;
|
|
||||||
color2 = color2.rgb;
|
|
||||||
Object.keys(color1).forEach((key, index) => {
|
|
||||||
if (key != "a") {
|
|
||||||
result +=
|
|
||||||
(color1[key] - color2[key]) *
|
|
||||||
(color1[key] - color2[key]) *
|
|
||||||
this.balance3[index];
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
return result;
|
|
||||||
},
|
},
|
||||||
// 计算hsv颜色距离 然后和rgb 以及 hsl 距离相加
|
// 根据明度
|
||||||
colorDistance(_color1, _color2) {
|
blendRgbaWithWhite(rgba) {
|
||||||
let color1 = _color1;
|
const color = colorUtil.color(rgba);
|
||||||
let color2 = _color2;
|
const a = color.rgb.a / 255;
|
||||||
let result = 0;
|
const r = Math.floor(color.rgb.r * a + 0xff * (1 - a));
|
||||||
result += this.colorDistanceRgb(color1, color2);
|
const g = Math.floor(color.rgb.g * a + 0xff * (1 - a));
|
||||||
result += this.colorDistanceHsl(color1, color2);
|
const b = Math.floor(color.rgb.b * a + 0xff * (1 - a));
|
||||||
color1 = color1.hsv;
|
return "#" + ((r << 16) | (g << 8) | b).toString(16);
|
||||||
color2 = color2.hsv;
|
|
||||||
Object.keys(color1).forEach((key, index) => {
|
|
||||||
if (key != "a") {
|
|
||||||
result +=
|
|
||||||
(color1[key] - color2[key]) *
|
|
||||||
(color1[key] - color2[key]) *
|
|
||||||
this.balance[index];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return result;
|
|
||||||
},
|
},
|
||||||
// 根据根据颜色距离排序
|
sortWithClusters(colorsToSort) {
|
||||||
sortColors(colors) {
|
const mappedColors = colorsToSort
|
||||||
// Calculate distance between each color
|
// .map((color) => {
|
||||||
console.log("origin length =", colors.length);
|
// console.log(color);
|
||||||
if (colors.length === 0) return colors;
|
// const isRgba = color.includes("rgba");
|
||||||
const distances = [];
|
// if (isRgba) {
|
||||||
for (let i = 0; i < colors.length; i++) {
|
// return blendRgbaWithWhite(color);
|
||||||
distances[i] = [];
|
// } else {
|
||||||
for (let j = 0; j < i; j++) {
|
// return color;
|
||||||
// if (colors[i].hex === colors[j].hex){
|
|
||||||
// console.log('相同',colors[i].hex)
|
|
||||||
// }
|
// }
|
||||||
distances.push([
|
// })
|
||||||
colors[i],
|
.map(colorUtil.color);
|
||||||
colors[j],
|
|
||||||
this.colorDistance(colors[i], colors[j]),
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
distances.sort((a, b) => a[2] - b[2]);
|
|
||||||
|
|
||||||
// console.log(distances.length);
|
mappedColors.forEach((color) => {
|
||||||
|
let minDistance;
|
||||||
|
let minDistanceClusterIndex;
|
||||||
|
|
||||||
// Put each color into separate cluster initially
|
this.clusters.forEach((cluster, clusterIndex) => {
|
||||||
const colorToCluster = {};
|
const colorRgbArr = [color.rgb.r, color.rgb.g, color.rgb.b];
|
||||||
for (let i = 0; i < colors.length; i++) {
|
const distance = this.colorDistance(
|
||||||
colorToCluster[colors[i].hex] = [colors[i]];
|
colorRgbArr,
|
||||||
|
cluster.leadColor
|
||||||
|
);
|
||||||
|
if (
|
||||||
|
typeof minDistance === "undefined" ||
|
||||||
|
minDistance > distance
|
||||||
|
) {
|
||||||
|
minDistance = distance;
|
||||||
|
minDistanceClusterIndex = clusterIndex;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Merge clusters, starting with lowest distances
|
this.clusters[minDistanceClusterIndex].colors.push(color);
|
||||||
let lastCluster;
|
});
|
||||||
for (let i = 0; i < distances.length; i++) {
|
|
||||||
const color1 = distances[i][0];
|
|
||||||
const color2 = distances[i][1];
|
|
||||||
|
|
||||||
const cluster1 = colorToCluster[color1 && color1.hex];
|
this.clusters.forEach((cluster) => {
|
||||||
const cluster2 = colorToCluster[color2 && color2.hex];
|
const dim = ["white", "grey", "black"].includes(cluster.name)
|
||||||
|
? "l"
|
||||||
|
: "s";
|
||||||
|
cluster.colors = this.oneDimensionSorting(cluster.colors, dim);
|
||||||
|
});
|
||||||
|
|
||||||
if (!cluster1 || !cluster2 || cluster1 === cluster2) {
|
return this.clusters;
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Make sure color1 is at the end of its cluster and
|
|
||||||
// color2 at the beginning.
|
|
||||||
if (color1 !== cluster1[cluster1.length - 1]) {
|
|
||||||
// cluster1 = this.colorReverse(cluster1);
|
|
||||||
cluster1.reverse();
|
|
||||||
}
|
|
||||||
if (color2 !== cluster2[0]) {
|
|
||||||
cluster2.reverse();
|
|
||||||
// cluster2 = this.colorReverse(cluster2);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Merge cluster2 into cluster1
|
|
||||||
cluster1.push(...cluster2);
|
|
||||||
delete colorToCluster[color1.hex];
|
|
||||||
delete colorToCluster[color2.hex];
|
|
||||||
colorToCluster[cluster1[0].hex] = cluster1;
|
|
||||||
colorToCluster[cluster1[cluster1.length - 1].hex] = cluster1;
|
|
||||||
lastCluster = cluster1;
|
|
||||||
}
|
|
||||||
console.log("sorted length =", lastCluster.length);
|
|
||||||
// By now all colors should be in one cluster
|
|
||||||
return lastCluster;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -534,8 +403,7 @@ export default {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding-bottom: 260px;
|
padding-bottom: 260px;
|
||||||
// background: #e3e7e8;
|
background: #e3e7e8;
|
||||||
background: rgb(84, 83, 83);
|
|
||||||
.color-span {
|
.color-span {
|
||||||
.prLayout(25px,25px);
|
.prLayout(25px,25px);
|
||||||
}
|
}
|
||||||
@ -555,7 +423,7 @@ export default {
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
.header {
|
.header {
|
||||||
.prLayout(100%,60px);
|
.prLayout(100%,60px);
|
||||||
margin: 0 0 0px 0;
|
margin: 140px 0 40px 0;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
text-indent: 10px;
|
text-indent: 10px;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
@ -566,44 +434,10 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
border-top: 2px solid #333;
|
border-top: 2px solid #333;
|
||||||
border-bottom: 2px solid #333;
|
border-bottom: 2px solid #333;
|
||||||
background: #e3e7e8;
|
|
||||||
.span {
|
.span {
|
||||||
.prLayout(30px,30px);
|
.prLayout(30px,30px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.spans {
|
|
||||||
.prLayout(100%,auto);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.row {
|
|
||||||
.prLayout(100%,60px);
|
|
||||||
line-height: 60px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-content: center;
|
|
||||||
align-items: center;
|
|
||||||
p {
|
|
||||||
width: 200px;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&::nth-first {
|
|
||||||
.header {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -617,15 +451,6 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
color: rgba(0, 0, 0, 0.8);
|
color: rgba(0, 0, 0, 0.8);
|
||||||
.first {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.p {
|
.p {
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
}
|
}
|
||||||
@ -635,10 +460,9 @@ export default {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
margin: 40px 20px;
|
margin: 10px;
|
||||||
background: linear-gradient(315deg, #ec7070, #c75f5f);
|
background: linear-gradient(315deg, #ec7070, #c75f5f);
|
||||||
box-shadow: -14px -14px 28px #b15454, 14px 14px 28px #ff7e7e;
|
box-shadow: -14px -14px 28px #b15454, 14px 14px 28px #ff7e7e;
|
||||||
cursor: pointer;
|
|
||||||
&.active {
|
&.active {
|
||||||
color: rgba(255, 255, 255, 1);
|
color: rgba(255, 255, 255, 1);
|
||||||
background: linear-gradient(315deg, #c75f5f, #ec7070);
|
background: linear-gradient(315deg, #c75f5f, #ec7070);
|
||||||
|
|||||||
@ -18,7 +18,6 @@ import Video from '../Video/index.vue'
|
|||||||
import Curve from '../modifier_curve/index.vue'
|
import Curve from '../modifier_curve/index.vue'
|
||||||
import Drawing from '../Drawing/index.vue'
|
import Drawing from '../Drawing/index.vue'
|
||||||
import ColorSort from '../colorSort/index.vue'
|
import ColorSort from '../colorSort/index.vue'
|
||||||
import PushCoin from '../PushCoinGame/index.vue'
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -120,20 +119,10 @@ const routes = [
|
|||||||
name: "ColorSort",
|
name: "ColorSort",
|
||||||
component: ColorSort,
|
component: ColorSort,
|
||||||
meta: {
|
meta: {
|
||||||
title: "Color Sorting", // 标题
|
title: "Color Sort", // 标题
|
||||||
keepAlive: false, // 是否保持活跃
|
keepAlive: false, // 是否保持活跃
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "/pushcoin",
|
|
||||||
name: "PushCoin",
|
|
||||||
component: PushCoin,
|
|
||||||
meta: {
|
|
||||||
title: "Push Coin Game", // 标题
|
|
||||||
keepAlive: false, // 是否保持活跃
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
// {
|
// {
|
||||||
// path: "/example",
|
// path: "/example",
|
||||||
|
|||||||
@ -1,179 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
/* Blob.js
|
|
||||||
* A Blob implementation.
|
|
||||||
* 2014-05-27
|
|
||||||
*
|
|
||||||
* By Eli Grey, http://eligrey.com
|
|
||||||
* By Devin Samarin, https://github.com/eboyjr
|
|
||||||
* License: X11/MIT
|
|
||||||
* See LICENSE.md
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*global self, unescape */
|
|
||||||
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
|
|
||||||
plusplus: true */
|
|
||||||
|
|
||||||
/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
|
|
||||||
|
|
||||||
(function (view) {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
view.URL = view.URL || view.webkitURL;
|
|
||||||
|
|
||||||
if (view.Blob && view.URL) {
|
|
||||||
try {
|
|
||||||
new Blob;
|
|
||||||
return;
|
|
||||||
} catch (e) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Internally we use a BlobBuilder implementation to base Blob off of
|
|
||||||
// in order to support older browsers that only have BlobBuilder
|
|
||||||
var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
|
|
||||||
var
|
|
||||||
get_class = function(object) {
|
|
||||||
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
|
|
||||||
}
|
|
||||||
, FakeBlobBuilder = function BlobBuilder() {
|
|
||||||
this.data = [];
|
|
||||||
}
|
|
||||||
, FakeBlob = function Blob(data, type, encoding) {
|
|
||||||
this.data = data;
|
|
||||||
this.size = data.length;
|
|
||||||
this.type = type;
|
|
||||||
this.encoding = encoding;
|
|
||||||
}
|
|
||||||
, FBB_proto = FakeBlobBuilder.prototype
|
|
||||||
, FB_proto = FakeBlob.prototype
|
|
||||||
, FileReaderSync = view.FileReaderSync
|
|
||||||
, FileException = function(type) {
|
|
||||||
this.code = this[this.name = type];
|
|
||||||
}
|
|
||||||
, file_ex_codes = (
|
|
||||||
"NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
|
|
||||||
+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
|
|
||||||
).split(" ")
|
|
||||||
, file_ex_code = file_ex_codes.length
|
|
||||||
, real_URL = view.URL || view.webkitURL || view
|
|
||||||
, real_create_object_URL = real_URL.createObjectURL
|
|
||||||
, real_revoke_object_URL = real_URL.revokeObjectURL
|
|
||||||
, URL = real_URL
|
|
||||||
, btoa = view.btoa
|
|
||||||
, atob = view.atob
|
|
||||||
|
|
||||||
, ArrayBuffer = view.ArrayBuffer
|
|
||||||
, Uint8Array = view.Uint8Array
|
|
||||||
;
|
|
||||||
FakeBlob.fake = FB_proto.fake = true;
|
|
||||||
while (file_ex_code--) {
|
|
||||||
FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
|
|
||||||
}
|
|
||||||
if (!real_URL.createObjectURL) {
|
|
||||||
URL = view.URL = {};
|
|
||||||
}
|
|
||||||
URL.createObjectURL = function(blob) {
|
|
||||||
var
|
|
||||||
type = blob.type
|
|
||||||
, data_URI_header
|
|
||||||
;
|
|
||||||
if (type === null) {
|
|
||||||
type = "application/octet-stream";
|
|
||||||
}
|
|
||||||
if (blob instanceof FakeBlob) {
|
|
||||||
data_URI_header = "data:" + type;
|
|
||||||
if (blob.encoding === "base64") {
|
|
||||||
return data_URI_header + ";base64," + blob.data;
|
|
||||||
} else if (blob.encoding === "URI") {
|
|
||||||
return data_URI_header + "," + decodeURIComponent(blob.data);
|
|
||||||
} if (btoa) {
|
|
||||||
return data_URI_header + ";base64," + btoa(blob.data);
|
|
||||||
} else {
|
|
||||||
return data_URI_header + "," + encodeURIComponent(blob.data);
|
|
||||||
}
|
|
||||||
} else if (real_create_object_URL) {
|
|
||||||
return real_create_object_URL.call(real_URL, blob);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
URL.revokeObjectURL = function(object_URL) {
|
|
||||||
if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
|
|
||||||
real_revoke_object_URL.call(real_URL, object_URL);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
FBB_proto.append = function(data/*, endings*/) {
|
|
||||||
var bb = this.data;
|
|
||||||
// decode data to a binary string
|
|
||||||
if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
|
|
||||||
var
|
|
||||||
str = ""
|
|
||||||
, buf = new Uint8Array(data)
|
|
||||||
, i = 0
|
|
||||||
, buf_len = buf.length
|
|
||||||
;
|
|
||||||
for (; i < buf_len; i++) {
|
|
||||||
str += String.fromCharCode(buf[i]);
|
|
||||||
}
|
|
||||||
bb.push(str);
|
|
||||||
} else if (get_class(data) === "Blob" || get_class(data) === "File") {
|
|
||||||
if (FileReaderSync) {
|
|
||||||
var fr = new FileReaderSync;
|
|
||||||
bb.push(fr.readAsBinaryString(data));
|
|
||||||
} else {
|
|
||||||
// async FileReader won't work as BlobBuilder is sync
|
|
||||||
throw new FileException("NOT_READABLE_ERR");
|
|
||||||
}
|
|
||||||
} else if (data instanceof FakeBlob) {
|
|
||||||
if (data.encoding === "base64" && atob) {
|
|
||||||
bb.push(atob(data.data));
|
|
||||||
} else if (data.encoding === "URI") {
|
|
||||||
bb.push(decodeURIComponent(data.data));
|
|
||||||
} else if (data.encoding === "raw") {
|
|
||||||
bb.push(data.data);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (typeof data !== "string") {
|
|
||||||
data += ""; // convert unsupported types to strings
|
|
||||||
}
|
|
||||||
// decode UTF-16 to binary string
|
|
||||||
bb.push(unescape(encodeURIComponent(data)));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
FBB_proto.getBlob = function(type) {
|
|
||||||
if (!arguments.length) {
|
|
||||||
type = null;
|
|
||||||
}
|
|
||||||
return new FakeBlob(this.data.join(""), type, "raw");
|
|
||||||
};
|
|
||||||
FBB_proto.toString = function() {
|
|
||||||
return "[object BlobBuilder]";
|
|
||||||
};
|
|
||||||
FB_proto.slice = function(start, end, type) {
|
|
||||||
var args = arguments.length;
|
|
||||||
if (args < 3) {
|
|
||||||
type = null;
|
|
||||||
}
|
|
||||||
return new FakeBlob(
|
|
||||||
this.data.slice(start, args > 1 ? end : this.data.length)
|
|
||||||
, type
|
|
||||||
, this.encoding
|
|
||||||
);
|
|
||||||
};
|
|
||||||
FB_proto.toString = function() {
|
|
||||||
return "[object Blob]";
|
|
||||||
};
|
|
||||||
FB_proto.close = function() {
|
|
||||||
this.size = this.data.length = 0;
|
|
||||||
};
|
|
||||||
return FakeBlobBuilder;
|
|
||||||
}(view));
|
|
||||||
|
|
||||||
view.Blob = function Blob(blobParts, options) {
|
|
||||||
var type = options ? (options.type || "") : "";
|
|
||||||
var builder = new BlobBuilder();
|
|
||||||
if (blobParts) {
|
|
||||||
for (var i = 0, len = blobParts.length; i < len; i++) {
|
|
||||||
builder.append(blobParts[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return builder.getBlob(type);
|
|
||||||
};
|
|
||||||
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
|
|
||||||
@ -1,143 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
require('script-loader!file-saver');
|
|
||||||
require('./Blob.js'); //改成相对路径
|
|
||||||
require('script-loader!xlsx/dist/xlsx.core.min');
|
|
||||||
function generateArray(table) {
|
|
||||||
var out = [];
|
|
||||||
var rows = table.querySelectorAll('tr');
|
|
||||||
var ranges = [];
|
|
||||||
for (var R = 0; R < rows.length; ++R) {
|
|
||||||
var outRow = [];
|
|
||||||
var row = rows[R];
|
|
||||||
var columns = row.querySelectorAll('td');
|
|
||||||
for (var C = 0; C < columns.length; ++C) {
|
|
||||||
var cell = columns[C];
|
|
||||||
var colspan = cell.getAttribute('colspan');
|
|
||||||
var rowspan = cell.getAttribute('rowspan');
|
|
||||||
var cellValue = cell.innerText;
|
|
||||||
if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
|
|
||||||
|
|
||||||
//Skip ranges
|
|
||||||
ranges.forEach(function (range) {
|
|
||||||
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
|
|
||||||
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//Handle Row Span
|
|
||||||
if (rowspan || colspan) {
|
|
||||||
rowspan = rowspan || 1;
|
|
||||||
colspan = colspan || 1;
|
|
||||||
ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});
|
|
||||||
}
|
|
||||||
;
|
|
||||||
|
|
||||||
//Handle Value
|
|
||||||
outRow.push(cellValue !== "" ? cellValue : null);
|
|
||||||
|
|
||||||
//Handle Colspan
|
|
||||||
if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
|
|
||||||
}
|
|
||||||
out.push(outRow);
|
|
||||||
}
|
|
||||||
return [out, ranges];
|
|
||||||
};
|
|
||||||
|
|
||||||
function datenum(v, date1904) {
|
|
||||||
if (date1904) v += 1462;
|
|
||||||
var epoch = Date.parse(v);
|
|
||||||
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function sheet_from_array_of_arrays(data, opts) {
|
|
||||||
var ws = {};
|
|
||||||
var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
|
|
||||||
for (var R = 0; R != data.length; ++R) {
|
|
||||||
for (var C = 0; C != data[R].length; ++C) {
|
|
||||||
if (range.s.r > R) range.s.r = R;
|
|
||||||
if (range.s.c > C) range.s.c = C;
|
|
||||||
if (range.e.r < R) range.e.r = R;
|
|
||||||
if (range.e.c < C) range.e.c = C;
|
|
||||||
var cell = {v: data[R][C]};
|
|
||||||
if (cell.v == null) continue;
|
|
||||||
var cell_ref = XLSX.utils.encode_cell({c: C, r: R});
|
|
||||||
|
|
||||||
if (typeof cell.v === 'number') cell.t = 'n';
|
|
||||||
else if (typeof cell.v === 'boolean') cell.t = 'b';
|
|
||||||
else if (cell.v instanceof Date) {
|
|
||||||
cell.t = 'n';
|
|
||||||
cell.z = XLSX.SSF._table[14];
|
|
||||||
cell.v = datenum(cell.v);
|
|
||||||
}
|
|
||||||
else cell.t = 's';
|
|
||||||
|
|
||||||
ws[cell_ref] = cell;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
|
|
||||||
return ws;
|
|
||||||
}
|
|
||||||
|
|
||||||
function Workbook() {
|
|
||||||
if (!(this instanceof Workbook)) return new Workbook();
|
|
||||||
this.SheetNames = [];
|
|
||||||
this.Sheets = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
function s2ab(s) {
|
|
||||||
var buf = new ArrayBuffer(s.length);
|
|
||||||
var view = new Uint8Array(buf);
|
|
||||||
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
|
|
||||||
return buf;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function export_table_to_excel(id) {
|
|
||||||
var theTable = document.getElementById(id);
|
|
||||||
console.log('a')
|
|
||||||
var oo = generateArray(theTable);
|
|
||||||
var ranges = oo[1];
|
|
||||||
|
|
||||||
/* original data */
|
|
||||||
var data = oo[0];
|
|
||||||
var ws_name = "SheetJS";
|
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
|
|
||||||
|
|
||||||
/* add ranges to worksheet */
|
|
||||||
// ws['!cols'] = ['apple', 'banan'];
|
|
||||||
ws['!merges'] = ranges;
|
|
||||||
|
|
||||||
/* add worksheet to workbook */
|
|
||||||
wb.SheetNames.push(ws_name);
|
|
||||||
wb.Sheets[ws_name] = ws;
|
|
||||||
|
|
||||||
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
|
|
||||||
|
|
||||||
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatJson(jsonData) {
|
|
||||||
console.log(jsonData)
|
|
||||||
}
|
|
||||||
export function export_json_to_excel(th, jsonData, defaultTitle) {
|
|
||||||
|
|
||||||
/* original data */
|
|
||||||
|
|
||||||
var data = jsonData;
|
|
||||||
data.unshift(th);
|
|
||||||
var ws_name = "SheetJS";
|
|
||||||
|
|
||||||
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
|
|
||||||
|
|
||||||
// 设置每列的宽度
|
|
||||||
ws['!cols'] = [{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:800},{wpx:100},{wpx:100},{wpx:100}];
|
|
||||||
/* add worksheet to workbook */
|
|
||||||
wb.SheetNames.push(ws_name);
|
|
||||||
wb.Sheets[ws_name] = ws;
|
|
||||||
|
|
||||||
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
|
|
||||||
var title = defaultTitle || '列表'
|
|
||||||
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
|
|
||||||
}
|
|
||||||
|
|
||||||
18
src/utils/plugins/easeljs-1.0.0.min.js
vendored
18
src/utils/plugins/easeljs-1.0.0.min.js
vendored
File diff suppressed because one or more lines are too long
23
src/utils/plugins/preloadjs-1.0.0.min.js
vendored
23
src/utils/plugins/preloadjs-1.0.0.min.js
vendored
File diff suppressed because one or more lines are too long
26
src/utils/plugins/soundjs-1.0.0.min.js
vendored
26
src/utils/plugins/soundjs-1.0.0.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,49 +0,0 @@
|
|||||||
var FPS = FPS || {};
|
|
||||||
FPS.time = 0;
|
|
||||||
FPS.FPS = 0;
|
|
||||||
FPS.showText = "";
|
|
||||||
FPS.startFPS = function (stage, pos = { x: 0, y: 0 }, app) {
|
|
||||||
FPS.app = app;
|
|
||||||
FPS.pos = pos;
|
|
||||||
FPS.shape = new createjs.Shape();
|
|
||||||
FPS.shape.graphics.beginFill("#2dffda").drawRect(pos.x, pos.y, 140, 50);
|
|
||||||
FPS.shape.alpha = .5;
|
|
||||||
FPS.txt = new createjs.Text("COUNT:", "24px Arial", "#ffffff");
|
|
||||||
FPS.txt.x = 20;
|
|
||||||
FPS.txt.y = pos.y + 10;
|
|
||||||
FPS.container = new createjs.Container();
|
|
||||||
if (FPS.app.debug) {
|
|
||||||
stage.addChild(FPS.container);
|
|
||||||
}
|
|
||||||
// FPS.container.addChild(FPS.shape)
|
|
||||||
// FPS.container.addChild(FPS.txt);
|
|
||||||
FPS.container.cache(pos.x, pos.y, 140, 50);
|
|
||||||
createjs.Ticker.addEventListener("tick", FPS.TickerFPS);
|
|
||||||
|
|
||||||
// setInterval(FPS.TickerFPS,18)
|
|
||||||
}
|
|
||||||
FPS.TickerFPS = function (event) {
|
|
||||||
FPS.date = new Date();
|
|
||||||
FPS.currentTime = FPS.date.getTime();
|
|
||||||
if (FPS.time != 0) {
|
|
||||||
FPS.FPS = Math.ceil(1000 / (FPS.currentTime - FPS.time));
|
|
||||||
}
|
|
||||||
FPS.time = FPS.currentTime;
|
|
||||||
FPS.txt.text = "FPS: " + FPS.FPS + "\n" + FPS.showText;
|
|
||||||
FPS.container.cache(FPS.pos.x, FPS.pos.y, 140, 50);
|
|
||||||
}
|
|
||||||
FPS.startFPS2 = function (stage) {
|
|
||||||
FPS.txt = document.getElementById("fps");
|
|
||||||
createjs.Ticker.addEventListener("tick", FPS.TickerFPS2);
|
|
||||||
}
|
|
||||||
FPS.TickerFPS2 = function (event) {
|
|
||||||
FPS.date = new Date();
|
|
||||||
FPS.currentTime = FPS.date.getTime();
|
|
||||||
if (FPS.time != 0) {
|
|
||||||
FPS.FPS = Math.ceil(1000 / (FPS.currentTime - FPS.time));
|
|
||||||
}
|
|
||||||
FPS.time = FPS.currentTime;
|
|
||||||
FPS.txt.innerText = "FPS: " + FPS.FPS;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = FPS;
|
|
||||||
5
src/utils/plugins/stats-3d.min.js
vendored
5
src/utils/plugins/stats-3d.min.js
vendored
@ -1,5 +0,0 @@
|
|||||||
// stats.js - http://github.com/mrdoob/stats.js
|
|
||||||
var Stats=function(){function h(a){c.appendChild(a.dom);return a}function k(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();k(++l%c.children.length)},!1);var g=(performance||Date).now(),e=g,a=0,r=h(new Stats.Panel("FPS","#0ff","#002")),f=h(new Stats.Panel("MS","#0f0","#020"));
|
|
||||||
if(self.performance&&self.performance.memory)var t=h(new Stats.Panel("MB","#f08","#201"));k(0);return{REVISION:16,dom:c,addPanel:h,showPanel:k,begin:function(){g=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();f.update(c-g,200);if(c>e+1E3&&(r.update(1E3*a/(c-e),100),e=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){g=this.end()},domElement:c,setMode:k}};
|
|
||||||
Stats.Panel=function(h,k,l){var c=Infinity,g=0,e=Math.round,a=e(window.devicePixelRatio||1),r=80*a,f=48*a,t=3*a,u=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=f;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,f);b.fillStyle=k;b.fillText(h,t,u);b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(f,
|
|
||||||
v){c=Math.min(c,f);g=Math.max(g,f);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=k;b.fillText(e(f)+" "+h+" ("+e(c)+"-"+e(g)+")",t,u);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,e((1-f/v)*p))}}};"object"===typeof module&&(module.exports=Stats);
|
|
||||||
@ -40,12 +40,6 @@ module.exports = {
|
|||||||
// development模式时打包也带有 hash 值
|
// development模式时打包也带有 hash 值
|
||||||
config.output.filename('static/js/[name].[hash].js').chunkFilename('static/js/[name].[hash].js').end()
|
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
|
config.resolve.alias
|
||||||
.set("@", resolve("src"))
|
.set("@", resolve("src"))
|
||||||
// .set("weui", resolve("src/utils/plugins/weui.js"))
|
// .set("weui", resolve("src/utils/plugins/weui.js"))
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user