游戏

index.html

@@ -22,7 +22,7 @@
 <!--     <script src="libs/svgaParser.min1.js"></script> -->
 <script src="//yun.duiba.com.cn/js-libs/vConsole/3.3.4/vconsole.min.js"></script>
   <script>
-    var vConsole = new VConsole();
+    // var vConsole = new VConsole();
   </script>
     <style>
         html,

resource/res.json

@@ -9,7 +9,7 @@
 			"name": "GameOverPanel"
 		},
 		{
-			"keys": "balance_guidance.png,guidance-t1.png,p1-b.png,p1.png",
+			"keys": "back.png,balance_guidance.png,guidance-t1.png,num0.png,num1.png,num2.png,num3.png,num4.png,num5.png,num6.png,num7.png,num8.png,num9.png,nump.png,p1-b.png,p1.png,p10-b.png,p10.png,p11-b.png,p11.png,p12-b.png,p12.png,p13-b.png,p13.png,p14-b.png,p14.png,p15-b.png,p15.png,p16-b.png,p16.png,p17-b.png,p17.png,p18-b.png,p18.png,p19-b.png,p19.png,p2-b.png,p2.png,p20-b.png,p20.png,p3-b.png,p3.png,p4-b.png,p4.png,p5-b.png,p5.png,p6-b.png,p6.png,p7-b.png,p7.png,p8-b.png,p8.png,p9-b.png,p9.png",
 			"name": "GameScene"
 		},
 		{

src/Main.ts

@@ -178,7 +178,7 @@ export class Main {
         // const scene = Tools.globalData.newUser ? StoryScene : IndexScene;
         
         // vtodo 是否是新手
-        changeScene(GameScene);
+        changeScene(NewGuyScene);
 
         // MusicBtn.changeMusicStatus(true);   // TODO 进游戏打开音乐先
 

src/common/CircleProgressBar.ts

+type CircleProgressType = {
+  x?: number,
+  y?: number,
+  radius?: number,
+  circleColor?: number,
+  backColor?: number,
+  lineWidth?: number,
+  value?:number
+}
+
+export default class CircleProgressBar extends FYGE.Container {
+  opt: CircleProgressType
+  _value: number
+  constructor(opt?: CircleProgressType) {
+    super()
+    this.opt = Object.assign({}, {
+      x: 0,
+      y: 0,
+      radius: 10,
+      lineWidth: 10,
+      circleColor: 0xfe5000,
+      backColor: 0xf0e4ce,
+      value: 0
+    }, opt)
+
+    this._value = this.opt.value > 1 ? 1 : (this.opt.value < 0 ? 0 : this.opt.value)
+
+    this.initUi()
+  }
+
+  backCircle: FYGE.Shape
+  progressCircle: FYGE.Shape
+  initUi() {
+    var radius = this.opt.radius
+    var lw = this.opt.lineWidth
+
+    this.x = this.opt.x - radius - lw
+    this.y = this.opt.y - radius - lw
+    
+    this.backCircle = this.addChild(new FYGE.Shape)
+    this.backCircle.anchorTexture.set(0.5, 0.5)
+    this.backCircle.beginStroke(this.opt.backColor, this.opt.lineWidth)
+    this.backCircle.arc(radius + lw, radius + lw, radius, 0, 2*Math.PI)
+    this.backCircle.endStroke()
+
+    this.strokeProgress(this.opt.value)
+  }
+
+  strokeProgress(v) {
+    var radius = this.opt.radius
+    var lw = this.opt.lineWidth
+    if (!this.progressCircle) {
+      this.progressCircle = this.addChild(new FYGE.Shape)
+      this.progressCircle.anchorX = radius + lw
+      this.progressCircle.anchorY = radius + lw
+      this.progressCircle.rotation = -90 // 好看点
+      this.progressCircle.beginStroke(this.opt.circleColor, this.opt.lineWidth, FYGE.LINE_CAP.ROUND)
+      this.progressCircle.arc(radius + lw, radius + lw, radius, 0, 2*Math.PI * v)
+      this.progressCircle.endStroke()
+    } else {
+      this.progressCircle.clear()
+      this.progressCircle.beginStroke(this.opt.circleColor, this.opt.lineWidth, FYGE.LINE_CAP.ROUND)
+        .arc(radius + lw, radius + lw, radius, 0, 2*Math.PI * v)
+        .endStroke()
+    }
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  set value(v) {
+    if (v < 0) v = 0;
+    if (v > 1) v = 1;
+    this._value = v;
+    // this.progressTxt && (this.progressTxt.text = this.progressCfg.valueDesc + ((v * 100) >> 0) + "%");
+    this.strokeProgress(v)
+  }
+}
\ No newline at end of file

src/components/CountDownComp.ts

@@ -11,6 +11,22 @@ type TimeObj = {
 export default class CountDownComp extends Module {
   timeoutFn: Array<Function>
   tobj: TimeObj // 倒计时
+  iTime: number // 第一次的时间
+
+  get initTime():number {
+    return this.iTime
+  }
+
+  /**
+   * 初始化时间
+   * @param t 
+   */
+  set initTime(t:number) {
+    this.iTime = t
+    this.tobj = {t}
+    this.formatTime(t)
+  }
+
   constructor(t: number) {
     super(t)
   }
@@ -25,7 +41,7 @@ export default class CountDownComp extends Module {
 
     this.cdt = UI.Txt(this, '00:00:00', 30, '#ffffff', FYGE.TEXT_ALIGN.LEFT, 200, 63, 17)
     
-    this.initTime(this.data)
+    this.initTime = this.data
   }
 
   /**
@@ -42,15 +58,6 @@ export default class CountDownComp extends Module {
     this.timeoutFn.splice(i, 1)
   }
 
-  /**
-   * 初始化时间
-   * @param t 
-   */
-  initTime(t:number) {
-    this.tobj = {t}
-    this.formatTime(t)
-  }
-
   formatTime(n:number) {
     var _t = dateLeftFormat('mm:ss', (n / 1000) >> 0)
     _t += `:${padStart((n%1000/10 >> 0), 2, '0')}`;
@@ -78,7 +85,7 @@ export default class CountDownComp extends Module {
   }
 
   restart(t?:number) {
-    t && this.initTime(t)
+    t && (this.initTime = t)
     this.start()
   }
 

src/scenes/GameScene/DeviceMotion.ts

@@ -58,7 +58,7 @@ class DeviceMotion {
     
   }
 
-  removeEvents() {
+  _tmdremoveEvents() {
     if (my) {
       //@ts-ignore
       my.offDeviceMotionChange();

src/scenes/GameScene/GameConfig.ts

@@ -2,7 +2,10 @@ export const GameCfg = {
   acc: 0.3, // 垂直重力加速度  todo 对不同帧率进行处理
   ispeed: 0, // 初速度
   fpsScale: 1000 / 60, // 帧变数
-  resisteAcc: 0.03, // 摩擦力反加速度
+  resisteAcc: 0.06, // 摩擦力反加速度
   rc: 20, // 误差值，距离中心点的误差值
   duanpingValue: 8 / 180 * Math.PI, // 默认小于 8 度就算端平
+
+  iTime: 12000, // 初始化游戏时间
+  rt: 1000 //每次递减
 }
\ No newline at end of file

src/scenes/GameScene/GameScene.ts

@@ -8,6 +8,8 @@ import { GDispatcher } from '../../Main';
 import { MotionInitFunc, MotionInitScene } from './MotionInit';
 import { setCenterPos } from '../NewGuyScene/NewGuyScene';
 import CountDownComp from '../../components/CountDownComp';
+import CircleProgressBar from '../../common/CircleProgressBar';
+import { RES } from '../../../module/RES';
 
 const Container = FYGE.Container
 const TEXT_ALIGN = FYGE.TEXT_ALIGN
@@ -55,42 +57,54 @@ function pos2Len(p1: pos, p2:pos):number {
 
 
 export class GameScene extends MotionInitScene {
-  ralpha: number = 0
-  rbeta: number = 0
-  rgamma: number = 0
 
-  constructor(...args){
+  cdp: CountDownComp
+  scoreText: FYGE.TextField
+  _score: number
+  gameEle: GameEle
+  _gIndex: number = 1 // 游戏元素索引
+
+  constructor(...args: any){
     super(...args)
   }
 
-  get groupNames(): string[] {
-    return ['GameScene']
+  set gIndex(n: number) {
+    this._gIndex = n % 20 || 20
+    this.gameEle && this.gameEle.resetInit(`p${n}.png`)
+    this.centerp && (this.centerp.texture = RES.getRes(`p${n}-b.png`))
   }
 
-  alphaText: FYGE.TextField
-  betaText: FYGE.TextField
-  gammaText: FYGE.TextField
-  centerp: FYGE.Sprite
-  gyroscope: FYGE.TextField
+  get gIndex(): number {
+    return this._gIndex
+  }
 
-  cdp: CountDownComp
-  async initUi() {
+  get groupNames(): string[] {
+    return ['GameScene']
+  }
 
-    UI.Txt(this, '陀螺仪游戏调试', 50, '#000000', TEXT_ALIGN.CENTER, layers.stageWidth, layers.stageOffsetX, layers.stageOffsetY + 10, true)
-    this.alphaText = UI.Txt(this, 'alpha: 0', 40, '#000000', TEXT_ALIGN.CENTER, layers.stageWidth, layers.stageOffsetX, layers.stageOffsetY + 100)
-    this.betaText = UI.Txt(this, 'beta: 0', 40, '#000000', TEXT_ALIGN.CENTER, layers.stageWidth, layers.stageOffsetX, layers.stageOffsetY + 150)
-    this.gammaText = UI.Txt(this, 'gamma: 0', 40, '#000000', TEXT_ALIGN.CENTER, layers.stageWidth, layers.stageOffsetX, layers.stageOffsetY + 200)
+  set score(n: number) {
+    this._score = n;
+    (this.scoreText || (this.scoreText = UI.Txt(this, '连续完成: ' + n, 40, '#111111', FYGE.TEXT_ALIGN.CENTER, layers.stageWidth, 0, layers.stageOffsetY + 200, true))).text = '连续完成: '+n
+  }
 
-    this.gyroscope = UI.Txt(this, '', 40, '#000000', TEXT_ALIGN.CENTER, layers.stageWidth, 0, layers.stageOffsetY + 300)
+  get score() {
+    return this._score
+  }
 
-    // vtodo 模拟中心点
-    var centerp = this.centerp = setCenterPos(UI.Sp(this, 'p1-b.png'))
+  async initUi() {
+    UI.Sp(this, 'back.png')
+    
+    this.score = 0
 
-    var cdp = this.cdp = this.addChild(new CountDownComp(12000))
+    var cdp = this.cdp = this.addChild(new CountDownComp(GameCfg.iTime))
     this.cdp.addTimeoutFunc(() => {
-      console.log('时间结束')
+      // this.cdp.visible = false
+      //@ts-ignore
+      my.showToast({
+        content: '游戏结束'
+      })
     })
-    cdp.position.set(layers.stageOffsetX + layers.stageWidth - 230, layers.stageOffsetY + 40)
+    cdp.position.set(layers.stageCenterX - 105, layers.stageOffsetY + 260)
 
     super.initUi()
   }
@@ -98,9 +112,12 @@ export class GameScene extends MotionInitScene {
   initGame() {
     this.cdp.start()
 
-    this.addChild(new GameEle('p1.png', this.centerp, () => {
-      this.cdp.initTime(15000)
-      this.motionInitFunc.showGuidance()
+    this.gameEle = this.addChild(new GameEle('p1-b.png', this.centerp, () => {
+      this.score += 1
+      this.gIndex += 1
+      this.cdp.initTime = GameCfg.iTime
+      // 直接出来一个
+      // this.motionInitFunc.showGuidance()
     }))
   }
 
@@ -113,36 +130,28 @@ export class GameScene extends MotionInitScene {
   }
 
   initEvents() {
-    console.log('%c 初始化事件 ========', 'color: green')
-    // vtodo 先用window 陀螺仪进行处理
-    deviceMotionSubs.notify(this.orientationHandler, this)
-
-    //@ts-ignore
-    // my && my.onGyroscopeChange((res) => {
-    //   this.gyroscope.text = `x:${res.x.toFixed(2)}, y: ${res.y.toFixed(2)}, z: ${res.z.toFixed(2)}`
-    //   this.alphaText.text = `alpha: ${(this.ralpha += res.z).toFixed(2)}`
-    //   this.betaText.text = `beta: ${(this.rbeta += res.x).toFixed(2)}`
-    //   this.gammaText.text = `gamma: ${(this.rgamma += res.y).toFixed(2)}`
-    // })
 
   }
 
   removeEvents() {
-    deviceMotionSubs.off(this.orientationHandler)
   }
 
-  orientationHandler(event) {
-    var alpha = event.alpha
-    var beta = event.beta
-    var gamma = event.gamma
-
-    this.alphaText.text = `alpha: ${event.alpha.toFixed(2)}`
-    this.betaText.text = `beta: ${event.beta.toFixed(2)}`
-    this.gammaText.text = `gamma: ${event.gamma.toFixed(2)}`
-  }
 }
 
 
+var posList = [
+  {
+    x: 0, y: layers.stageHeight + layers.stageOffsetY
+  },
+  {
+    x: layers.stageWidth + layers.stageOffsetX,
+    y: 0
+  },
+  {
+    x: layers.stageWidth + layers.stageOffsetX,
+    y: layers.stageHeight + layers.stageOffsetY
+  }
+]
 export class GameEle extends Container {
   rorate:number // 旋转角度
   vx = GameCfg.ispeed // 当前x速度, 有初速度
@@ -160,7 +169,6 @@ export class GameEle extends Container {
 
   /**
    * 是否固定在页面上
-   * @param fixedCenter 
    * @param cb 正中心的回调函数
    */
   constructor(textureName: string ,fixedCenter: pos, cb?: Function) {
@@ -174,8 +182,10 @@ export class GameEle extends Container {
   initUi(tn: string) {
     if (tn) {
       this.sprite = UI.Sp(this, tn)
-      this.sprite.scaleX = 0.5
-      this.sprite.scaleY = 0.5
+      var pos = posList[Math.floor(Math.random() * 3)]
+      this.position.set(pos.x, pos.y)
+      // this.sprite.scaleX = 0.5
+      // this.sprite.scaleY = 0.5
       this.sprite.anchorTexture.set(0.5, 0.5)
     } else {
       throw new Error('GameEle need a sprite')
@@ -188,6 +198,15 @@ export class GameEle extends Container {
 
   }
 
+  resetInit(tName: string) {
+    this.sprite.texture = RES.getRes(tName)
+    var pos = posList[Math.floor(Math.random() * 3)]
+    this.position.set(pos.x, pos.y)
+
+    var rotation = Math.floor(Math.random() * 361)
+    this.k = (rotation + 360) / (pos2Len(this.fixedCenter, this) - GameCfg.rc)
+  }
+
   initEvents() {
     deviceMotionSubs.notify(this.orientationChange, this)
   }
@@ -197,7 +216,6 @@ export class GameEle extends Container {
   }
 
   destroy() {
-    deviceMotionSubs.removeEvents()
     this.removeEvents()
     super.destroy()
   }
@@ -255,8 +273,7 @@ export class GameEle extends Container {
     //   this.vy =0
     // }
 
-    // vtodo 游戏大小 先设置100
-    var sw = this.sprite.width / 2
+    var sw = this.sprite.width / 4
     if (this.x > layers.stageWidth + layers.stageOffsetX - sw) {
       this.x = layers.stageWidth + layers.stageOffsetX - sw
       this.vx = 0
@@ -265,7 +282,7 @@ export class GameEle extends Container {
       this.vx = 0
     }
 
-    var sh = this.sprite.height / 2
+    var sh = this.sprite.height / 4
     if (this.y > layers.stageHeight + layers.stageOffsetY - sh) {
       this.y = layers.stageHeight + layers.stageOffsetY - sh
       this.vy = 0

src/scenes/GameScene/MotionInit.ts

+import { RES } from "../../../module/RES"
 import { layers } from "../../../module/views/layers"
 import { Scene } from "../../../module/views/Scene"
+import CircleProgressBar from "../../common/CircleProgressBar"
 import { ProgressBar } from "../../common/ProgressBar"
 import { GDispatcher } from "../../Main"
+import { Tools } from "../../Tools"
 import UI from "../../UI"
+import { setCenterPos } from "../NewGuyScene/NewGuyScene"
 import deviceMotionSubs from "./DeviceMotion"
 import { GameCfg } from "./GameConfig"
 const Container = FYGE.Container
@@ -102,15 +106,39 @@ export class MotionInitFunc extends Container {
 
 export class MotionInitScene extends Scene {
   motionInitFunc: MotionInitFunc // 端平action类
+  holdOnTxt: FYGE.TextField // 保持住文案
 
   constructor(...args) {
     super(...args)
     this._initEvents()
   }
 
+  bitmapTextCount: FYGE.BitmapText
+  centerp: FYGE.Sprite // 中心校准点
+
   initUi() {
+    // 中间的小圆
+    var c = this.addChild(new FYGE.Shape())
+      .beginFill(0xf0e4ce)
+      .arc(layers.stageCenterX, layers.stageCenterY, 240, 0, 2*Math.PI)
+      .endFill()
+
+    this.centerp = setCenterPos(UI.Sp(this, 'p1-b.png'))
+    
+    var bitMapc = Tools.getNumTextures('num')
+    bitMapc['%'] = RES.getRes('nump.png')
+    this.bitmapTextCount = this.addChild(new FYGE.BitmapText(bitMapc))
+    this.bitmapTextCount.position.set(layers.stageCenterX, layers.stageCenterY + 380)
+
+    
+    this.holdOnTxt = UI.Txt(this, '保持住！', 50, '#111111', FYGE.TEXT_ALIGN.CENTER, layers.stageWidth, 0, layers.stageCenterY - 400, true)
+    this.holdOnTxt.visible = false
+
+    this.setChildIndex(c, 1)
+
     var cb = this.initGame.bind(this)
     this.motionInitFunc = this.addChild(new MotionInitFunc(cb))
+
     super.initUi()
   }
 
@@ -138,23 +166,39 @@ export class MotionInitScene extends Scene {
 
   }
 
-  focusProgress: ProgressBar
+  focusProgress: CircleProgressBar
   addTimeCountDown = debounce((e) => {
     this.shoot()
-    this.focusProgress = this.addChild(new ProgressBar(0xff200d, {
-      valueDesc: '保存进度',
-      valueColor: '#000000',
-      type: 'fill',
-      typeColor: 0x111111
+    // this.focusProgress = this.addChild(new ProgressBar(0xff200d, {
+    //   valueDesc: '保存进度',
+    //   valueColor: '#000000',
+    //   type: 'fill',
+    //   typeColor: 0x111111
+    // }))
+    this.focusProgress = this.addChild(new CircleProgressBar({
+      x: layers.stageCenterX,
+      y: layers.stageCenterY, // vtodo 这里后面可能会调试
+      radius: 260,
+      lineWidth: 15,
+      value: 0
     }))
-    this.focusProgress.position.set(177, layers.stageCenterY + 400)
-    FYGE.Tween.get(this.focusProgress)
+
+    FYGE.Tween.get(this.holdOnTxt)
+      .set({visible: true, alpha: 0.4})
+      .to({alpha: 1}, 600)
+
+    FYGE.Tween.get(this.focusProgress,{
+      onChange: () => {
+        this.bitmapTextCount.text = ((this.focusProgress.value * 100) >> 0) + "%"
+      }
+    })
       .to({value: 1}, 3000)
       .call(() => {
         console.log('%c 成功套种', 'color: green')
         typeof e.data == 'function' && e.data()
         this.removeTimeCountDown()
       })
+    
   }, 400)
 
   removeTimeCountDown() {
@@ -162,7 +206,12 @@ export class MotionInitScene extends Scene {
       this.unshoot()
       FYGE.Tween.removeTweens(this.focusProgress)
       this.removeChild(this.focusProgress)
+      this.bitmapTextCount.text = ''
     }
+
+    FYGE.Tween.removeTweens(this.holdOnTxt)
+    this.holdOnTxt.visible = false
+
     // @ts-ignore
     clearTimeout(this.addTimeCountDown.timer.curr)
   }

src/scenes/NewGuyScene/NewGuyScene.ts

@@ -3,14 +3,15 @@ import { layers } from "../../../module/views/layers"
 import { GameEle, GameScene } from "../GameScene/GameScene"
 import { MotionInitScene } from '../GameScene/MotionInit';
 import UI from '../../UI';
+import { RES } from '../../../module/RES';
 
 export function setCenterPos(cont: FYGE.Sprite) {
   cont.anchorTexture.set(0.5, 0.5)
   // vtodo 先这里设置一般大
-  cont.scaleX = 0.5
-  cont.scaleY = 0.5
-  cont.x = layers.stageOffsetX + layers.stageWidth / 2
-  cont.y = layers.stageOffsetY + layers.stageHeight / 2
+  // cont.scaleX = 0.5
+  // cont.scaleY = 0.5
+  cont.x = layers.stageCenterX
+  cont.y = layers.stageCenterY
   return cont
 }
 
@@ -24,12 +25,9 @@ export class NewGuyScene extends MotionInitScene {
     super()
   }
 
-  centerp: FYGE.Sprite
-  initUi() {
+  async initUi() {
+    UI.Sp(this, 'back.png')
 
-    var centerp = this.centerp = setCenterPos(UI.Sp(this, 'p1-b.png'))
-
-    this.setChildIndex(centerp, -1)
     super.initUi()
     
   }
@@ -39,7 +37,7 @@ export class NewGuyScene extends MotionInitScene {
     this.g1 = UI.Sp(this, 'guidance-t1.png', layers.stageCenterX, layers.stageCenterY + 400)
     this.g1.anchorTexture.set(0.5, 0.5)
 
-    var e = this.addChild(new GameEle('p1-b.png', this.centerp, () => {
+    var e = this.addChild(new GameEle('p1.png', this.centerp, () => {
       changeScene(GameScene)
     }))
   }