feats

src/components/BackPage.vue

@@ -4,18 +4,24 @@
     <!-- :style="HomeStyle" -->
     <div class="index-image">
       <img :src="backHome" class="bg-image" />
+      <CloudVue />
       <slot></slot>
-      <div class="GrassGIFBox">
+      <!-- <div class="GrassGIFBox">
         <GrassGIF />
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
 
 <script >
-import backHome from '../assets/BackImage/backHome.jpg'
+import backHome from '@/assets/BackImage/backHome.jpg'
+import CloudVue from '@/components/Cloud.vue'
+
 export default {
   name: 'BackPage',
+  components: {
+    CloudVue,
+  },
   setup() {
     return {
       backHome
@@ -32,10 +38,13 @@ export default {
   .bg-image {
     width: 100vw;
   }
+}
+</style>
+
+<style lang="less">
   .GrassGIFBox {
     position: absolute;
     bottom: 0vh;
     z-index: 0;
   }
-}
-</style>
+</style>

src/components/Cloud.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="motion-cloud">
+    <img :src="cloudImage" alt="">
+  </div>
+</template>
+
+<script setup>
+import cloudImage from '@/assets/BackImage/cloud.png'
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  console.log('---------onMounted-----')
+})
+</script>
+
+<style lang="less" scoped>
+.motion-cloud {
+  width: 160px;
+  animation: fadefloat 120s linear infinite;
+  animation-fill-mode: forwards;
+  
+
+  & > img {
+    width: 100%;
+  }
+
+  @keyframes fadefloat {
+    0%, 100% { opacity: 0; }
+    5%, 90% { opacity: 1; }
+  }
+
+  @keyframes flyfloat {
+    from { transform: translateX(100%) translateZ(0); }
+    to { transform: translateX(-15%) translateZ(0); }
+  }
+}
+</style>

