@shijiu/jsview-vue-samples 2.1.367-test.0 → 2.1.428

package/CoupletsTest/App.vue

@@ -50,19 +50,19 @@
           class="text"
           :style="{ top: 40, left: 800, width: 210, height: 100 }"
         >
-          {{ "素材1" }}
+          {{ "上卷轴图片素材" }}
         </div>
         <div
           class="text"
           :style="{ top: 200, left: 800, width: 210, height: 100 }"
         >
-          {{ "素材2" }}
+          {{ "下卷轴精灵图素材" }}
         </div>
         <div
           class="text"
           :style="{ top: 440, left: 800, width: 210, height: 100 }"
         >
-          {{ "素材3" }}
+          {{ "主体图片素材" }}
         </div>
       </div>
       <!-- 鞭炮引线 第二页 -->
@@ -145,37 +145,37 @@
           class="text"
           :style="{ top: 40, left: 600, width: 210, height: 100 }"
         >
-          {{ "素材1" }}
+          {{ "火花精灵图素材" }}
         </div>
         <div
           class="text"
           :style="{ top: 240, left: 600, width: 210, height: 100 }"
         >
-          {{ "素材2" }}
+          {{ "鞭炮精灵图素材" }}
         </div>
         <div
           class="text"
           :style="{ top: 460, left: 600, width: 210, height: 100 }"
         >
-          {{ "素材3" }}
+          {{ "引线图片素材" }}
         </div>
         <div
           class="text"
           :style="{ top: 40, left: 900, width: 210, height: 100 }"
         >
-          {{ "素材4" }}
+          {{ "火花图片素材1" }}
         </div>
         <div
           class="text"
           :style="{ top: 240, left: 900, width: 210, height: 100 }"
         >
-          {{ "素材5" }}
+          {{ "火花图片素材2" }}
         </div>
         <div
           class="text"
           :style="{ top: 460, left: 900, width: 210, height: 100 }"
         >
-          {{ "素材6" }}
+          {{ "火花图片素材3" }}
         </div>
       </div>
       <div v-else>
@@ -196,27 +196,7 @@
             backgroundImage: fireworksPng,
           }"
         ></div>
-        <!-- 素材2 金币图1 -->
-        <div
-          :style="{
-            top: 340,
-            left: 670,
-            width: 50,
-            height: 50,
-            backgroundImage: GoldenCoin1,
-          }"
-        ></div>
-        <!-- 素材3 金币图2 -->
-        <div
-          :style="{
-            top: 550,
-            left: 670,
-            width: 50,
-            height: 50,
-            backgroundImage: GoldenCoin2,
-          }"
-        ></div>
-        <!-- 素材4 星星1 -->
+        <!-- 素材2 星星1 -->
         <div
           :style="{
             top: 100,
@@ -226,7 +206,7 @@
             backgroundImage: star1,
           }"
         ></div>
-        <!-- 素材5 星星2 -->
+        <!-- 素材3 星星2 -->
         <div
           :style="{
             top: 260,
@@ -236,7 +216,7 @@
             backgroundImage: star2,
           }"
         ></div>
-        <!-- 素材6 星星3 -->
+        <!-- 素材4 星星3 -->
         <div
           :style="{
             top: 420,
@@ -246,7 +226,7 @@
             backgroundImage: star3,
           }"
         ></div>
-        <!-- 素材7 星星4 -->
+        <!-- 素材5 星星4 -->
         <div
           :style="{
             top: 580,
@@ -255,49 +235,53 @@
             height: 50,
             backgroundImage: star4,
           }"
+        ></div>
+         <!-- 素材6 弹药素材-->
+         <div
+          :style="{
+            top: 360,
+            left: 680,
+            width: 50,
+            height: 50,
+            backgroundImage: ammo,
+          }"
         ></div>
         <!-- 文字说明 -->
         <div
           class="text"
           :style="{ top: 40, left: 600, width: 210, height: 100 }"
         >
-          {{ "素材1" }}
-        </div>
-        <div
-          class="text"
-          :style="{ top: 240, left: 600, width: 210, height: 100 }"
-        >
-          {{ "素材2" }}
-        </div>
-        <div
-          class="text"
-          :style="{ top: 460, left: 600, width: 210, height: 100 }"
-        >
-          {{ "素材3" }}
+          {{ "烟花精灵图素材" }}
         </div>
         <div
           class="text"
           :style="{ top: 40, left: 900, width: 210, height: 100 }"
         >
-          {{ "素材4" }}
+          {{ "火星图片素材1" }}
         </div>
         <div
           class="text"
           :style="{ top: 200, left: 900, width: 210, height: 100 }"
         >
