@shijiu/jsview-vue-samples 2.3.151-test.0 → 3.0.0-test.0

package/ThrowMoveDemo/AccelerateDemo.vue

@@ -1,85 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ZhengYi
- * @LastEditTime: 2023-05-05 
- * @Description: file content
--->
-<script setup>
-import { JsvActorMoveControl, JsvActorMove } from "jsview";
-import { shallowRef, computed } from "vue"
-const props = defineProps({
-  name: String,
-})
-let direction = shallowRef(1)
-let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-let focusNode = shallowRef(null)
-
-const directionDetail = computed(() => {
-  return direction.value > 0 ? "上" : "下";
-})
-
-const onKeyDown = (ev) => {
-  if (ev.keyCode === 13) {
-    let preDirection = direction.value;
-    direction.value = -direction.value;
-    throwControl.throwAlongY(
-      0,
-      750 * preDirection,
-      {
-        type: "catch",
-        position: 200 * preDirection,
-        direction: preDirection,
-      },
-      (x, y) => {
-        console.log(`Throw end with x=${x} y=${y}`);
-      }
-    );
-    return true;
-  }
-  return false;
-}
-</script>
-
-<template>
-  <jsv-focus-block ref="focusNode" :name="props.name" autoFocus :onAction="{
-    onKeyDown: onKeyDown,
-  }">
-    <div key="sample1" class="detail-font" :style="{ top: 150, left: 425, width: 430, height: 40 }">
-      {{ `向${directionDetail}加速` }}
-    </div>
-    <div key="DirectText" class="font" :style="{ top: 250, left: 425, width: 430, height: 40 }">
-      {{ `当前方向:${directionDetail}` }}
-    </div>
-    <div :style="{ top: 590, left: 625 }">
-      <jsv-actor-move key="move" :control="moveControl">
-        <jsv-actor-move key="throw" :control="throwControl">
-          <div :style="{ backgroundColor: '#FF0000', width: 30, height: 30 }"></div>
-        </jsv-actor-move>
-      </jsv-actor-move>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.font {
-  font-size: 32;
-  color: #73665c;
-  line-height: 40;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32;
-  color: #f7f7eb;
-  line-height: 30;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-</style>

package/ThrowMoveDemo/App.vue

@@ -1,104 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:08
- * @LastEditors: ZhengYi
- * @LastEditTime: 2023-05-05 
- * @Description: file content
--->
-<script setup>
-import LRParabolicDemo from "./LRParabolicDemo.vue";
-import UDParabolicDemo from "./UDParabolicDemo.vue";
-import TargetDemo from "./TargetDemo.vue";
-import AccelerateDemo from "./AccelerateDemo.vue";
-import { shallowRef } from "vue"
-import { useRouter } from "vue-router"
-
-const router=useRouter()
-let  demoIndex=shallowRef(0)
-
-const  onKeyDown=(ev)=>{
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
-      }
-      if (ev.keyCode === 37) {
-        demoIndex.value = demoIndex.value - 1 < 0 ? 3 : demoIndex.value - 1;
-      } else if (ev.keyCode === 39) {
-        demoIndex.value = demoIndex.value + 1 > 3 ? 0 : demoIndex.value + 1;
-      }
-      return true;
-    }
-</script>
-
-<template>
-  <div
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#000000',
-    }"
-  >
-    <div
-      key="leftWall"
-      :style="{
-        top: 0,
-        left: 425,
-        width: 5,
-        height: 620,
-        backgroundColor: '#F0F000',
-      }"
-    />
-    <div
-      key="rightWall"
-      :style="{
-        top: 0,
-        left: 850,
-        width: 5,
-        height: 620,
-        backgroundColor: '#F0F000',
-      }"
-    />
-    <div
-      key="bottomWall"
-      :style="{
-        top: 620,
-        left: 425,
-        width: 430,
-        height: 5,
-        backgroundColor: '#F0F000',
-      }"
-    />
-    <div
-      key="GuidText1"
-      className="{CssStyles.FontStyle.getName()}"
-      :style="{ top: 625, left: (1280 - 430) / 2, width: 430, height: 40 }"
-    >
-      {`按OK键进行跳跃和转向`}
-    </div>
-    <div
-      key="GuidText2"
-      className="{CssStyles.FontStyle.getName()}"
-      :style="{ top: 625 + 40, left: (1280 - 430) / 2, width: 430, height: 40 }"
-    >
-      {`左右键切换不同模式的Demo`}
-    </div>
-    <jsv-focus-block
-      autoFocus
-      ref="focusNode"
-      :onAction="{
-        onKeyDown: onKeyDown,
-      }"
-    >
-      <LRParabolicDemo
-        v-if="demoIndex === 0"
-        name="/actorMove"
-      ></LRParabolicDemo>
-      <UDParabolicDemo v-if="demoIndex === 1" name="/udDemo"></UDParabolicDemo>
-      <TargetDemo v-if="demoIndex === 2" name="/targetDemo"></TargetDemo>
-      <AccelerateDemo
-        v-if="demoIndex === 3"
-        name="/accelerateDemo"
-      ></AccelerateDemo>
-    </jsv-focus-block>
-  </div>
-</template>