src/components/RightGrass.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="left-grass">
+    
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+.left-grass {
+  width: 25vw;
+  height: 28vw;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+</style>

src/pages/game/algorithm/background.js

@@ -0,0 +1,11 @@
+import { designWidth, designHeight, scale } from './design';
+import backImage from '@/assets/BackImage/framebg.jpg'
+
+export function drawBg ({ two, center }) {
+  const bgTexture = two.makeTexture(backImage);
+
+  const bgBox = two.makeRectangle(center.x, center.y, designWidth, designHeight);
+  bgBox.noStroke();
+  bgBox.fill = bgTexture;
+  bgBox.scale = scale;
+}

src/pages/game/algorithm/bullet.js

@@ -0,0 +1,80 @@
+import Two from "two.js";
+import { scale, desginCageRadius, pedestalOffsetX, pedestalOffsetY, cageNum } from './design'
+import bulletImage from '@/assets/RoundaboutImage/2-13.png';
+
+// 子弹的核心逻辑
+export default ({two, center, speed}) => {
+  const _event = new Two.Events()
+
+  // 子弹个数 = 轿厢个数
+  const num = cageNum;
+  // 子弹宽度 = 轿厢宽度
+  const bulletRadius = desginCageRadius;
+
+  // 子弹其实位置与底座是一致的
+  const x = center.x + pedestalOffsetX * scale;
+  const y = center.y + pedestalOffsetY * scale;
+
+  // 弹夹
+  let clip = [];
+  // 在膛子弹
+  let current = null;
+  
+  // 绘制子弹
+  function drawBullets () {
+    const bulletTexture = two.makeTexture(bulletImage);
+  
+    const list = Array(num).fill().map((_, inx) => {
+      const arc = two.makeCircle(x, y, bulletRadius)
+      arc.id = `bullet-${inx}`
+      // arc.fill = 'black'
+      arc.fill = bulletTexture
+      arc.noStroke()
+      arc.scale = scale;
+      arc.visible = false; // 默认不显示, 即不上膛
+  
+      return arc
+    })
+
+    return list;
+  }
+
+  // 子弹上膛
+  function bulletLoad() {
+    current = clip.shift()
+    if (current) {
+      current.visible = true
+    }
+  }
+  
+  // 子弹飞行
+  function fly() {
+    if (!current) return;
+    const { top, height } = current.getBoundingClientRect()
+    current.position = new Two.Vector(current.position.x, current.position.y + speed)
+
+    // 子弹飞行事件
+    _event.dispatchEvent('shooting', { 
+      bullet: current,
+      cancel: () => {
+        two.removeEventListener('update', fly);
+        _event.dispatchEvent('afterShoot');
+      },
+     })
+  }
+
+  // 射击
+  function shoot() {
+    _event.dispatchEvent('beforeShoot')
+    two.addEventListener('update', fly)
+  }
+
+  // 弹夹
+  clip = drawBullets()
+  
+  return {
+    on: _event.on.bind(_event),
+    bulletLoad,
+    shoot,
+  }
+}

src/pages/game/algorithm/cage.js

@@ -0,0 +1,100 @@
+// 辅助逻辑的颜色,
+const colorList = ['#f5222d', '#d4380d', '#d46b08', '#d48806', '#d4b106', '#7cb305', '#389e0d', '#08979c', '#096dd9', '#531dab']
+import { desginRadius, desginCageRadius, cageNum, scale, primaryColor } from './design';
+
+// 绘制目标轿厢
+export function drawTargeCages({ two, center }) {
+  // 摩天轮半径
+  const wheelRaduis = desginRadius * scale;
+  const perAngle = Math.PI / cageNum // 2 * Math.PI / ( cageNum * 2 ) 分成 轿厢 * 2 的分数, 最终效果是每隔一个空白，一个轿厢
+  const offsetAngle = perAngle / 2;
+  // 轿厢半径
+  const cageRadius = desginCageRadius * scale;
+  
+  // 绘制
+  const list = Array(cageNum).fill().map((_, inx) => {
+    const startAngle = 2 * inx * perAngle - offsetAngle; // 实际效果图是圆形有固定大小的, 不能直接从 0° 开始, 需要从 0 - offset 开始
+    // const endAngle = startAngle + perAngle
+
+    // 1、计算扇形边上的中心坐标
+    const cx = center.x + Math.cos(startAngle + perAngle / 2) * wheelRaduis
+    const cy = center.y + Math.sin(startAngle + perAngle / 2) * wheelRaduis
+
+    // 2、轿厢
+    const rect = two.makeCircle(cx, cy, cageRadius);
+    rect.id = `mnt-${inx}`
+    // rect.fill = colorList[inx] // 取消这个注释, 有助于梳理逻辑
+    rect.noFill()
+    rect.stroke = primaryColor
+    rect.linewidth = 2
+    rect.dashes = [4]
+    rect.__$angle = startAngle;  // 轿厢的初始弧度
+    rect.__$mnt = null; // 当前实体轿厢 也就是已经被击中的轿厢
+
+    return rect
+  })
+
+  // 是否击中
+  const checkHit = (bullet) => {
+    // next 是否继续下一轮验证
+    // error 是否发生了错误
+    let res = { next: true, error: false }
+
+    // 可接受校验偏差范围
+    const offset = cageRadius / 3;
+    
+    const rect2 = bullet.getBoundingClientRect();
+    const x = rect2.left + rect2.width / 2
+    const y = rect2.top + rect2.height / 2
+
+    // 如果子弹 y 坐标超过警戒线
+    if (y < (center.y + wheelRaduis + offset)) {
+      res.next = false;
+      res.error = true;
+      return res;
+    }
+
+    // 遍历所有目标轿厢, 看看是否在轿厢的一定范围内
+    const cage = list.filter((it) => {
+      const rect = it.getBoundingClientRect();
+
+      const left = rect.left + offset
+      const right = rect.right - offset
+      const top = rect.top + offset
+      const bottom = rect.bottom - offset
+
+      // 如果当前子弹的中心点位于目标轿厢矩形范围内
+      // 则代表击中
+      return x >= left && x <= right &&
+        y >= top && y <= bottom;
+    })[0]
+
+    // 未找到对应的目标轿厢
+    if (!cage) {
+      res.next = true;
+      res.error = false;
+      return res;
+    };
+    
+    // 如果目标轿厢已经挂载了一个
+    if (cage.__$mnt) {
+      res.next = false;
+      res.error = true;
+      return res;
+    }
+
+    // 否则挂载到当前轿厢
+    cage.__$mnt = bullet;
+    bullet.position = cage.position;
+
+    res.next = false;
+    res.error = false;
+    return res;
+  }
+
+  return {
+    list,
+    cageRadius,
+    checkHit,
+  }
+}

src/pages/game/algorithm/counter.js

@@ -0,0 +1,21 @@
+import { designCounterWidth, designCounterHeight, counterOffsetX, counterOffsetY, cageNum, scale, primaryColor } from './design'
+import countImage from '@/assets/RoundaboutImage/计数.png'
+
+// 剩余子弹计数器
+export function drawCounter({ two, center }) {
+  // 子弹个数 = 轿厢个数
+  const num = cageNum;
+
+  const x = center.x + counterOffsetX * scale;
+  const y = center.y + counterOffsetY * scale;
+
+  const counterTexture = two.makeTexture(countImage);
+  const counterBox = two.makeRectangle(x, y, designCounterWidth, designCounterHeight);
+  counterBox.noStroke();
+  counterBox.fill = counterTexture;
+  counterBox.scale = scale;
+  // 初始值是弹夹中子弹数量
+  const counter = two.makeText(num, x, y, { fill: primaryColor, weight: 700 })
+
+  return counter
+}

src/pages/game/algorithm/design.js

@@ -0,0 +1,27 @@
+// 圆心特指大转盘的圆心
+export const designWidth = 640; // 设计稿宽度
+export const designHeight = 1234;
+
+export const desginRadius = 247.5; // 设计稿轮盘半径
+
+export const desginLightRadius = 289; // 设计稿光效半径
+
+export const cageNum = 8; // 目标轿厢个数
+export const desginCageRadius = 51; // 设计稿轿厢半径
+
+export const designCounterWidth = 160;  // 设计稿子弹计数器半径
+export const designCounterHeight = 49;
+export const counterOffsetX = 224; // 距离圆心的横向距离
+export const counterOffsetY = 424; // 距离圆心的横向距离
+
+export const designPedestalWidth = 224; // 设计稿底座宽度
+export const designPedestalHeight = 153; // 设计稿底座宽度
+export const pedestalOffsetX = 0; // 距离圆心的横向距离
+export const pedestalOffsetY = 424; // 距离圆心的横向距离
+
+
+
+// 缩放比
+export const scale = window.screen.width / designWidth;
+// 设计稿主题色
+export const primaryColor = '#F19805';

src/pages/game/algorithm/effect.js

@@ -0,0 +1,37 @@
+import { desginLightRadius, scale } from './design'
+import lightImage from '@/assets/RoundaboutImage/round.png'
+
+// 绘制光圈
+export function drawLight({ two, center }) {
+  const lightArc = two.makeCircle(center.x, center.y, desginLightRadius);
+  const lightTexture = two.makeTexture(lightImage);
+  lightArc.noStroke();
+  lightArc.fill = lightTexture;
+  lightArc.opacity = 0; // 默认不显示
+  lightArc.scale = scale;
+  
+  // 成功之后的特效
+  let shakeTimes = 0;
+  const shake = () => {
+    if (shakeTimes >= 10) {
+      return
+    }
+
+    const opStep = shakeTimes % 2 === 1 ? -0.04 : 0.04
+    lightArc.opacity += opStep;
+    if (lightArc.opacity >= 1 || lightArc.opacity <= 0) {
+      shakeTimes += 1;
+    }
+  }
+
+  return {
+    start: () => {
+      two.addEventListener('update', shake);
+    },
+    stop: () => {
+      two.removeEventListener('update', shake);
+      shakeTimes = 0;
+      lightArc.opacity = 0;
+    }
+  }
+}

src/pages/game/algorithm/index.js

@@ -0,0 +1,124 @@
+import Two from "two.js";
+import { cageNum } from './design';
+import { drawBg } from './background';
+import { drawLight } from './effect';
+import { drawWheel } from './wheel';
+import { drawTargeCages } from './cage';
+import { drawPedestal } from './pedestal';
+import drawBullets from './bullet';
+import { drawCounter } from './counter';
+
+export default ({ el, center, rotateSpeed = 0.015, speed = -5 }) => {
+    
+  // 修复一个单页面应用, 不能重复加载图片的bug
+  Two.Texture.ImageRegistry = new Two.Registry();
+
+  // 初始化
+  const two = new Two({
+    type: Two.Types.svg,
+    fullscreen: true,
+  }).appendTo(el);
+
+  // 事件发射器
+  const _evt = new Two.Events();
+
+  // 绘制背景
+  drawBg({ two, center });
+
+  // 绘制胜利光效
+  const light = drawLight({ two, center });
+  
+  // 目标轿厢
+  const cages = drawTargeCages({ two, center })
+
+  // 绘制摩天轮
+  const wheel = drawWheel({ two, center, rotateSpeed, cages: cages.list });
+  
+  // 绘制底座
+  const pedestal = drawPedestal({ two, center })
+
+  // 绘制子弹计数器, 224 是设计稿上底座与计数器之间距离
+  const counter = drawCounter({ two, center })
+
+  // 绘制子弹
+  const clip = drawBullets({two, center, speed })
+
+  // 整体绘制结束  
+  two.update();
+
+  // 下面是业务逻辑部分
+
+  // 游戏结束
+  function gameOver(isSuccess) {
+    // 停止摩天轮旋转
+    wheel.stop();
+
+    const t = setTimeout(() => {
+      clearTimeout(t)      
+      _evt.dispatchEvent('gameOver', { isSuccess })
+    }, 0)
+  }
+
+  // 监测子弹射击
+  clip.on('beforeShoot', () => {
+    pedestal.play() // 绳子甩动效果
+  })
+  // 监测子弹停止射击
+  clip.on('afterShoot', () => {
+    pedestal.stop(); // 绳子停止甩动
+    clip.bulletLoad(); // 子弹上膛
+    counter.value -= 1; // 计数器 - 1
+  })
+  // 监测子弹停止射击
+  clip.on('shooting', ({bullet, cancel}) => {
+    const { next, error } = cages.checkHit(bullet);
+    if (next) return;
+
+    cancel(); // 子弹停止飞行
+
+    // 游戏失败
+    if (error) {
+      gameOver(false);
+      return;
+    }
+
+    // 击中轿厢
+    const isSuccess = !counter.value
+    if (isSuccess) {
+      light.start() // 启动灯光特效
+      gameOver(isSuccess)
+    } else {
+      const t = setTimeout(() => {
+        clearTimeout(t)
+        _evt.dispatchEvent('bingo', { isSuccess })
+      }, 0) 
+    }
+  })
+  
+  // 绑定 dom click 事件 触发子弹发射
+  function handleClick() {
+    clip.shoot();
+  }
+  el.addEventListener('click', handleClick);
+
+  return {
+    two,
+    raduis: wheel.raduis,
+    on: _evt.on.bind(_evt),
+    play: () => {
+      clip.bulletLoad() // 先上膛一颗子弹
+      wheel.rotate();
+      two.play();
+    },
+    pause: () => {
+      wheel.stop();
+      two.pause();
+    },
+    destroy: () => {
+      two.unbind('update');
+      two.pause();
+      el.removeChild(two.renderer.domElement);
+      el.removeEventListener('click', handleClick);
+    }
+  }
+}

src/pages/game/algorithm/pedestal.js

@@ -0,0 +1,45 @@
+import Two from "two.js";
+import { designPedestalWidth, designPedestalHeight, pedestalOffsetX, pedestalOffsetY, scale } from './design'
+import pedestalImage from '@/assets/RoundaboutImage/2-14.png'
+import ropeImage1 from '@/assets/RoundaboutImage/2-15.png'
+import ropeImage2 from '@/assets/RoundaboutImage/2-16.png'
+import ropeImage3 from '@/assets/RoundaboutImage/2-17.png'
+import ropeImage4 from '@/assets/RoundaboutImage/2-18.png'
+import ropeImage5 from '@/assets/RoundaboutImage/2-19.png'
+import ropeImage6 from '@/assets/RoundaboutImage/2-20.png'
+import ropeImage7 from '@/assets/RoundaboutImage/2-21.png'
+import ropeImage8 from '@/assets/RoundaboutImage/2-22.png'
+import ropeImage9 from '@/assets/RoundaboutImage/2-23.png'
+const ropeImageList = [
+  ropeImage1,
+  ropeImage2,
+  ropeImage3,
+  ropeImage4,
+  ropeImage5,
+  ropeImage6,
+  ropeImage7,
+  ropeImage8,
+  ropeImage9,
+];
+
+// 绘制底座
+export function drawPedestal ({ two, center }) {
+  const x = center.x + pedestalOffsetX * scale;
+  const y = center.y + pedestalOffsetY * scale;
+  //
+  const pedestalTexture = two.makeTexture(pedestalImage);
+  const pedestalBox = two.makeRectangle(x, y, designPedestalWidth, designPedestalHeight);
+  pedestalBox.noStroke();
+  pedestalBox.fill = pedestalTexture;
+  pedestalBox.scale = scale;
+
+  // 绘制底座上的绳子
+  const ropeSequence = two.makeImageSequence(ropeImageList, x, y, 40); // 40 是不断调式出来的频率, 需要跟 speed 匹配
+  ropeSequence.scale = new Two.Vector(scale, scale);
+
+  return {
+    position: pedestalBox.position,
+    play: () => ropeSequence.play(),
+    stop: () => ropeSequence.stop(),
+  };
+}

src/pages/game/algorithm/wheel.js

@@ -0,0 +1,40 @@
+import Two from "two.js";
+import { scale, desginRadius } from './design'
+import wheelImage from '@/assets/RoundaboutImage/2-09.png';
+
+// 绘制摩天轮
+export function drawWheel({ two, center, rotateSpeed, cages }) {
+  const wheelArc = two.makeCircle(center.x, center.y, desginRadius);
+  const wheelTexture = two.makeTexture(wheelImage);
+  wheelArc.noStroke();
+  wheelArc.fill = wheelTexture;
+  wheelArc.scale = scale;
+
+  // 实际半径
+  const raduis = desginRadius * scale;
+  // 每个轿厢在大轮盘所在圆的弧度
+  const perAngle = Math.PI / cages.length;
+  
+  // 摩天轮与轿厢旋转
+  let rotateAngle = 0;
+  const wheelRotate = () => {
+    rotateAngle += rotateSpeed
+    wheelArc.rotation = rotateAngle
+    cages.forEach(cage => {
+      const angle = cage.__$angle + rotateAngle + perAngle / 2  // 除以2是为了视觉上轿厢与摩天轮的轴对齐
+      const cx = center.x + Math.cos(angle) * raduis
+      const cy = center.y + Math.sin(angle) * raduis
+      cage.position = new Two.Vector(cx, cy)
+      // 如果有对应的挂载物
+      if (cage.__$mnt) {
+        cage.__$mnt.position = cage.position
+      }
+    })
+  }
+
+  return {
+    raduis,
+    rotate: () => two.addEventListener('update', wheelRotate),
+    stop: () => two.removeEventListener('update', wheelRotate),
+  }
+}

src/pages/game/game.js → src/pages/game/game.js.old

@@ -352,8 +352,9 @@ export default function game ({ el, center, onError, onSuccess, onBingo }) {
 
   // 重复绘制内容
   two.bind('update', () => {
-    rotate()
     if (!isFinished) {
+      rotate()
+
       if (isShooting) {
         shooting()
       }
@@ -361,7 +362,7 @@ export default function game ({ el, center, onError, onSuccess, onBingo }) {
       successShake()
     }
   })
-
+  
   // 绑定 dom click 事件 触发子弹发射
   const handleClick = () => {
     if (!isFinished && !isShooting) {

src/pages/game/index.vue

@@ -1,20 +1,26 @@
 <template>
-  <div ref="el" />
-  <FireWorkListVue ref="firesRef" :center="center" :raduis="raduis" />
-  <MusicOnce ref="bingoRef" :src="bingoMusic" />
-  <MusicOnce ref="failRef" :src="failMusic" />
-  <MusicOnce ref="successRef" :src="successMusic" />
+  <div>
+    <div ref="el" />
+    <FireWorkListVue ref="firesRef" :center="center" :raduis="raduis" />
+    <MusicOnce ref="bingoRef" :src="bingoMusic" />
+    <MusicOnce ref="failRef" :src="failMusic" />
+    <MusicOnce ref="successRef" :src="successMusic" />
+    
+    <!-- <div class="GrassGIFBox">
+      <GrassGIF />
+    </div> -->
+  </div>
 </template>
 
 <script setup>
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import FireWorkListVue from '@/components/FireWorkList.vue'
-import game from './game.js'
+import createGame from './algorithm'
 import { gameOver, gameStart } from '@/utils/api.js'
 
 const el = ref()
-const destroyRef = ref()
+const gameRef = ref()
 const firesRef = ref()
 const router = useRouter()
 const raduis = ref(150)
@@ -27,40 +33,55 @@ const bingoRef = ref()
 const failRef = ref()
 const successRef = ref()
 
+// 游戏失败
+const handleGameOverError = () => {
+  failRef.value.play()
+  const t = setTimeout(() => {
+    localStorage.setItem('loadSign', '1')
+    router.push('/OverPage?type=lose')
+    clearTimeout(t)
+  }, 1000)
+}
+
+// 游戏通关
+const handleGameSuccess = () => {
+  gameOver()
+  successRef.value.play()
+  firesRef.value.toggle()
+  // alert('你真牛逼')
+  const t = setTimeout(() => {
+    localStorage.setItem('loadSign', '1')
+    router.push('/OverPage?type=win')
+    clearTimeout(t)
+  }, 2000)
+}
+
 const center = {
   x: document.body.offsetWidth / 2,
   y: document.body.offsetHeight / 2
 }
 
 const gameInit = () => {
-  destroyRef.value = game({
+  const game = createGame({
     el: el.value,
     center,
-    onError: () => {
-      failRef.value.play()
-      const t = setTimeout(() => {
-        localStorage.setItem('loadSign', '1')
-        router.push('/OverPage?type=lose')
-        clearTimeout(t)
-      }, 1000)
-    },
-    onSuccess: () => {
-      gameOver()
-      successRef.value.play()
-      firesRef.value.toggle()
-      // alert('你真牛逼')
-      const t = setTimeout(() => {
-        localStorage.setItem('loadSign', '1')
-        router.push('/OverPage?type=win')
-        clearTimeout(t)
-      }, 2000)
-    },
-    onBingo: () => {
-      bingoRef.value.play()
+  })
+
+  game.on('bingo', () => {
+    bingoRef.value.play()
+  })
+  game.on('gameOver', ({ isSuccess }) => {
+    if (isSuccess) {
+      handleGameSuccess()
+    } else {
+      handleGameOverError()
     }
   })
 
-  raduis.value = destroyRef.value.raduis
+  game.play()
+
+  gameRef.value = game;
+  raduis.value = game.raduis
 }
 
 onMounted(() => {
@@ -69,8 +90,8 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  if (destroyRef.value) {
-    destroyRef.value.destroy()
+  if (gameRef.value) {
+    gameRef.value.destroy()
   }
 })
 </script>

src/utils/initial.js

@@ -32,7 +32,7 @@ function initSDK (url) {
  * 分享
  * @param {*} opt
  */
-export function share (opt) {
+export function share (opt = {}) {
   const { origin, pathname } = window.location
   // const defaultLink = origin + pathname
   const defaultImg = `${origin}${pathname}img/share.jpg`
@@ -67,10 +67,7 @@ export function Login () {
     window.localStorage.setItem("token", e.token);//保存数据
 
     try {
-      share({
-        title: '为岸线圆梦，摩天轮圆满大作战！',
-        desc: '快来助力华侨城欢乐滨江摩天轮挂轿厢'
-      })
+      share()
     } catch (error) {
       console.error(error)
     }