-          {{ "素材5" }}
+          {{ "火星图片素材2" }}
         </div>
         <div
           class="text"
           :style="{ top: 360, left: 900, width: 210, height: 100 }"
         >
-          {{ "素材6" }}
+          {{ "火星图片素材3" }}
         </div>
         <div
           class="text"
           :style="{ top: 520, left: 900, width: 210, height: 100 }"
         >
-          {{ "素材7" }}
+          {{ "火星图片素材4" }}
+        </div>
+         <div
+          class="text"
+          :style="{top: 300, left: 600, width: 210, height: 100 }"
+        >
+          {{ "弹药图片素材" }}
         </div>
       </div>
       <!-- 翻页提示 -->
@@ -320,8 +304,6 @@ import scroll from "./widget/images/scroll1.png";
 import MyCouplets from "./widget/Couplets/Couplets.vue";
 import Fireworks from "./widget/Fireworks/Fireworks.vue";
 import Banger from "./widget/Banger/Banger.vue";
-import GoldenCoin1 from "./widget/images/goldencoin1.png";
-import GoldenCoin2 from "./widget/images/goldencoin2.png";
 import star1 from "./widget/images/star1.png";
 import star2 from "./widget/images/star2.png";
 import star3 from "./widget/images/star3.png";
@@ -333,6 +315,9 @@ import purpleStar from "./widget/images/purpleStar.png";
 import firecrackerPng from "./widget/Sprite/firecracker.png";
 import leadWire from "./widget/images/leadWire.png";
 import sparkPng from "./widget/Sprite/spark.png";
+
+const ammo =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star2.png";
 //页码
 let myIndex = shallowRef(1);
 

package/CoupletsTest/widget/Fireworks/Fireworks.vue

@@ -19,7 +19,7 @@
     :noNeedResource="false"
   >
     <div
-    v-show="myShow"
+      v-show="myShow"
       :style="{
         top: props.top,
         left: props.left,
@@ -49,14 +49,14 @@
     :top="props.top + 40"
     :left="props.left + 15"
     ref="actorRef"
-    :width="10"
-    :height="10"
+    :width="8"
+    :height="8"
   >
     <div
       :style="{
         width: 8,
         height: 8,
-        backgroundImage: star2,
+        backgroundImage: ammo,
       }"
     ></div>
   </jsv-free-move-actor>
@@ -64,32 +64,80 @@
   <div
     v-if="isSpray"
     :style="{
-      top: props.top - 400 + 20,
+      top: props.top - moveDistance + 20,
       left: props.left,
       width: 50,
       height: 50,
     }"
   >
     <jsv-spray
-      v-for="item in ImgData"
+      v-for="item in ImgData1"
       :pointRes="`url(${item})`"
       :sprayStyle="sprayOk"
       :ignoreClip="true"
     />
   </div>
+  <div
+    v-if="isSpray1"
+    :style="{
+      top: props.top - moveDistance + 80,
+      left: props.left - 100,
+      width: 50,
+      height: 50,
+    }"
+  >
+    <jsv-spray
+      v-for="item in ImgData2"
+      :pointRes="`url(${item})`"
+      :sprayStyle="sprayOk1"
+      :ignoreClip="true"
+    />
+  </div>
   <div
     v-if="isSpray2"
     :style="{
-      top: props.top - 400 + 20,
-      left: props.left,
+      top: props.top - moveDistance + 80,
+      left: props.left + 100,
       width: 50,
       height: 50,
     }"
   >
     <jsv-spray
-      v-for="item in ImgData"
+      v-for="item in ImgData3"
       :pointRes="`url(${item})`"
-      :sprayStyle="sprayOk"
+      :sprayStyle="sprayOk1"
+      :ignoreClip="true"
+    />
+  </div>
+  <div
+    v-if="isSpray3"
+    :style="{
+      top: props.top - moveDistance - 80,
+      left: props.left - 100,
+      width: 50,
+      height: 50,
+    }"
+  >
+    <jsv-spray
+      v-for="item in ImgData4"
+      :pointRes="`url(${item})`"
+      :sprayStyle="sprayOk1"
+      :ignoreClip="true"
+    />
+  </div>
+  <div
+    v-if="isSpray4"
+    :style="{
+      top: props.top - moveDistance - 80,
+      left: props.left + 100,
+      width: 50,
+      height: 50,
+    }"
+  >
+    <jsv-spray
+      v-for="item in ImgData5"
+      :pointRes="`url(${item})`"
+      :sprayStyle="sprayOk1"
       :ignoreClip="true"
     />
   </div>
@@ -111,42 +159,73 @@ const props = defineProps({
   left: { type: Number, require: true },
 });
 
