开始做推币机
This commit is contained in:
rucky
parent
08fafbb06e
commit
f9c501a0f9
@ -3,26 +3,34 @@
|
||||
// plugins.push("transform-remove-console")
|
||||
// }
|
||||
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: [
|
||||
// '@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'
|
||||
]
|
||||
}
|
||||
]
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
],
|
||||
plugins: [
|
||||
"@babel/plugin-transform-runtime"
|
||||
["@babel/plugin-transform-modules-commonjs", {
|
||||
"allowTopLevelThis": true
|
||||
}]
|
||||
]
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
5
src/assets/css/package.json
Normal file
5
src/assets/css/package.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"easeljs": "^1.0.2"
|
||||
}
|
||||
}
|
||||
BIN
src/assets/images/loading/bg.jpg
Normal file
BIN
src/assets/images/loading/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
83
src/assets/images/loading/loadingSprite.json
Normal file
83
src/assets/images/loading/loadingSprite.json
Normal file
@ -0,0 +1,83 @@
|
||||
{
|
||||
|
||||
"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"
|
||||
]
|
||||
|
||||
}
|
||||
BIN
src/assets/images/loading/loadingSprite.png
Normal file
BIN
src/assets/images/loading/loadingSprite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
26
src/assets/images/loading/snowSprite.json
Normal file
26
src/assets/images/loading/snowSprite.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
|
||||
"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"
|
||||
]
|
||||
|
||||
}
|
||||
BIN
src/assets/images/loading/snowSprite.png
Normal file
BIN
src/assets/images/loading/snowSprite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
@ -110,6 +110,12 @@ export default {
|
||||
name: "颜色归类",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
fontIconCode: "",
|
||||
target: "PushCoin",
|
||||
name: "推币游戏",
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
668
src/page/index/PushCoinGame/game/animation.js
Normal file
668
src/page/index/PushCoinGame/game/animation.js
Normal file
@ -0,0 +1,668 @@
|
||||
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;
|
||||
496
src/page/index/PushCoinGame/game/createView.js
Normal file
496
src/page/index/PushCoinGame/game/createView.js
Normal file
@ -0,0 +1,496 @@
|
||||
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;
|
||||
44
src/page/index/PushCoinGame/game/frameData.js
Normal file
44
src/page/index/PushCoinGame/game/frameData.js
Normal file
@ -0,0 +1,44 @@
|
||||
/*================================*/
|
||||
/*============= 帧数据 ============*/
|
||||
/*================================*/
|
||||
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;
|
||||
303
src/page/index/PushCoinGame/game/index.js
Normal file
303
src/page/index/PushCoinGame/game/index.js
Normal file
@ -0,0 +1,303 @@
|
||||
import STAGE from "./stage";
|
||||
import LAYOUT from "./view";
|
||||
import { gsap } from "gsap";
|
||||
import Resource from "./preload";
|
||||
import utils from '@/utils/index.js';
|
||||
|
||||
|
||||
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(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();
|
||||
|
||||
}
|
||||
|
||||
// 开发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: () => {
|
||||
// console.log(this.VIEW.loading_progress_bar.graphics.command.w)
|
||||
},
|
||||
progressCallBack: (progress) => {
|
||||
// progress; // 0.99
|
||||
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.hideLoading()
|
||||
// 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)
|
||||
}
|
||||
|
||||
//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
|
||||
292
src/page/index/PushCoinGame/game/layout.js
Normal file
292
src/page/index/PushCoinGame/game/layout.js
Normal file
@ -0,0 +1,292 @@
|
||||
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
|
||||
26
src/page/index/PushCoinGame/game/maskCreater.js
Normal file
26
src/page/index/PushCoinGame/game/maskCreater.js
Normal file
@ -0,0 +1,26 @@
|
||||
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;
|
||||
9
src/page/index/PushCoinGame/game/pathCodes.js
Normal file
9
src/page/index/PushCoinGame/game/pathCodes.js
Normal file
@ -0,0 +1,9 @@
|
||||
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()"
|
||||
}
|
||||
43
src/page/index/PushCoinGame/game/preload.js
Normal file
43
src/page/index/PushCoinGame/game/preload.js
Normal file
@ -0,0 +1,43 @@
|
||||
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: 'logo',
|
||||
src: require("@/assets/images/logo.png")
|
||||
},
|
||||
{
|
||||
id: 'logo',
|
||||
src: require("@/assets/images/logo.png")
|
||||
}
|
||||
],
|
||||
audioList: [
|
||||
]
|
||||
},
|
||||
// 剩余资源
|
||||
after: {
|
||||
imgList: [],
|
||||
audioList: []
|
||||
},
|
||||
}
|
||||
1630
src/page/index/PushCoinGame/game/question.js
Normal file
1630
src/page/index/PushCoinGame/game/question.js
Normal file
File diff suppressed because it is too large
Load Diff
177
src/page/index/PushCoinGame/game/stage.js
Executable file
177
src/page/index/PushCoinGame/game/stage.js
Executable file
@ -0,0 +1,177 @@
|
||||
// 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
|
||||
this.currentStageWidth = window.innerWidth;
|
||||
this.currentStageHeight = 1624 / 750 * window.innerWidth;
|
||||
this.currentWidthHeightScale = this.currentStageWidth / this.currentStageHeight;
|
||||
|
||||
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;
|
||||
|
||||
this.offsetTop = (window.innerHeight - this.currentStageHeight) * this.stageCanvas.scaleY;
|
||||
|
||||
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;
|
||||
539
src/page/index/PushCoinGame/game/view.js
Normal file
539
src/page/index/PushCoinGame/game/view.js
Normal file
@ -0,0 +1,539 @@
|
||||
// import frameData from './frameData';
|
||||
import layoutData from './layout';
|
||||
import createLayout from './createView';
|
||||
// import maskCreater from './maskCreater'; //mask creater
|
||||
import { gsap } from "gsap";
|
||||
// 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(spriteSheet, name) {
|
||||
return new createjs.Sprite(spriteSheet, name);
|
||||
}
|
||||
|
||||
//创建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();
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
//隐藏loading页面
|
||||
hideLoading(step = 1) {
|
||||
//create story index
|
||||
this.game.scene = 2;
|
||||
gsap.to(this.game.stage.loadingContainer, {
|
||||
alpha: 0, duration: 0.65, delay: step == 3 ? 1 : 0, onComplete: () => {
|
||||
// 将loading重置ui显示 为二次加载资源做显示
|
||||
this.changeLoadingLayout(step);
|
||||
}
|
||||
})
|
||||
gsap.to(this.game.stage.mainContainer, { alpha: 1, duration: 0.65 });
|
||||
}
|
||||
|
||||
// 准备下一次loading
|
||||
changeLoadingLayout(step) {
|
||||
if (step == 1) {
|
||||
// 进度归零
|
||||
this.loading_progress_text.text = '0%';
|
||||
// 隐藏元素
|
||||
gsap.set([this.loading_start, this.loading_progress_bg, this.loading_progress_bar, this.loading_snow, this.loading_text], { alpha: 0 })
|
||||
// 显示元素
|
||||
gsap.set([this.loading_text2, this.loading_box, this.loading_light, this.loading_person], { alpha: 1 })
|
||||
gsap.set(this.loading_progress_text, { alpha: 1, y: 1260 })
|
||||
// 准备动画
|
||||
this.readyLangLoaderAni();
|
||||
} else if (step == 2) {
|
||||
// 隐藏元素
|
||||
gsap.set([this.loading_text2, this.loading_light, this.loading_person], { alpha: 0 })
|
||||
gsap.set(this.loading_progress_text, { alpha: 0 })
|
||||
// 显示元素
|
||||
gsap.set([this.loading_text3, this.loading_light2, this.loading_arrow], { alpha: 1 })
|
||||
// 如果是英文 显示英文文案
|
||||
if (this.game.langConfig.id == 3) {
|
||||
gsap.set([this.loading_text2_en, this.loading_text3], { alpha: 0 })
|
||||
gsap.set([this.loading_text3_en], { alpha: 1 })
|
||||
}
|
||||
// 准备动画
|
||||
this.readyPosterLoaderAni();
|
||||
}
|
||||
}
|
||||
|
||||
// 准备语言加载动画
|
||||
readyLangLoaderAni() {
|
||||
this.langLoaderAni = [];
|
||||
let ani1 = new gsap.timeline({ repeat: -1, paused: true })
|
||||
.to([this.loading_light, this.loading_person], { alpha: 0.86, duration: 0.2 })
|
||||
.to([this.loading_light, this.loading_person], { alpha: 1, duration: 0.15 })
|
||||
.to([this.loading_light, this.loading_person], { alpha: 0.6, duration: 0.2 })
|
||||
.to([this.loading_light, this.loading_person], { alpha: 1, duration: 0.1 })
|
||||
|
||||
let ani2 = gsap.to([this.loading_person, this.loading_box], { y: '+=15', yoyo: true, repeat: -1, duration: 1.5 })
|
||||
|
||||
|
||||
this.langLoaderAni.push(ani1, ani2)
|
||||
}
|
||||
|
||||
// 播放语言加载时动画
|
||||
playLangLoaderAni() {
|
||||
this.langLoaderAni.forEach((item) => {
|
||||
item.restart();
|
||||
})
|
||||
}
|
||||
|
||||
// 暂停语言加载时动画
|
||||
pauseLangLoaderAni() {
|
||||
this.langLoaderAni.forEach((item) => {
|
||||
item.pause();
|
||||
})
|
||||
}
|
||||
|
||||
// 准备语言加载动画
|
||||
readyPosterLoaderAni() {
|
||||
this.posterLoaderAni = [];
|
||||
let ani1 = new gsap.timeline({ repeat: -1, paused: true })
|
||||
.to(this.loading_light2, { alpha: 0.86, duration: 0.2 })
|
||||
.to(this.loading_light2, { alpha: 1, duration: 0.15 })
|
||||
.to(this.loading_light2, { alpha: 0.6, duration: 0.2 })
|
||||
.to(this.loading_light2, { alpha: 1, duration: 0.1 })
|
||||
|
||||
let ani2 = gsap.to([this.loading_box], { y: '+=15', yoyo: true, repeat: -1, duration: 1.5 })
|
||||
|
||||
let ani3 = gsap.to([this.loading_arrow], { y: '+=15', scaleX: 0.95, yoyo: true, repeat: -1, duration: 1.5 })
|
||||
|
||||
|
||||
this.posterLoaderAni.push(ani1, ani2, ani3)
|
||||
}
|
||||
|
||||
// 播放语言加载时动画
|
||||
playPosterLoaderAni() {
|
||||
this.posterLoaderAni.forEach((item) => {
|
||||
item.restart();
|
||||
})
|
||||
}
|
||||
|
||||
// 暂停语言加载时动画
|
||||
pausePosterLoaderAni() {
|
||||
this.posterLoaderAni.forEach((item) => {
|
||||
item.pause();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 帧生成动画
|
||||
framePlayer(config) {
|
||||
// 图像资源
|
||||
// 容器
|
||||
// const container = new createjs.Container();
|
||||
|
||||
// loader
|
||||
const loader = this.game[config.name];
|
||||
|
||||
// images
|
||||
const images = [];
|
||||
config.imgIds.forEach((item) => {
|
||||
images.push(loader.getResult(item));
|
||||
})
|
||||
|
||||
// handle speed
|
||||
Object.keys(config.sprite.animations).forEach((key) => {
|
||||
// console.log('speed=', this.game.globalSpeed * 0.18)
|
||||
config.sprite.animations[key].speed = this.game.globalSpeed * 0.18;
|
||||
config.sprite.animations[key].next = 'wait'
|
||||
});
|
||||
|
||||
// animation config
|
||||
const aniData = {
|
||||
images,
|
||||
frames: config.sprite.frames,
|
||||
animations: config.sprite.animations
|
||||
}
|
||||
|
||||
const spriteSheet = new createjs.SpriteSheet(aniData);
|
||||
const animation = new createjs.Sprite(spriteSheet);
|
||||
|
||||
// default setting
|
||||
if (config.name === 'guide' || config.name === 'wait') {
|
||||
animation.set({
|
||||
name: config.name,
|
||||
x: 390,
|
||||
y: 280 + 512,
|
||||
scaleX: 1.25,
|
||||
scaleY: 1.25,
|
||||
regX: 750 * 0.85 / 2,
|
||||
regY: 1624 * 0.85 / 2,
|
||||
alpha: 0
|
||||
})
|
||||
} else {
|
||||
animation.set({
|
||||
name: config.name,
|
||||
x: 220,
|
||||
y: 565 + 512,
|
||||
scaleX: 1,
|
||||
scaleY: 1,
|
||||
regX: 750 * 1 / 2,
|
||||
regY: 1624 * 1 / 2,
|
||||
alpha: 0
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return animation
|
||||
}
|
||||
|
||||
// 生成海报
|
||||
createPoster(nickname = '', level = 1) {
|
||||
this.posterContainer = new createjs.Container().set({ alpha: 1, name: 'posterContainer' });
|
||||
// this.game.stage.mainContainer.addChild(this.posterContainer);
|
||||
|
||||
// 海报图片
|
||||
let posterImg = this.game.posterLoader.getResult('poster_bg');
|
||||
// 海报对象
|
||||
let poster = new createjs.Bitmap(posterImg);
|
||||
|
||||
// nickname
|
||||
let nt;
|
||||
if (nickname) {
|
||||
nt = this.game.vue.$Utils.cutString(nickname, 20, true);
|
||||
}
|
||||
let nicknameText = new createjs.Text(nt, "38px Helvetica, Arial, sans-serif", "#31425b").set({
|
||||
x: 375,
|
||||
y: 1086,
|
||||
textAlign: 'center'
|
||||
});
|
||||
|
||||
let levelImg = this.game.posterLoader.getResult(`word_${level}`);
|
||||
let posConfig = [
|
||||
{
|
||||
x: 50,
|
||||
y: 239
|
||||
},
|
||||
{
|
||||
x: 70,
|
||||
y: 242
|
||||
},
|
||||
{
|
||||
x: 54,
|
||||
y: 243
|
||||
},
|
||||
{
|
||||
x: 57,
|
||||
y: 224
|
||||
},
|
||||
{
|
||||
x: 50,
|
||||
y: 243
|
||||
}
|
||||
]
|
||||
// 等级称号
|
||||
let levelTitle = new createjs.Bitmap(levelImg).set(
|
||||
this.game.langConfig.id == 3 ? posConfig[Number(level) - 1] : posConfig[4]
|
||||
);
|
||||
|
||||
|
||||
let personImg = this.game.posterLoader.getResult('person');
|
||||
// 王冰冰
|
||||
let person = new createjs.Bitmap(personImg).set({
|
||||
x: this.game.langConfig.id == 3 ? 76 : 86,
|
||||
y: this.game.langConfig.id == 3 ? 381 : 256
|
||||
});
|
||||
|
||||
// 根据版本选择不同的二维码 目前全部选用微信版本二维码
|
||||
let codeName = 'qrcode';
|
||||
// switch (process.env.VUE_APP_CURRENTMODE) {
|
||||
// case 'ysprod':
|
||||
// codeName = 'ys_qrcode';
|
||||
// break;
|
||||
// case 'wbprod':
|
||||
// codeName = 'wb_qrcode';
|
||||
// break;
|
||||
// default:
|
||||
// codeName = 'qrcode';
|
||||
// break;
|
||||
// }
|
||||
let qrcodeImg = this.game.posterLoader.getResult(codeName);
|
||||
// 海报对象
|
||||
let qrcode = new createjs.Bitmap(qrcodeImg).set({
|
||||
x: this.game.langConfig.id == 3 ? 305 : 306,
|
||||
y: this.game.langConfig.id == 3 ? 1256 : 1275,
|
||||
scaleX: 0.34,
|
||||
scaleY: 0.34,
|
||||
width: 136,
|
||||
height: 136
|
||||
});
|
||||
|
||||
let logoImg = this.game.posterLoader.getResult('logo');
|
||||
// 海报对象
|
||||
let logo = new createjs.Bitmap(logoImg).set({
|
||||
x: this.game.langConfig.id == 3 ? 341 : 341,
|
||||
y: this.game.langConfig.id == 3 ? 1482 : 1482,
|
||||
});
|
||||
|
||||
// 插入container
|
||||
this.posterContainer.addChild(poster, nicknameText, qrcode, levelTitle, person, logo);
|
||||
|
||||
this.posterContainer.cache(0, 0, 750, 1538);
|
||||
|
||||
// easejs > 1.0.0 getCacheDataURL报错 0.8.2版本正常
|
||||
let baseUrl = this.posterContainer.cacheCanvas.toDataURL('image/png');
|
||||
// let baseUrl = this.posterContainer.getCacheDataURL();
|
||||
|
||||
setTimeout(() => {
|
||||
this.destroyPosterCreater();
|
||||
}, 1000);
|
||||
|
||||
return baseUrl
|
||||
}
|
||||
|
||||
// 销毁海报生成器
|
||||
destroyPosterCreater() {
|
||||
this.posterContainer.uncache();
|
||||
this.posterContainer.removeAllChildren();
|
||||
this.game.stage.mainContainer.removeChild(this.posterContainer);
|
||||
this.posterContainer = null;
|
||||
}
|
||||
|
||||
// index 粒子制造机
|
||||
createParticle() {
|
||||
|
||||
// 容器
|
||||
// const loadingContainer = this.game.stage.loadingContainer;
|
||||
|
||||
// loader
|
||||
const loader = this.game.vue.$beforeLoader;
|
||||
|
||||
// sprite image
|
||||
const spriteImg = loader.getResult('snowSprite');
|
||||
|
||||
|
||||
const container = new createjs.Container();
|
||||
|
||||
|
||||
const aniData = {
|
||||
images: [spriteImg],
|
||||
frames: [
|
||||
[1, 1, 77, 82, 0, 0, 0],
|
||||
[1, 85, 57, 55, 0, 0, 0],
|
||||
[1, 142, 46, 45, 0, 0, 0],
|
||||
[49, 142, 15, 15, 0, 0, 0],
|
||||
[60, 85, 8, 12, 0, 0, 0],
|
||||
[60, 99, 6, 6, 0, 0, 0]
|
||||
],
|
||||
animations: {
|
||||
"snow-1": { "frames": [0] },
|
||||
"snow-2": { "frames": [1] },
|
||||
"snow-3": { "frames": [2] },
|
||||
"snow-4": { "frames": [3] },
|
||||
"snow-5": { "frames": [4] },
|
||||
"snow-6": { "frames": [3] },
|
||||
"snow-7": { "frames": [4] },
|
||||
"snow-8": { "frames": [2] },
|
||||
"snow-9": { "frames": [3] },
|
||||
"snow-10": { "frames": [1] },
|
||||
}
|
||||
}
|
||||
|
||||
const spriteSheet = new createjs.SpriteSheet(aniData);
|
||||
|
||||
const arr = [];
|
||||
for (let i = 0; i < (window.deviceInfo.system == 'IOS' ? 50 : 50); i++) {
|
||||
const scale = Math.random() * 0.35 + 0.5;
|
||||
const name = `snow-${this.game.vue.$Utils.rangeRandom(1, 10)}`;
|
||||
const sprite = this.createBitmap(spriteSheet, name).set({
|
||||
x: Math.random() * 750 - 30,
|
||||
y: Math.random() * 1300,
|
||||
ox: Math.random() * 750,
|
||||
oy: -50,
|
||||
// regX:14,
|
||||
// regY:14,
|
||||
scaleX: scale,
|
||||
scaleY: scale,
|
||||
speedX: (Math.random() > 0.5 ? 1 : -1) * (Math.random() * 0.5 + 0.25),
|
||||
speedY: Math.random() * 1 + 1,
|
||||
speedR: Math.random() * 0.5 + 0.5,
|
||||
alpha: Math.random() * 0.3 + 0.5,
|
||||
})
|
||||
|
||||
arr.push(sprite)
|
||||
}
|
||||
// const mask = new createjs.Shape().setTransform(0, 0, 1, 1);
|
||||
// mask.graphics.f('#000000').drawRoundRect(0, 0, 750, 1300, 0).es();
|
||||
// contianer.mask = mask;
|
||||
// contianer.compositeOperation = 'darker';
|
||||
// arr.push(mask)
|
||||
container.children = arr;
|
||||
|
||||
this.prarticleContainer = container;
|
||||
this.game.stage.mainContainer.addChild(container);
|
||||
return container
|
||||
}
|
||||
|
||||
|
||||
// loading 粒子制造机
|
||||
createLoadingParticle() {
|
||||
const container = new createjs.Container();
|
||||
|
||||
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;
|
||||
43
src/page/index/PushCoinGame/index.vue
Normal file
43
src/page/index/PushCoinGame/index.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
* @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"></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 scoped lang="less">
|
||||
.pushcoin {
|
||||
.prLayout(100%,100%);
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
}
|
||||
</style>
|
||||
@ -35,15 +35,24 @@
|
||||
<div class="desc" v-if="sortedStatus">
|
||||
<div class="row">
|
||||
<p>最小值: {{ item.min }}</p>
|
||||
<div class="color-span" :style="rennderCssHex(item.min)"></div>
|
||||
<div
|
||||
class="color-span"
|
||||
:style="rennderCssHex(item.min)"
|
||||
></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>平均值: {{ item.average }}</p>
|
||||
<div class="color-span" :style="rennderCssHex(item.average)"></div>
|
||||
<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
|
||||
class="color-span"
|
||||
:style="rennderCssHex(item.max)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -91,7 +100,6 @@
|
||||
// @ is an alias to /src
|
||||
import colorUtil from "color-util";
|
||||
import colors from "@/data/color.json";
|
||||
import Snap from "snapsvg-cjs";
|
||||
import gsap from "gsap";
|
||||
export default {
|
||||
name: "ColorSort",
|
||||
@ -106,87 +114,88 @@ export default {
|
||||
hlsColorArr: [],
|
||||
newColorArr: [
|
||||
{
|
||||
name: '',
|
||||
name: "",
|
||||
data: [],
|
||||
average: '',
|
||||
min: '',
|
||||
max: '',
|
||||
average: "",
|
||||
min: "",
|
||||
max: "",
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
name: "",
|
||||
data: [],
|
||||
average: '',
|
||||
min: '',
|
||||
max: '',
|
||||
average: "",
|
||||
min: "",
|
||||
max: "",
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
name: "",
|
||||
data: [],
|
||||
average: '',
|
||||
min: '',
|
||||
max: '',
|
||||
average: "",
|
||||
min: "",
|
||||
max: "",
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
name: "",
|
||||
data: [],
|
||||
average: '',
|
||||
min: '',
|
||||
max: '',
|
||||
average: "",
|
||||
min: "",
|
||||
max: "",
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
name: "",
|
||||
data: [],
|
||||
average: '',
|
||||
min: '',
|
||||
max: '',
|
||||
average: "",
|
||||
min: "",
|
||||
max: "",
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
name: "",
|
||||
data: [],
|
||||
average: '',
|
||||
min: '',
|
||||
max: '',
|
||||
average: "",
|
||||
min: "",
|
||||
max: "",
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
name: "",
|
||||
data: [],
|
||||
average: '',
|
||||
min: '',
|
||||
max: '',
|
||||
average: "",
|
||||
min: "",
|
||||
max: "",
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
name: "",
|
||||
data: [],
|
||||
average: '',
|
||||
min: '',
|
||||
max: '',
|
||||
},{
|
||||
name: '',
|
||||
data: [],
|
||||
average: '',
|
||||
min: '',
|
||||
max: '',
|
||||
average: "",
|
||||
min: "",
|
||||
max: "",
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
name: "",
|
||||
data: [],
|
||||
average: '',
|
||||
min: '',
|
||||
max: '',
|
||||
average: "",
|
||||
min: "",
|
||||
max: "",
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
name: "",
|
||||
data: [],
|
||||
average: '',
|
||||
min: '',
|
||||
max: '',
|
||||
average: "",
|
||||
min: "",
|
||||
max: "",
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
name: "",
|
||||
data: [],
|
||||
average: '',
|
||||
min: '',
|
||||
max: '',
|
||||
average: "",
|
||||
min: "",
|
||||
max: "",
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
data: [],
|
||||
average: "",
|
||||
min: "",
|
||||
max: "",
|
||||
},
|
||||
],
|
||||
sortedColorArr: [],
|
||||
@ -224,8 +233,7 @@ export default {
|
||||
autoAlpha: 1,
|
||||
x: this.hideOrigin ? 0 : "100%",
|
||||
zIndex: this.hideOrigin ? 2 : 10,
|
||||
onStart: () => {
|
||||
},
|
||||
onStart: () => {},
|
||||
});
|
||||
},
|
||||
// 颜色数据转换为hsl
|
||||
@ -319,11 +327,14 @@ export default {
|
||||
this.newColorArr[index].data.push(...sortedArr);
|
||||
|
||||
// let other = this.getOtherInfo(sortedArr);
|
||||
console.log(sortedArr[0])
|
||||
console.log(sortedArr[0]);
|
||||
this.newColorArr[index].min = sortedArr[0].hex;
|
||||
this.newColorArr[index].max = sortedArr[sortedArr.length-1].hex;
|
||||
this.newColorArr[index].average = sortedArr[Math.ceil(sortedArr.length/2)].hex;
|
||||
this.newColorArr[index].name = this.newColorArr[index].average
|
||||
this.newColorArr[index].max =
|
||||
sortedArr[sortedArr.length - 1].hex;
|
||||
this.newColorArr[index].average =
|
||||
sortedArr[Math.ceil(sortedArr.length / 2)].hex;
|
||||
this.newColorArr[index].name =
|
||||
this.newColorArr[index].average;
|
||||
});
|
||||
} else {
|
||||
// this.hlsColorArr.sort((a, b) => {
|
||||
|
||||
@ -18,6 +18,7 @@ import Video from '../Video/index.vue'
|
||||
import Curve from '../modifier_curve/index.vue'
|
||||
import Drawing from '../Drawing/index.vue'
|
||||
import ColorSort from '../colorSort/index.vue'
|
||||
import PushCoin from '../PushCoinGame/index.vue'
|
||||
|
||||
|
||||
|
||||
@ -123,6 +124,16 @@ const routes = [
|
||||
keepAlive: false, // 是否保持活跃
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/pushcoin",
|
||||
name: "PushCoin",
|
||||
component: PushCoin,
|
||||
meta: {
|
||||
title: "Push Coin Game", // 标题
|
||||
keepAlive: false, // 是否保持活跃
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
// {
|
||||
// path: "/example",
|
||||
|
||||
18
src/utils/plugins/easeljs-1.0.0.min.js
vendored
Normal file
18
src/utils/plugins/easeljs-1.0.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
23
src/utils/plugins/preloadjs-1.0.0.min.js
vendored
Normal file
23
src/utils/plugins/preloadjs-1.0.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
26
src/utils/plugins/soundjs-1.0.0.min.js
vendored
Normal file
26
src/utils/plugins/soundjs-1.0.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
54
src/utils/plugins/stats-2d.js
Normal file
54
src/utils/plugins/stats-2d.js
Normal file
@ -0,0 +1,54 @@
|
||||
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
Normal file
5
src/utils/plugins/stats-3d.min.js
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
// 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);
|
||||
Loading…
Reference in New Issue
Block a user