package/ThrowMoveDemo/LRParabolicDemo.vue

@@ -1,101 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-21 14:01:59
- * @Description: file content
--->
-<script setup>
-import { JsvActorMoveControl, JsvActorMove } from "jsview";
-import { shallowRef } from "vue";
-
-const props = defineProps({
-  name: String,
-});
-
-let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-
-let direction = shallowRef(1);
-
-function onKeyDown(ev) {
-  switch (ev.keyCode) {
-    case 13:
-      direction.value = -direction.value;
-
-      moveControl.moveToX(195 * direction.value, 250, (x, y) => {
-        console.log(`Move end with x=${x} y=${y}`);
-      });
-      throwControl.throwAlongY(
-        -500,
-        750,
-        { type: "catch", position: 0, direction: 1 },
-        (x, y) => {
-          console.log(`Throw end with x=${x} y=${y}`);
-        },
-        () => {
-          console.log("Get to the pole...");
-        }
-      );
-      return true;
-  }
-  return false;
-}
-</script>
-
-<template>
-  <jsv-focus-block
-    ref="focusNode"
-    :name="name"
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      key="sample1"
-      class="detail-font"
-      :style="{ top: 150, left: 425, width: 430, height: 40 }"
-    >
-      抛物线运动
-    </div>
-    <div
-      key="DirectText"
-      class="font"
-      :style="{ top: 250, left: 425, width: 430, height: 40 }"
-    >
-      {{ `当前方向:${direction > 0 ? "右" : "左"}` }}
-    </div>
-    <div :style="{ top: 590, left: 625 }">
-      <jsv-actor-move key="move" :control="moveControl">
-        <jsv-actor-move key="throw" :control="throwControl">
-          <div
-            :style="{ backgroundColor: '#00FF00', width: 30, height: 30 }"
-          ></div>
-        </jsv-actor-move>
-      </jsv-actor-move>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.font {
-  font-size: 32;
-  color: #73665c;
-  line-height: 40;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32;
-  color: #f7f7eb;
-  line-height: 30;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-</style>

package/ThrowMoveDemo/TargetDemo.vue

@@ -1,87 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ZhengYi
- * @LastEditTime: 2023-05-05
- * @Description: file content
--->
-<script setup>
-import { JsvActorMoveControl, JsvActorMove } from "jsview";
-import { shallowRef } from "vue";
-
-const props = defineProps({
-  name: String,
-})
-let direction = shallowRef(1)
-let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-let focusNode=shallowRef(null)
-
-const  onKeyDown=(ev)=>{
-      if (ev.keyCode === 13) {
-        let preDirection = direction.value;
-        direction.value = -direction.value;
-        moveControl.moveToX(195 * direction.value, 250, (x, y) => {
-          console.log(`Move end with x=${x} y=${y}`);
-        });
-        const position = (-100 * preDirection) / 2;
-        throwControl.throwAlongY(
-          -500 * preDirection,
-          750 * preDirection,
-          {
-            type: "catch",
-            position,
-            direction: -1 * preDirection,
-          },
-          (x, y) => {
-            console.log(`Throw end with x=${x} y=${y}`);
-          }
-        );
-        return true;
-      }
-      return false;
-    }
-
-</script>
-
-<template>
-  <jsv-focus-block ref="focusNode" :name="props.name" autoFocus :onAction="{
-    onKeyDown: onKeyDown,
-  }">
-    <div key="sample1" class="detail-font" :style="{ top: 150, left: 425, width: 430, height: 40 }">
-      拐点前触碰目标点
-    </div>
-    <div key="DirectText" class="font" :style="{ top: 250, left: 425, width: 430, height: 40 }">
-      {{ `当前方向:${direction > 0 ? "右" : "左"}` }}
-    </div>
-    <div :style="{ top: 590, left: 625 }">
-      <jsv-actor-move key="move" :control="moveControl">
-        <jsv-actor-move key="throw" :control="throwControl">
-          <div :style="{ backgroundColor: '#0916ff', width: 30, height: 30 }"></div>
-        </jsv-actor-move>
-      </jsv-actor-move>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.font {
-  font-size: 32;
-  color: #73665c;
-  line-height: 40;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32;
-  color: #f7f7eb;
-  line-height: 30;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-</style>

package/ThrowMoveDemo/UDParabolicDemo.vue

@@ -1,92 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-20 18:27:25
- * @LastEditors: ZhengYi
- * @LastEditTime: 2023-05-05 
- * @Description: file content
--->
-<script setup>
-import { JsvActorMoveControl, JsvActorMove } from "jsview";
-import { shallowRef, computed } from "vue";
-
-let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
-let focusNode=shallowRef(null)
-
-const props = defineProps({
-  name: String,
-})
-let direction = shallowRef(1)
-
-const directionDetail = computed(() => {
-  return direction.value < 0 ? "上" : "下";
-})
-const detail = computed(() => {
-  return direction.value < 0 ? "向上抛物" : "向下掷物并弹起";
-})
-
-const  onKeyDown=(ev)=>{
-      let preDirection = direction.value;
-      switch (ev.keyCode) {
-        case 13:
-          direction.value = -direction.value;
-          throwControl.throwAlongY(
-            -400 * preDirection,
-            550 * preDirection,
-            {
-              type: "catch",
-              position: 100 * preDirection,
-              direction: preDirection,
-            },
-            (x, y) => {
-              console.log(`Throw end with x=${x} y=${y}`);
-            }
-          );
-          return true;
-      }
-      return false;
-    }
-
-</script>
-
-<template>
-  <jsv-focus-block ref="focusNode" :name="props.name" autoFocus :onAction="{
-    onKeyDown: onKeyDown,
-  }">
-    <div key="sample1" class="detail-font" :style="{ top: 150, left: 425, width: 430, height: 40 }">
-      {{ detail }}
-    </div>
-    <div key="DirectText" class="font" :style="{ top: 250, left: 425, width: 430, height: 40 }">
-      {{ `当前方向:${directionDetail}` }}
-    </div>
-    <div :style="{ top: 590, left: 625 }">
-      <jsv-actor-move key="move" :control="moveControl">
-        <jsv-actor-move key="throw" :control="throwControl">
-          <div :style="{ backgroundColor: '#ffb915', width: 30, height: 30 }"></div>
-        </jsv-actor-move>
-      </jsv-actor-move>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.font {
-  font-size: 32;
-  color: #73665c;
-  line-height: 40;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.detail-font {
-  font-size: 32;
-  color: #f7f7eb;
-  line-height: 30;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-</style>