-const star1 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star1.png";
-const star2 =
+//火花图片素材
+const group1_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/1/group1_1.png"
+const group1_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/1/group1_2.png"
+const group2_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/2/group2_1.png"
+const group2_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/2/group2_2.png"
+const group3_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/3/group3_1.png"
+const group3_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/3/group3_2.png"
+const group4_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/4/group4_1.png"
+const group4_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/4/group4_2.png"
+const group5_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/5/group5_1.png"
+const group5_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/5/group5_2.png"
+//弹药图片素材(请按需修改)
+const ammo =
   "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star2.png";
-const star3 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star3.png";
-const star4 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star4.png";
-const GoldenCoin1 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/goldencoin1.png";
-const GoldenCoin2 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/goldencoin2.png";
-
+//精灵图素材
 const fireworksPng =
   "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/fireworks.png";
 const fireworksJson =
   "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/fireworks.json";
 
+//运动距离
+let moveDistance = 260
 let sprite_info = shallowRef(null);
 let view_size = shallowRef(null);
 let isSpray = shallowRef(false);
+let isSpray1 = shallowRef(false);
 let isSpray2 = shallowRef(false);
+let isSpray3 = shallowRef(false);
+let isSpray4 = shallowRef(false);
+//集中管理
+const sprayArray = [isSpray1, isSpray2, isSpray3, isSpray4];
 let isShow = shallowRef(true);
 let actorRef = shallowRef(null);
-let myShow=shallowRef(false)
+let myShow = shallowRef(false);
 let actorControl;
