Merge branch

src/App.vue

@@ -1,56 +1,7 @@
 <template>
-  <div>
-    <router-view />
-  </div>
-  <!-- <div ref="el"></div> -->
-  <!-- <FireWorkListVue :center="center" :raduis="raduis" ref="firesRef" /> -->
+  <router-view />
 </template>
 
-<script setup>
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import Two from 'two.js'
-import FireWorkListVue from './components/FireWorkList.vue'
-import homePage from './homePage.vue'
-import game from './game'
-
-const el = ref()
-const destroyRef = ref()
-const firesRef = ref()
-
-const raduis = 150
-const center = {
-  x: document.body.offsetWidth / 2,
-  y: document.body.offsetHeight / 2
-}
-
-const gameInit = () => {
-  destroyRef.value = game({
-    el: el.value,
-    center,
-    raduis,
-    onError: () => {
-      alert('oo ~')
-    },
-    onSuccess: () => {
-      alert('你真牛逼')
-    },
-    onBingo: () => {
-      firesRef.value.toggle()
-    }
-  })
-}
-
-onMounted(() => {
-  // gameInit()
-})
-
-onBeforeUnmount(() => {
-  if (destroyRef.value) {
-    destroyRef.value()
-  }
-})
-</script>
-
 <style>
 html,
 body,

src/Game.vue

@@ -0,0 +1,58 @@
+<template>
+  <div ref="el"></div>
+  <FireWorkListVue :center="center" :raduis="raduis" ref="firesRef" />
+</template>
+
+<script setup>
+  import { onBeforeUnmount, onMounted, ref } from 'vue';
+  import Two from "two.js";
+  import FireWorkListVue from './components/FireWorkList.vue';
+  import game from "./game";
+
+  const el = ref()
+  const destroyRef = ref()
+  const firesRef = ref()
+
+  const raduis = 145
+  const center = {
+        x: document.body.offsetWidth / 2,
+        y: document.body.offsetHeight / 2,
+      }
+
+
+  const gameInit = () => {
+    destroyRef.value = game({
+      el: el.value,
+      center,
+      raduis,
+      onError: () => {
+        alert('oo ~')
+      },
+      onSuccess: () => {
+        alert('你真牛逼')
+      },
+      onBingo: () => {
+        firesRef.value.toggle()
+      }
+    })
+  }
+
+  onMounted(() => {
+    gameInit()
+  })
+
+  onBeforeUnmount(() => {
+    if (destroyRef.value) {
+      destroyRef.value();
+    }
+  })
+
+</script>
+
+<style>
+html, body, #app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+</style>

src/game.js

@@ -2,7 +2,40 @@ import Two from "two.js";
 
 const colorList = ['#f5222d', '#d4380d', '#d46b08', '#d48806', '#d4b106', '#7cb305', '#389e0d', '#08979c', '#096dd9', '#531dab']
 