+//随机顺序绽放函数
+const spray=()=> {
+  timer.id2 = setTimeout(() => {
+    let randomIndex = Math.floor(Math.random() * sprayArray.length);
+    sprayArray[randomIndex].value = true;
+    timer.id = setInterval(() => {
+      let remainingItems = sprayArray.filter((item) => !item.value);
+      if (remainingItems.length === 0) {
+        clearInterval(timer.id);
+        timer.id = -1;
+      } else {
+        randomIndex = Math.floor(Math.random() * remainingItems.length);
+        remainingItems[randomIndex].value = true;
+      }
+    }, 100);
+  }, 500);
+}
 
 //预加载
 const preload_info = [
-  buildPreloadInfo(star1),
-  buildPreloadInfo(star2),
-  buildPreloadInfo(star3),
-  buildPreloadInfo(star4),
-  buildPreloadInfo(GoldenCoin1),
-  buildPreloadInfo(GoldenCoin2),
+  buildPreloadInfo(group1_1),
+  buildPreloadInfo(group1_2),
+  buildPreloadInfo(group2_1),
+  buildPreloadInfo(group2_2),
+  buildPreloadInfo(group3_1),
+  buildPreloadInfo(group3_2),
+  buildPreloadInfo(group4_1),
+  buildPreloadInfo(group4_2),
+  buildPreloadInfo(group5_1),
+  buildPreloadInfo(group5_2),
   buildPreloadInfo(fireworksPng),
+  buildPreloadInfo(ammo),
 ];
 let readyNum = shallowRef(0);
 const loadDone = (a) => {
@@ -154,12 +233,10 @@ const loadDone = (a) => {
 };
 const preloadCallback = (config_json, resolve_set) => {
   sprite_info.value = _formatInfo(config_json);
-  console.log(sprite_info.value);
   view_size.value = {
     w: sprite_info.value.maxW,
     h: sprite_info.value.maxH,
   };
-  console.log("view_size: " + view_size.value);
   resolve_set(); // 通知loader数组设置完成
   readyNum.value++;
 };
@@ -167,30 +244,85 @@ const preloadCallback = (config_json, resolve_set) => {
 let timer = { id: -1, id2: -1 };
 //ref
 let myRef = shallowRef(null);
-const ImgData = [GoldenCoin1, GoldenCoin2, star1, star2, star3, star4];
+
 // 建议：做粒子效果的图的像素尽量不超过 40 * 40
 const sprayOk = {
   type: 0,
   particleNum: 60,
-  deltaAngle: 360,
+  deltaAngle: 180,
   deltaWidth: 20,
-  deltaHeight: 20,
+  deltaHeight: 40,
   pointSizeMin: 30,
   pointSizeMax: 50,
   speedMin: 1,
   speedMax: 7,
-  lifeMin: 1000,
-  lifeMax: 2000,
+  lifeMin: 500,
+  lifeMax: 800,
   accelerateX: 0,
   accelerateY: 0,
   addNumSpeed: 0.001,
-  enableFade: true,
+  enableFade: false,
   enableShrink: true,
 };
+const sprayOk1 = {
+  type: 0,
+  particleNum: 30,
+  deltaAngle: 180,
+  deltaWidth: 20,
+  deltaHeight: 40,
+  pointSizeMin: 30,
+  pointSizeMax: 50,
+  speedMin: 1,
+  speedMax: 7,
+  lifeMin: 1000,
+  lifeMax: 2000,
+  accelerateX: 0,
+  accelerateY: -40,
+  addNumSpeed: 0.001,
+  enableFade: false,
+  enableShrink: false,
+};
+//颜色搭配
+const group1 = [group1_1, group1_2];
+const group2 = [group2_1, group2_2];
+const group3 = [group3_1, group3_2];
+const group4 = [group4_1, group4_2];
+const group5 = [group5_1, group5_2];
+let ImgData1;
+let ImgData2;
+let ImgData3;
+let ImgData4;
+let ImgData5;
+const allGroup = [group1, group2, group3, group4, group5];
+//随机烟花颜色设定
+  const remainingGroups = [...allGroup];
+  for (let i = 1; i <= 5; i++) {
+    const randomIndex = Math.floor(Math.random() * remainingGroups.length);
+    const selectedGroup = remainingGroups[randomIndex];
+    switch(i) {
+      case 1:
+        ImgData1 = selectedGroup;
+        break;
+      case 2:
+        ImgData2 = selectedGroup;
+        break;
+      case 3:
+        ImgData3 = selectedGroup;
+        break;
+      case 4:
+        ImgData4 = selectedGroup;
+        break;
+      case 5:
+        ImgData5 = selectedGroup;
+        break;
+    }
+    
+    remainingGroups.splice(randomIndex, 1);
+  }
 
 watch(readyNum, (n, o) => {
   if (o != 2 && n == 2) {
-    myShow.value=true
+    myShow.value = true;
     timer.id2 = setTimeout(() => {
       myRef.value.start();
 
@@ -199,20 +331,18 @@ watch(readyNum, (n, o) => {
           .condition()
           .onNextTick(2)
           .then([
-            actorControl.action().setSpeed(undefined, -12),
+            actorControl.action().setSpeed(undefined, -9),
             actorControl.action(3).setAccel(undefined, 0.13),
           ]),
         actorControl
           .condition()
-          .reachPosition(undefined, -400)
+          .reachPosition(undefined, -moveDistance)
           .then([
             actorControl.action().stopMoving(),
             () => {
               isSpray.value = true;
               isShow.value = false;
-              timer.id = setTimeout(() => {
-                isSpray2.value = true;
-              }, 500);
+              spray();
             },
           ]),
       ]);
@@ -224,8 +354,6 @@ onMounted(() => {
   actorControl = actorRef.value.control;
 });
 onBeforeUnmount(() => {
-  clearTimeout(timer.id);
-  timer.id = -1;
   clearTimeout(timer.id2);
   timer.id2 = -1;
 });

package/DemoHomepage/router.js

@@ -16,6 +16,17 @@ let routeList = [
     path: '/feature/Basic',
     component: () => import('jsview-vue-samples/Basic/App.vue'),
   },
+  // {
+  //   name: '场景过渡',
+  //   path: '/feature/SceneTransition',
+  //   component: () => import('jsview-vue-samples/SceneTransition/App.vue'),
+  // },
+  {
+    name: 'FlexDemo',
+    path: '/feature/FlexDemo',
+    component: () => import('jsview-vue-samples/FlexCellDemo/App.vue')
+
+  },
   {
     name: '连接线Demo',
     path: '/feature/ConnectLine',
@@ -188,6 +199,11 @@ let routeList = [
     path: '/feature/ScaleDownNeon',
     component: () => import('jsview-vue-samples/ScaleDownNeon/App.vue'),
   },
+  {
+    name: '渐变Texture',
+    path: '/feature/GradientTexture',
+    component: () => import('jsview-vue-samples/GradientTexture/App.vue'),
+  },
   {
     name: '碰撞检测',
     path: '/Game/Collision',
@@ -282,7 +298,7 @@ let routeList = [
     name: 'latex公式',
     path: '/feature/LatexFormula',
     component: () => import('jsview-vue-samples/LatexFormula/App.vue'),
-  },{
+  }, {
     name: 'Swiper3dTest',
     path: '/Operations/Swiper3D',
     component: () => import('jsview-vue-samples/SwiperTest/App.vue'),
@@ -293,8 +309,8 @@ let routeList = [
     component: () => import('jsview-vue-samples/ProgressBar/App.vue'),
   },
   {
-    name:'春联测试',
-    path:'/Game/CoupletsTest',
+    name: '春联测试',
+    path: '/Game/CoupletsTest',
     component: () => import('jsview-vue-samples/CoupletsTest/App.vue'),
   }
 ];