-export default function game({ el, center, raduis, onError, onSuccess, onBingo }) {
+import backImage from './assets/BackImage/framebg.jpg'
+import wheelImage from './assets/RoundaboutImage/2-09.png';
+import cageImage from './assets/RoundaboutImage/2-13.png';
+import pedestalImage from './assets/RoundaboutImage/2-14.png'
+import countImage from './assets/RoundaboutImage/计数.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 designWidth = 640; // 设计稿宽度
+const desginRadius = 246; // 设计稿轮盘半径
+const pedestalDistance = 424; // 底座与轮盘圆心距离
+const primaryColor = '#F19805';  // 设计稿主题色
+
+const scale = window.screen.width / designWidth;
+const ropeImageList = [
+  ropeImage1,
+  ropeImage2,
+  ropeImage3,
+  ropeImage4,
+  ropeImage5,
+  ropeImage6,
+  ropeImage7,
+  ropeImage8,
+  ropeImage9,
+];
+
+export default function game({ el, center, onError, onSuccess, onBingo }) {
 
   // 是否游戏结束
   let isFinished = false;
@@ -11,11 +44,16 @@ export default function game({ el, center, raduis, onError, onSuccess, onBingo }
   // eslint-disable-next-line no-unused-vars
   let isError = false;
 
-  // 每个区域的旋转角度, 10 个轿厢, 分 20 等份
-  const perAngle = 2 * Math.PI / 20 // 分20等份
+  // 每个区域的旋转角度, 8 个轿厢, 分 16 等份
+  const cageNum = 8;
+  const perAngle = Math.PI / cageNum // 2 * Math.PI / ( cageNum * 2 ) 分成 轿厢 * 2 的分数, 最终效果是每隔一个，显示一个轿厢
+  const offsetAngle = perAngle / 2
 
   // 大转盘半径
-  // const raduis = 150;
+  const raduis = desginRadius * scale;
+
+  // 轿厢宽度 = 大轮盘的周长 / 间隔份数
+  const cageRadius = Math.PI * 2 * raduis / (cageNum * 2)
 
   // 转盘中心坐标
   // const center;
@@ -27,7 +65,7 @@ export default function game({ el, center, raduis, onError, onSuccess, onBingo }
   let isShooting = false
   
   // 子弹飞行速度, 因为是向上飞, y 值是不端减小的过程
-  const speed = -0.01;
+  const speed = -5;
 
   // 目标轿厢列表, 该列表主要用来判断子弹是否击中目标
   const cageList = [];
@@ -47,17 +85,30 @@ export default function game({ el, center, raduis, onError, onSuccess, onBingo }
     autostart: true
   }).appendTo(el);
 
+  // 绘制背景
+  makeBg({two, center});
+  
   // 绘制转盘
+  const wheelArc = two.makeCircle(center.x, center.y, 0);
   const drawRoundAbout = () => {
     const { x, y } = center
 
-    // 绘制扇形区域
-    // 该区域对游戏实际上没有用, 主要是梳理逻辑
-    const arcList = Array(10).fill().map((_, inx) => {
-      const startAngle = 2 * inx * perAngle
+    // 绘制图片转盘
+    const wheelTexture = two.makeTexture(wheelImage);
+    wheelArc.noStroke();
+    wheelArc.fill = wheelTexture;
+    wheelTexture.bind('load', () => {
+      wheelArc.radius = wheelTexture.image.naturalWidth / 2;
+      wheelArc.scale = scale;
+    })
+
+    // 绘制辅助扇形区域
+    const arcList = Array(cageNum).fill().map((_, inx) => {
+      const startAngle = 2 * inx * perAngle - offsetAngle; // 实际效果图是圆形有固定大小的, 不能直接从 0° 开始, 需要从 0 - offset 开始
       const endAngle = startAngle + perAngle
       const arc = two.makeArcSegment(x, y, 0, raduis, startAngle, endAngle)
-      arc.fill = colorList[inx]
+      // arc.fill = colorList[inx] // 取消这个注释, 有助于梳理逻辑
+      arc.noFill()
       arc.noStroke()
 
       // 绘制目标轿厢
@@ -65,12 +116,14 @@ export default function game({ el, center, raduis, onError, onSuccess, onBingo }
       const cx = x + Math.cos(startAngle + perAngle / 2) * raduis
       const cy = y + Math.sin(startAngle + perAngle / 2) * raduis
 
-      // 2、轿厢的宽度, 等于圆周长的 1/20
-      const w = Math.PI * 2 * raduis / 20 // 周长 / 20
-      const rect = two.makeRectangle(cx, cy, w, w);
+      // 2、轿厢
+      const rect = two.makeCircle(cx, cy, cageRadius / 2);
       rect.id = `mnt-${inx}`
-      rect.fill = colorList[inx]
-      rect.noStroke()
+      // rect.fill = colorList[inx] // 取消这个注释, 有助于梳理逻辑
+      rect.noFill()
+      rect.stroke = primaryColor
+      rect.linewidth = 2
+      rect.dashes = [4]
       rect.__$angle = startAngle  // 轿厢的初始弧度
 
       cageList.push(rect)
@@ -85,6 +138,7 @@ export default function game({ el, center, raduis, onError, onSuccess, onBingo }
   // 旋转
   const rotate = () => {
     rotateAngle += rotateSpeed
+    wheelArc.rotation = rotateAngle
     roundAbout.forEach((x, inx) => {
       x.rotation = rotateAngle
             
@@ -102,25 +156,81 @@ export default function game({ el, center, raduis, onError, onSuccess, onBingo }
     })
   }
 
+  let ropeStart = null;
+  let ropeStop = null;
+
+  // 绘制底座
+  const drawPedestal = (x, y) => {
+    //
+    const pedestalTexture = two.makeTexture(pedestalImage);
+    const pedestalBox = two.makeRectangle(x, y, 0, 0);
+    pedestalBox.noStroke();
+    pedestalBox.fill = pedestalTexture;
+    pedestalTexture.bind('load', () => {
+      const { naturalWidth, naturalHeight } = pedestalTexture.image
+      pedestalBox.width = naturalWidth
+      pedestalBox.height = naturalHeight
+      pedestalBox.scale = scale
+    })
+
+    //
+    const ropeSequence = two.makeImageSequence(ropeImageList, x, y, 40); // 40 是不断调式出来的频率, 需要跟 speed 匹配
+    ropeSequence.scale = new Two.Vector(scale, scale);
+
+    ropeStart = () => ropeSequence.play();
+    ropeStop = () => ropeSequence.stop();
+
+    return pedestalBox;
+  }
+  const pedestalBox = drawPedestal(center.x, center.y + pedestalDistance * scale)
+
   // 绘制子弹
   const drawBullets = (x, y) => {
-    const w = 20, h = 20;
+    const cageTexture = two.makeTexture(cageImage);
 
-    const list = Array(10).fill().map((_, inx) => {
-      const rect = two.makeRectangle(x, y, w, h)
-      rect.id = `bullet-${inx}`
-      rect.fill = 'black'
-      rect.noStroke()
+    const list = Array(cageNum).fill().map((_, inx) => {
+      const arc = two.makeCircle(x, y, cageRadius / 2)
+      arc.id = `bullet-${inx}`
+      // arc.fill = 'black'
+      arc.fill = cageTexture
+      arc.noStroke()
+      arc.visible = inx === 0; // 第一个显示, 其余默认不显示
 
-      return rect
+      return arc
+    })
+    
+    cageTexture.bind('load', () => {
+      const r = cageTexture.image.naturalWidth / 2;
+      list.forEach(it => {
+        it.radius = r;
+        it.scale = scale;
+      });
     })
 
     bullets.push(...list)
   }
-  drawBullets(center.x, center.y + 400) // 400 是距离转盘中心的长度
-  
+  drawBullets(center.x, center.y + pedestalDistance * scale)  
   // 待发射子弹
   const clip = bullets.slice()
+  
+  // 绘制计数器
+  const drawCounter = (x, y) => {
+    const counterTexture = two.makeTexture(countImage);
+    const counterBox = two.makeRectangle(x, y, 0, 0);
+    counterBox.noStroke();
+    counterBox.fill = counterTexture;
+    counterTexture.bind('load', () => {
+      const { naturalWidth, naturalHeight } = counterTexture.image
+      counterBox.width = naturalWidth
+      counterBox.height = naturalHeight
+      counterBox.scale = scale
+    })
+    // 初始值是弹夹中子弹数量
+    const counter = two.makeText(clip.length, x, y, { fill: primaryColor, weight: 700 })
+
+    return counter
+  }
+  const counter = drawCounter(pedestalBox.position.x + (224 * scale), pedestalBox.position.y); // 224 是设计稿上底座与计数器之间距离
 
   // 挂载到轮盘
   const mountToCage = (targ, cage) => {
@@ -129,17 +239,17 @@ export default function game({ el, center, raduis, onError, onSuccess, onBingo }
     mntMap[cage.id] = targ
   }
   
-  // 当前第几个子弹
+  // 当前子弹
   let currentBullet = null;
   // 射击
   const shooting = () => {
-    isShooting = true
-    const { top } = currentBullet.getBoundingClientRect()
-    currentBullet.position = new Two.Vector(currentBullet.position.x, top + speed)
+    const { top, height } = currentBullet.getBoundingClientRect()
+    currentBullet.position = new Two.Vector(currentBullet.position.x, top + height / 2 + speed)
 
     // 是否击中
     const hitted = isHit(currentBullet)
     if (hitted === 'error') {
+      ropeStop();
       const t = setTimeout(() => {
         isError = true
         isFinished = true
@@ -152,12 +262,21 @@ export default function game({ el, center, raduis, onError, onSuccess, onBingo }
     // 击中之后, 需要挂载轿厢到对应的位置
     if (hitted) {
       mountToCage(currentBullet, hitted)
-      currentBullet = null;
+      // currentBullet = null;
+      currentBullet = clip.shift();
+      if (currentBullet) {
+        currentBullet.visible = true
+        counter.value = clip.length + 1
+      } else {
+        isFinished = true
+        counter.value = 0
+      }
+
       isShooting = false;
+      ropeStop();
 
       const t = setTimeout(() => {
-        if (!clip.length) {
-          isFinished = true
+        if (isFinished) {
           onSuccess()
         } else {
           onBingo()
@@ -197,8 +316,8 @@ export default function game({ el, center, raduis, onError, onSuccess, onBingo }
   two.bind('update', () => {
     if (!isFinished) {
       rotate()
-  
-      if (currentBullet) {
+
+      if (isShooting) {
         shooting()
       }
     }
@@ -206,16 +325,43 @@ export default function game({ el, center, raduis, onError, onSuccess, onBingo }
 
   // 绑定 dom click 事件 触发子弹发射
   el.addEventListener('click', () => {
-    if (!isFinished) {
-      if (clip.length && !isShooting) {
-        currentBullet = clip.pop()
+    if (!isFinished && !isShooting) {
+      isShooting = true
+      // 启动绳子效果
+      ropeStart()
+      if (!currentBullet) {
+        currentBullet = clip.shift()
+        currentBullet.visible = true
       }
     }
   })
 
-  return () => {
-    two.unbind('update');
-    two.pause();
-    el.removeChild(two.renderer.domElement);
+  return {
+    start: () => {
+      isFinished = false;
+    },
+    stop: () => {
+      isFinished = true;
+    },
+    destroy: () => {
+    
+      two.unbind('update');
+      two.pause();
+      el.removeChild(two.renderer.domElement);
+    }
   }
 }
+
+function makeBg({two, center}) {
+  const bgTexture = two.makeTexture(backImage);
+
+  const bgBox = two.makeRectangle(center.x, center.y, 0, 0);
+  bgBox.noStroke();
+  bgBox.fill = bgTexture;
+
+  bgTexture.bind('load', () => {
+    bgBox.width = bgTexture.image.naturalWidth;
+    bgBox.height = bgTexture.image.naturalHeight;
+    bgBox.scale = scale;
+  })
+}