@shijiu/jsview-vue-samples 2.0.1106 → 2.0.1119-next-vue.0

package/DemoHomepage/router.js

@@ -200,6 +200,11 @@ let routeList  = [
     name:'雷达图',
     path:'/Game/RadarChart',
     component:()=>import('jsview-vue-samples/JsvRadarChart/App.vue')
+  },
+  {
+    name:'跑酷游戏',
+    path:'/Game/Parkour',
+    component:()=>import('jsview-vue-samples/parkour/App.vue')
   }
 ];
 

package/ImpactStop/App.vue

@@ -244,6 +244,7 @@ onBeforeUnmount(() => {
   for (const sensor of sensorList) {
     sensor.Recycle();
   }
+  viewsAutoFroze?.Recycle();
 });
 </script>
 

package/Parkour/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <GameSence :key="SenceKey"></GameSence>
+</template>
+
+<script setup>
+import { provide, shallowRef } from 'vue';
+import GameSence from './components/GameSence.vue';
+//定义变量key，通过修改key值来进行页面重载
+let SenceKey = shallowRef(0)
+provide("SenceKey", SenceKey)
+</script>
+
+<style lang="scss" scoped></style>

package/Parkour/Common/Context.js

@@ -0,0 +1,19 @@
+/* 在此存放Demo中全局影响的变量*/
+import { shallowRef } from "vue";
+class Context {
+    constructor() {
+        this.left = shallowRef(0);
+        //各ref
+        this.TopRef1=shallowRef(null)
+        this.TopRef2=shallowRef(null)
+        this.MidRef1=shallowRef(null);
+        this.MidRef2=shallowRef(null);
+        this.BottomRef1=shallowRef(null)
+        this.BottomRef2=shallowRef(null);
+        this.ObstacleRef1=shallowRef(null)
+        this.ObstacleRef2=shallowRef(null)
+    }
+}
+export {
+    Context
+}

package/Parkour/Common/MatchmanInfo.js

@@ -0,0 +1,62 @@
+/* 此js文件用于更新火柴人的动作 */
+import fail_json from "../assets/role_skin1/fail.json"
+import fail_png from "../assets/role_skin1/fail.png"
+import roll_json from "../assets/role_skin1/roll.json"
+import roll_png from "../assets/role_skin1/roll.png"
+import jumpDown_json from "../assets/role_skin1/jump_down.json"
+import jumpDown_png from "../assets/role_skin1/jump_down.png"
+import jumpUp_json from "../assets/role_skin1/jump_up.json"
+import jumpUp_png from "../assets/role_skin1/jump_up.png"
+import run_json from "../assets/role_skin1/run.json"
+import run_png from "../assets/role_skin1/run.png"
+
+//精灵图信息函数
+const _formatInfo = (action_json) => {
+    const info = {
+      frames: [],
+      meta: {
+        size: action_json.meta.size,
+      },
+    };
+    let frames_ref = info.frames;
+    let max_width = 0;
+    let max_height = 0;
+  
+    for (let i = 0; i < action_json.frames.length; i++) {
+      const target = action_json.frames[i].spriteSourceSize;
+      frames_ref.push({
+        target,
+        source: action_json.frames[i].frame,
+      });
+      const sprite_with = target.x + target.w;
+      const sprite_height = target.y + target.h;
+      if (sprite_with > max_width) {
+        max_width = sprite_with;
+      }
+      if (sprite_height > max_height) {
+        max_height = sprite_height;
+      }
+    }
+    return { info, maxW: max_width, maxH: max_height };
+  }
+
+//存入整个json对象
+const jsonObject={
+    fail_json,
+    roll_json,
+    jumpDown_json,
+    jumpUp_json,
+    run_json
+}
+const pngObject={
+    fail_png,
+    roll_png,
+    jumpDown_png,
+    jumpUp_png,
+    run_png
+}
+export {
+    _formatInfo,
+    jsonObject,
+    pngObject,
+}

package/Parkour/Common/Random.js

@@ -0,0 +1,61 @@
+/* 此js文件用于初始化以及更新随机背景图和地板 */
+import bg1 from "../assets/Bgimages/bg1.png"
+import bg2 from "../assets/Bgimages/bg2.png"
+import bg3 from "../assets/Bgimages/bg3.png"
+import bg4 from "../assets/Bgimages/bg4.png"
+import bg5 from "../assets/Bgimages/bg5.png"
+import { shallowRef } from "vue"
+import { buildPreloadInfo } from "jsview"
+import { Context } from "./Context"
+/* 背景图相关 */
+//定义随机背景图数组
+const bgArray = [bg1, bg2, bg3, bg4, bg5]
+//随机背景图
+const randomBg = (bg, array) => {
+    array.value = []
+    const randomIndex = Math.floor(Math.random() * bgArray.length);
+    bg.value = bgArray[randomIndex]
+    array.value.push(buildPreloadInfo(bg.value))
+    return bg
+}
+/* 地板相关 */
+
+//拿地板定位left的值
+let GameContext = new Context()
+//设定缝隙长度
+const gapWidth = 280;
+//给定最大长度
+const maxLength = 820;
+//给定最小长度
+const minLength = 600
+
+
+//随机的div样式
+const randomFloor = (array) => {
+    for (let i = 0; i < 2; i++) {
+        const length = Math.floor(Math.random() * (maxLength - minLength + 1)) + minLength + gapWidth
+        GameContext.left.value += length
+        let top = shallowRef(0)
+        if (i !== 0) {
+            top.value = 500 - Math.floor(Math.random() * 180)
+        } else {
+            top.value = 500 
+        }
+
+        array.value.push({ length: length, left: GameContext.left.value, top: top.value })
+    }
+    array.value.forEach((item, index) => {
+        if (index == 0) {
+            item.left = 0
+        } else {
+            item.left = array.value[index - 1].left + array.value[index - 1].length;
+        }
+    })
+
+    return array
+}
+export {
+    randomFloor,
+    randomBg,
+    gapWidth
+}

package/Parkour/Common/Sound.js

@@ -0,0 +1,50 @@
+/* 音频 */
+import { JsvSoundPool } from "jsview";
+import jumpAudio from "../assets/audio/jump.mp3"
+import failAudio from "../assets/audio/lose.mp3"
+
+class Sound {
+    initSound() {
+       this.soundPool = new JsvSoundPool(10);
+       this.soundPool.request(
+           `url(${jumpAudio})`,
+           null,
+           1,
+           (state, audioController) => {
+               console.log("load jump audio ", state)
+               if (state === 0) {
+                   Sound._AudioController1 = audioController;
+               }
+           }
+       );
+       this.soundPool.request(
+        `url(${failAudio})`,
+        null,
+        1,
+        (state, audioController) => {
+            console.log("load fail audio ", state)
+            if (state === 0) {
+                Sound._AudioController2 = audioController;
+            }
+        }
+    );
+   }
+
+    playJumpSound() {
+       if (Sound._AudioController1) {
+           Sound._AudioController1.play();
+       }
+   }
+
+   playFailSound() {
+       if (Sound._AudioController2) {
+           Sound._AudioController2.play();
+       }
+   }
+
+   destroy () {
+       this.soundPool.destroy()
+   }
+
+}
+export default Sound ;

package/Parkour/appConfig/HOW_TO_CONFIG.md

@@ -0,0 +1,20 @@
+app_data文件夹用来记录APP的设定信息，包括APP的全球唯一标识，签名信息
+
+1. 全球唯一标识AppName设定方法:
+   修改app.config.js文件中的AppName信息，一般命名方法为 domain/子应用名
+
+2. 签名信息，使用RSA签名，设定方法:
+   使用在线生成工具生成RSA钥匙对，例如 http://www.metools.info/code/c80.html
+   注意选择设定信息有三点要注意:
+   A. 秘钥长度固定为 2048 bit
+   B. 秘钥格式固定为 PKCS#8
+   (生成出的公钥以 -----BEGIN PUBLIC KEY----- 开头，而非 -----BEGIN RSA PUBLIC KEY-----)
+   C. 密码不要设置
+   将生成的公钥复制粘贴到文件app_sign_public_key.pem中，内容可以参照 app_sign_public_key_sample.pem 文件
+   同理，将私钥复制粘贴到文件app_sign_private_key.crt中
+   
+   JsView签名原理说明:
+   在进行js build时，会将 main.jsv.xxxx.js (包含AppName具体值)文件的md5值用私钥进行编码，编码出的内容和公钥一起写入到该文件的文件头中，JsView加载后用公钥反编码出该md5值，和文件的md5进行比对，若md5一致则认为此公钥合法，然后此公钥会和AppName进行映射，作为设定快捷访问地址等权限控制的调用作为参考，以防止其他APP对本APP(以AppName为查询键)的私有内容进行非法访问和破坏。
+   
+   注意: 私钥(app_sign_private_key.crt)不要被泄漏，私钥若泄漏，则其他APP可以伪装AppName，查询本APP的私有内容，覆盖本APP设定的快捷访问地址。
+   

package/Parkour/appConfig/app.config.mjs

@@ -0,0 +1,5 @@
+export default {
+	AppName: "xxxx.domain.cn/XXXX",
+	AppTitle: "Demo中文名(UTF8)",
+	AppVersion: "1.00"
+}

package/Parkour/appConfig/app_sign_private_key_sample.crt

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCyAMjq7vLF45SQ
+Xk3KtelbgEOR57okn2vFXMRa9lrHEkfP72YPnP7INHxMQ8pWIEx8nfhOTjCQbzAN
+5omUxjJizNsqcgfKldLgdwQAUENozMSsxWiteMyjvH0aX5X0vbpSOykUnkg/UROG
+vCyIj1buylww8FAMA4TamxfivOCLmQU7qlZNq7bZ/ZOYsdvAYRfd5Ey0Si8kgsk8
+/I9halBymQeVylBB+qY5d4L0IVLjcjbc9y9tU0+o4NoqFfkKCFQaSNXqYVey9yCG
+eHtpx9XT+SNDzvFTbGQaAVyoYSKjshQk58u1yn9kRp0t7rUvRfAQh6ocKBlPMucP
+x4zTv8PPAgMBAAECggEAJzhVDK6pf0Cts0GUEl4SlL6mJLfSI8+ch1fxS7mMNuCo
+QgCVlEsbODGYUZV+N4vWTn7f/yDrQme9RtLM7aLd5zcL80Y8wT5RwHN4xjjpIWY8
+z3SPo+lB7bHSPsVg3RQQwZ2XZ5uYf5r1mnJLvasXlHWx6naIrJz54NDbanIDZ75p
+YMvN/JIF4CQR58CNsPI3I8Ww5hnCSAynKlJy6qOf+C0XYxTRUs4TkZFa851a3E1q
+4E8HMCvt4BZiGfyvLyS6+2pDevY9gcym1yIYwhcIRviD8S1hGpGPcmHbbt7Sj70Y
+hr4oqbgxhlpQl9y2iUZ4VSKN3f1eU2O5Qufsn2cpQQKBgQDgZ2o+W5AIThqepzkK
++ExiXXVkHmSAtne5uLEz8SU/xwc0c0j9sOUlmpCvgn+aKbQO8MModAblPgo2QvI1
+YTnX/V+TBm/4mBmCq+F7i0z2ZrexGO6CSbe8lVSBy/sAbzNMeK6fPnS0aO4ZWjYS
+SDQ8/FAbxsHjUo2u5UDHJBj+JQKBgQDLENxo7EsCVB0R80WpL1VhkzXz3VTeMaSs
+rj81eu7Ji/55Eh7QzPI3TUNcFAUHRN8THT320dCiXkg0s/YTKD2j9s7mnAFjyNnG
+oiAmOvSpSKZgRGHh63LzwIDtSSQoeJQw+6ujvvF2elsWJ7s3t1N6tZD/E9E291yF
+WFDixdn14wKBgQCQV5TMVYMZBHw07uVPPBWN9AWth6sn67apPLam7YcDNhdZUopx
+vFY40OoeKre/RvHt5knx/GfvDu/spTU8xrQ5TV4rqSle4x8NoVehayHvIHUpshrA
+rYBFClzYPIfQaLa7iqjv/3F8Fj6JCjDbo5wOWlGA/GD8wr4l8IqxTXPSDQKBgQCr
+rmWqj5wbK+In+vU6RLp69Gr48nd+I5qGJAtsu7KG08UhtyA2iA+AkeIRRxu5OZEg
+J+jrdBhgLjX92OiC6dKzfUcP0XWbV4RHW2qy58VSGgoP+cCHsPhO/MID24KmdMtV
+XnGOzzB2apv37z9pq6T4aelcvvRy9E9UrYY1M/FC4QKBgA7CryIz/+Ps7zrn50BN
+TM3wsqomVe2sKj6OIE7f7SLdmA4cAco+xoXBExLxP7aqgrBj4B/7ovloF6edsGMI
+RF8yP8OceBIruFEKwUh4m0uoWshLJVnjk0iU+X8OD5lUCRhEZ6zO6svt5HTP1d+o
+XcUVzSIc3bxXpKmwXAfLKVED
+-----END PRIVATE KEY-----

package/Parkour/appConfig/app_sign_public_key_sample.pem

@@ -0,0 +1,9 @@
+-----BEGIN PUBLIC KEY-----
+MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsgDI6u7yxeOUkF5NyrXp
+W4BDkee6JJ9rxVzEWvZaxxJHz+9mD5z+yDR8TEPKViBMfJ34Tk4wkG8wDeaJlMYy
+YszbKnIHypXS4HcEAFBDaMzErMVorXjMo7x9Gl+V9L26UjspFJ5IP1EThrwsiI9W
+7spcMPBQDAOE2psX4rzgi5kFO6pWTau22f2TmLHbwGEX3eRMtEovJILJPPyPYWpQ
+cpkHlcpQQfqmOXeC9CFS43I23PcvbVNPqODaKhX5CghUGkjV6mFXsvcghnh7acfV
+0/kjQ87xU2xkGgFcqGEio7IUJOfLtcp/ZEadLe61L0XwEIeqHCgZTzLnD8eM07/D
+zwIDAQAB
+-----END PUBLIC KEY-----

package/Parkour/appConfig/jsview.config.mjs

@@ -0,0 +1,43 @@
+export default {
+  jsviewConfig: {
+    // (可选配置)remote loader
+    remoteLoader: null,
+
+    // (可选配置)localStorage支持
+    // presetKeys为预置key，可以直接使用localStorage.xxx的形式，避免undefined错误
+    localStorage: {
+      domain: null, // 默认自动使用app.config.mjs的AppName作为domain, 可以设置为其他值
+      presetKeys: [
+        'value1',
+        'value3'
+      ]
+    },
+
+    cookies: {
+      domain: '' // 当非null非空时，激活cookie功能，使ajax请求时自动带上cookies，并且document.cookie的get/set可用
+    },
+
+    // (可选配置)填写main.js或者bundle.js相对于index.html的相对位置，
+    // 用于image/import.then的相对寻址, vue3默认值是/js/
+    jsSubPath: '/js/'
+  },
+
+  vendorConfig: {
+    // (可选配置)设置屏幕坐标映射值，screenWidth为屏幕画布定义的宽度，displayScale为清晰度，
+    // 默认值是画布宽度1280px, 清晰度为1.0
+    designedMap: {
+      screenWidth: 1280,
+      displayScale: 1.5
+    },
+
+    // (可选配置)按键接受的扩展，例如将静音按键(JAVA键值为164)映射为JS键值20001，
+    // PS:注意'164'的引号
+    bindKeys: {
+      keys: {
+        164: 20001
+      },
+      syncKeys: {
+      }
+    }
+  }
+}

package/Parkour/assets/role_skin1/fail.json

@@ -0,0 +1,44 @@
+{"frames": [
+
+{
+	"filename": "1.png",
+	"frame": {"x":0,"y":0,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "2.png",
+	"frame": {"x":154,"y":0,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "3.png",
+	"frame": {"x":0,"y":112,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "4.png",
+	"frame": {"x":154,"y":112,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+}],
+"meta": {
+	"app": "http://www.texturepacker.com",
+	"version": "1.0",
+	"image": "fail.png",
+	"format": "RGBA8888",
+	"size": {"w":308,"h":224},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:44519538b3a9873cd0d16979a0037991$"
+}
+}

package/Parkour/assets/role_skin1/jump_down.json

@@ -0,0 +1,20 @@
+{"frames": [
+
+{
+	"filename": "5.png",
+	"frame": {"x":0,"y":0,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+}],
+"meta": {
+	"app": "http://www.texturepacker.com",
+	"version": "1.0",
+	"image": "jump_down.png",
+	"format": "RGBA8888",
+	"size": {"w":154,"h":112},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:9728b77a05eee5f78b6fb375d523d989$"
+}
+}

package/Parkour/assets/role_skin1/jump_up.json

@@ -0,0 +1,44 @@
+{"frames": [
+
+{
+	"filename": "1.png",
+	"frame": {"x":0,"y":0,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "2.png",
+	"frame": {"x":154,"y":0,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "3.png",
+	"frame": {"x":0,"y":112,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "4.png",
+	"frame": {"x":154,"y":112,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+}],
+"meta": {
+	"app": "http://www.texturepacker.com",
+	"version": "1.0",
+	"image": "jump_up.png",
+	"format": "RGBA8888",
+	"size": {"w":308,"h":224},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:5c6da59e8456caf422003adf18575284$"
+}
+}

package/Parkour/assets/role_skin1/roll.json

@@ -0,0 +1,44 @@
+{"frames": [
+
+{
+	"filename": "1.png",
+	"frame": {"x":0,"y":0,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "2.png",
+	"frame": {"x":154,"y":0,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "3.png",
+	"frame": {"x":0,"y":112,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "4.png",
+	"frame": {"x":154,"y":112,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+}],
+"meta": {
+	"app": "http://www.texturepacker.com",
+	"version": "1.0",
+	"image": "roll.png",
+	"format": "RGBA8888",
+	"size": {"w":308,"h":224},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:6a43ab2eec0ad9894ba8d16f6312c57d$"
+}
+}

package/Parkour/assets/role_skin1/run.json

@@ -0,0 +1,52 @@
+{"frames": [
+
+{
+	"filename": "1.png",
+	"frame": {"x":0,"y":0,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "2.png",
+	"frame": {"x":154,"y":0,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "3.png",
+	"frame": {"x":308,"y":0,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "4.png",
+	"frame": {"x":0,"y":112,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+},
+{
+	"filename": "5.png",
+	"frame": {"x":154,"y":112,"w":154,"h":112},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":154,"h":112},
+	"sourceSize": {"w":154,"h":112}
+}],
+"meta": {
+	"app": "http://www.texturepacker.com",
+	"version": "1.0",
+	"image": "run.png",
+	"format": "RGBA8888",
+	"size": {"w":462,"h":224},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:444a5be59b33f66d1f4dacf466c293fd$"
+}
+}

package/Parkour/components/Backdrop.vue

@@ -0,0 +1,56 @@
+<template>
+    <div>
+        <JsvPreload :preloadList="props.preload_info" :onPreloadDone="onPreloadDone"></JsvPreload>
+        <JsvActorMove :style="{ width: 1280 * 1.5, height: 720, backgroundImage: props.bgImg, }" :control="props.control">
+            <div v-for="(item, index) in props.ArrayItem" :style="{
+                width: item.length - gapWidth,
+                height: 30,
+                top: item.top,
+                left: item.left,
+                backgroundColor: '#FFFFFF',
+            }">
+                <!-- 红色障碍物 -->
+                <div v-if="index === 1" :style="{ width: 70, height: 70, top: -180, left: 400, backgroundColor: '#FF1213' }"
+                    :ref="props.ObstacleRef">
+                    <div :style="{ top: -50, left: 6, fontSize: 30, color: '#FFFFFF' }">双跳</div>
+                    <div :style="{ top: 80, left: 6, fontSize: 30, color: '#FFFFFF' }">下滚</div>
+                </div>
+                <!-- 上层判定边缘坠落区域 -->
+                <div :style="{ width: item.length - gapWidth + 10, height: 5, left: 0, top: -2, backgroundColor: 'rgba(0, 0, 0, 0.5)' }"
+                    :ref="props.TopRef">
+                </div>
+                <!-- 中层判定碰到就恢复奔跑状态的区域 -->
+                <div :style="{ width: item.length - gapWidth, height: 24, top: 6, left: 0, backgroundColor: 'rgba(255, 255, 255, 0.5)' }"
+                    :ref="props.MidRef">
+                </div>
+                <!-- 下层碰到地板就死的区域 -->
+                <div :style="{ width: item.length - gapWidth, height: 10, left: 0, top: 30, backgroundColor: '#000000' }"
+                    :ref="props.BottomRef">
+                </div>
+            </div>
+        </JsvActorMove>
+    </div>
+</template>
+
+<script setup>
+import { JsvActorMove, JsvPreload, jJsvRuntimeBridge } from "jsview"
+import { gapWidth } from "../Common/Random";
+const props = defineProps({
+    ArrayItem: Array,
+    bgImg: String,
+    preload_info: Array,
+    control: Object,
+    TopRef: null,
+    MidRef: null,
+    BottomRef: null,
+    ObstacleRef: null
+})
+
+const onPreloadDone = () => {
+    //图片加载好后摘掉画布
+    jJsvRuntimeBridge.notifyPageLoaded()
+}
+
+</script>
+
+<style lang="scss" scoped></style>

package/Parkour/components/GameSence.vue

@@ -0,0 +1,554 @@
+<template>
+    <jsv-focus-block autoFocus :onAction="actionDefines">
+        <Backdrop :control="control1" :ArrayItem="ArrayItem1" :bgImg="bgImg1" :preload_info="preload_info1"
+            :TopRef="GameContext.TopRef1" :MidRef="GameContext.MidRef1" :BottomRef="GameContext.BottomRef1"
+            :ObstacleRef="GameContext.ObstacleRef1" :style="{ left: 1280 * 1.5 }"></Backdrop>
+        <Backdrop :control="control2" :ArrayItem="ArrayItem2" :bgImg="bgImg2" :preload_info="preload_info2"
+            :TopRef="GameContext.TopRef2" :MidRef="GameContext.MidRef2" :BottomRef="GameContext.BottomRef2"
+            :ObstacleRef="GameContext.ObstacleRef2"></Backdrop>
+        <Matchman />
+        <!-- 游戏结束的弹窗 -->
+        <div v-if="isover" :style="{
+            width: 460,
+            height: 180,
+            top: 280,
+            left: 440 - 60,
+            backgroundColor: 'rgba(255, 255, 255, 0.8)',
+            color: '#000000',
+            fontSize: 50,
+            textAlign: 'center',
+            borderRadius: 30
+        }">游戏结束
+            <div :style="{
+                width: 460,
+                height: 180,
+                top: 90,
+                left: 0,
+            }">按[OK]键重新开始</div>
+        </div>
+        <!-- 变速动画 -->
+        <div v-if="isshow"
+            :style="{ width: 300, height: 50, color: '#FF1213', top: 40, left: 660, fontSize: 40, animation: 'show 2s ease-in-out' }"
+            @animationend="AnimEnd">
+            当前速度：{{ speed }}</div>
+    </jsv-focus-block>
+</template>
+
+<script setup>
+import {
+    JsvActorMoveControl, SpriteController,
+    createImpactTracer,
+    createImpactCallback,
+    createImpactAutoFroze,
+} from "jsview"
+import { shallowRef, onMounted, watch, onBeforeUnmount, ref, provide, inject } from "vue";
+import Matchman from "./Matchman.vue"
+import { _formatInfo, jsonObject } from "../Common/MatchmanInfo"
+import { randomBg, randomFloor } from "../Common/Random";
+import Backdrop from "./Backdrop.vue";
+import Sound from "../Common/Sound.js"
+import { Context } from "../Common/Context";
+/* 火柴人相关变量控制 */
+
+//音频
+const PlaySound = new Sound()
+
+//给定ref
+let match = shallowRef(null)
+provide("match", match)
+
+//火柴人纵向动作控制器
+const verticalControl = new JsvActorMoveControl();
+provide("verticalControl", verticalControl)
+
+//雪碧图控制器
+const spriteController_run = new SpriteController()
+provide("spriteController_run", spriteController_run)
+
+const spriteController_jump = new SpriteController()
+provide("spriteController_jump", spriteController_jump)
+
+const spriteController_down = new SpriteController()
+provide("spriteController_down", spriteController_down)
+
+const spriteController_roll = new SpriteController()
+provide("spriteController_roll", spriteController_roll)
+
+const spriteController_fail = new SpriteController()
+provide("spriteController_fail", spriteController_fail)
+
+//主碰撞区域的ref
+let body = shallowRef(null)
+provide("body", body)
+//副碰撞区域（顶层碰撞）的ref
+let head = shallowRef(null)
+provide("head", head)
+//初始化跑步状态json
+let sprite_info = ref(_formatInfo(jsonObject.run_json));
+provide("sprite_info", sprite_info)
+//尺寸
+const view_size = {
+    w: sprite_info.value.maxW,
+    h: sprite_info.value.maxH,
+};
+provide('view_size', view_size)
+//切换主副碰撞体的变量
+let ischange = shallowRef(null)
+provide("ischange", ischange)
+//跳跃计数
+let num = shallowRef(0)
+//跳跃变量
+let isjump = shallowRef(false)
+provide("isjump", isjump)
+//滚动变量
+let isroll = shallowRef(false)
+provide("isroll", isroll)
+//跑动变量
+let isrun = shallowRef(true)
+provide('isrun', isrun)
+//落下变量
+let isdown = shallowRef(false)
+provide("isdown", isdown)
+//结束变量
+let isover = shallowRef(false)
+provide("isover", isover)
+
+//火柴人动画结束的回调
+const onAnimEnd = () => {
+    ischange.value = false
+    //在滚动状态时不会正常触发，
+    if (isjump.value) {
+        isroll.value = false
+        isdown.value = false
+        isrun.value = false
+        num.value = 0
+    }
+    else if (!isover.value) {
+        isroll.value = false
+        isdown.value = false
+        isjump.value = false
+        isrun.value = true
+        num.value = 0
+    } else {
+        isover.value = true
+        isroll.value = false
+        isdown.value = false
+        isjump.value = false
+        isrun.value = false
+    }
+
+}
+provide("onAnimEnd", onAnimEnd)
+
+
+/* 背景图相关 */
+//背景控制
+const control1 = new JsvActorMoveControl()
+const control2 = new JsvActorMoveControl()
+//随机数组
+let ArrayItem1 = ref([])
+let ArrayItem2 = ref([])
+//随机背景图片
+let bgImg1 = shallowRef('')
+let bgImg2 = shallowRef('')
+//预加载的背景图
+const preload_info1 = shallowRef([]);
+const preload_info2 = shallowRef([])
+
+//背景和地板初始化
+randomFloor(ArrayItem1)
+randomFloor(ArrayItem2)
+randomBg(bgImg1, preload_info1)
+randomBg(bgImg2, preload_info2)
+
+/* 整体控制 */
+
+//拿取ref给子组件
+let GameContext = new Context()
+
+//碰撞管理
+let bump = shallowRef(false)
+let sensorList = [];
+
+//碰撞即停变量
+let viewsAutoFroze = null;
+
+//变化标志
+let flag1 = shallowRef(0)
+let flag2 = shallowRef(0)
+
+//接收key
+let SenceKey = inject("SenceKey")
+
+//地板碰撞函数
+const collisionCallback = () => {
+    if (!bump.value) {
+        if (!isroll.value) {
+            isrun.value = true
+            isdown.value = false
+            isjump.value = false
+            isover.value = false
+            num.value = 0
+        }
+    } else {
+        isover.value = true
+        isroll.value = false
+        isrun.value = false
+        isdown.value = false
+        isjump.value = false
+        num.value = 0
+    }
+}
+
+//边缘坠落函数
+const separate = () => {
+    if (!isjump.value) {
+        verticalControl.throwAlongY(
+            0,
+            4000,
+            { type: "catch", position: 300, direction: 1 },
+            () => {
+                gameOver()
+            }, // 未碰撞落地时，游戏结束
+            () => {
+                isdown.value = true
+                isroll.value = false
+                isrun.value = false
+                isdown.value = false
+                isjump.value = false
+                isover.value = false
+            } // 到达拐点时调整成落下状态
+        );
+    }
+}
+
+//键盘事件
+const onKeyDown = (ev) => {
+    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        //交给主页处理，这里不做处理
+    }
+    else if (isover.value) {
+        if (ev.keyCode == 13) {
+            SenceKey.value += 1
+        } else {
+            return true
+        }
+    } else if (ev.keyCode == 38 && num.value < 2) {
+        ischange.value = false
+        isroll.value = false
+        isjump.value = true
+        isdown.value = false
+        isrun.value = false
+        isover.value = false
+        num.value += 1
+        verticalControl.throwAlongY(
+            -1000,
+            2450,
+            { type: "catch", position: 300, direction: 1 },
+            () => {
+                gameOver()
+            }, // 未碰撞落地时，游戏结束
+            () => {
+                isroll.value = false
+                isrun.value = false
+                isdown.value = true
+                isjump.value = false
+                isover.value = false
+            } // 到达拐点时调整成落下状态
+        );
+        //跳跃音频
+        PlaySound.playJumpSound()
+
+    } else if (ev.keyCode == 40) {
+        isroll.value = true
+        isrun.value = false
+        isdown.value = false
+        isjump.value = false
+        isover.value = false
+        num.value = 0
+        ischange.value = true
+        spriteController_roll.start()
+    }
+}
+//游戏结束函数
+const gameOver = () => {
+    spriteController_fail.start()
+    isover.value = true
+    isrun.value = false
+    isdown.value = false
+    isjump.value = false
+    isroll.value = false
+    num.value = 0
+    //播放失败音频，停止运动
+    PlaySound.playFailSound()
+    control1.pause()
+    control2.pause()
+}
+
+const actionDefines = {
+    onKeyDown
+}
+
+//速度显示变量
+let speed = shallowRef(274)
+//控制速度动画div的变量
+let isshow = shallowRef(true)
+
+//速度动画结束回调
+const AnimEnd = () => {
+    isshow.value = false
+}
+
+//监听背景图运动 更新随机地板以及变速
+watch(flag1, (n, o) => {
+    if (n == 1) {
+        isshow.value = true
+        speed.value = 640
+        control1.altStraightSpeed(640, 3000)
+        control2.altStraightSpeed(640, 3000)
+        ArrayItem1.value = []
+        randomFloor(ArrayItem1)
+    } else if (n == 2) {
+        ArrayItem1.value = []
+    }
+    bgImg1.value = ''
+    randomBg(bgImg1, preload_info1)
+})
+watch(flag2, (n, o) => {
+    if (n == 1) {
+        isshow.value = true
+        speed.value = 384
+        control1.altStraightSpeed(384, 3000)
+        control2.altStraightSpeed(384, 3000)
+    }
+    ArrayItem2.value = []
+    randomFloor(ArrayItem2)
+    bgImg2.value = ''
+    randomBg(bgImg2, preload_info2)
+})
+
+/* 在此生命周期进行碰撞体定义操作以及初始化音频 */
+onMounted(() => {
+    //初始化音频
+    PlaySound.initSound()
+    //初始落下
+    verticalControl.throwAlongY(
+        0,
+        9000,
+        { type: "catch", position: 300, direction: 1 },
+        () => {
+            gameOver()
+        },
+        () => {
+            isroll.value = false
+            isrun.value = false
+            isdown.value = true
+            isjump.value = false
+            isover.value = false
+            num.value = 1
+        }
+    );
+    //给定碰撞即停句柄
+    viewsAutoFroze = createImpactAutoFroze(
+        [match.value.mainDiv], null
+    );
+
+    //移动两个背景图
+    control1.scrollMoveAlongX(-1280 * 2 * 1.5, 274, 0, () => {
+        flag1.value += 1
+        return true
+    })
+    control2.scrollMoveAlongX(-1280 * 1.5, 274, 1280 * 1.5, () => {
+        flag2.value += 1
+        return true
+    })
+
+    //创建碰撞体,因为每个场景只有两个地板,直接为2
+    for (let i = 0; i < 2; i++) {
+
+        //第一屏 上层碰撞体，边缘坠落（火柴人主碰撞体）
+        sensorList.push(
+            createImpactTracer(
+                body.value,
+                GameContext.TopRef1.value[i],
+                createImpactCallback(() => {
+                    collisionCallback()
+                }, () => {
+                    num.value = 1
+                    separate()
+                }, null),
+            )
+        );
+        //第二屏 上层碰撞体，边缘坠落（火柴人主碰撞体）
+        sensorList.push(
+            createImpactTracer(
+                body.value,
+                GameContext.TopRef2.value[i],
+                createImpactCallback(() => {
+                    collisionCallback()
+                }, () => {
+                    num.value = 1
+                    separate()
+                }, null),
+            )
+        );
+
+        //第一屏 中层碰撞（火柴人主碰撞体）
+        sensorList.push(
+            createImpactTracer(
+                body.value,
+                GameContext.MidRef1.value[i],
+                createImpactCallback(() => {
+                    //此处计算是针对于pc端 320为初始小人top,50和40为上下两个碰撞体大小。20是为视觉效果更好。
+                    verticalControl.jumpTo(0, ArrayItem1.value[i].top - 320 - 50 - 40 - 20)
+                    collisionCallback()
+                }, null),
+                viewsAutoFroze
+            )
+        );
+        //第二屏 中层碰撞（火柴人主碰撞体）
+        sensorList.push(
+            createImpactTracer(
+                body.value,
+                GameContext.MidRef2.value[i],
+                createImpactCallback(() => {
+                    verticalControl.jumpTo(0, ArrayItem2.value[i].top - 320 - 50 - 40 - 20)
+                    collisionCallback()
+                }, null),
+                viewsAutoFroze
+            )
+        );
+
+        //第一屏 下层碰撞体，碰撞即游戏结束(火柴人主碰撞体)
+        sensorList.push(
+            createImpactTracer(
+                body.value,
+                GameContext.BottomRef1.value[i],
+                createImpactCallback(() => {
+                    if (isjump.value) {
+                        bump.value = true
+                        gameOver()
+                    }
+                }, null),
+                viewsAutoFroze
+            )
+        );
+        // 第一屏 下层碰撞体，碰撞即游戏结束(火柴人副碰撞体)
+        sensorList.push(
+            createImpactTracer(
+                head.value,
+                GameContext.BottomRef1.value[i],
+                createImpactCallback(() => {
+                    if (isjump.value) {
+                        bump.value = true
+                        gameOver()
+                    }
+                }, null),
+                viewsAutoFroze
+            )
+        );
+
+        //第二屏 下层碰撞体，碰撞即游戏结束(火柴人主碰撞体)
+        sensorList.push(
+            createImpactTracer(
+                body.value,
+                GameContext.BottomRef2.value[i],
+                createImpactCallback(() => {
+                    if (isjump.value) {
+                        bump.value = true
+                        gameOver()
+                    }
+                }, null),
+                viewsAutoFroze
+            )
+        );
+        // 第一屏 下层碰撞体，碰撞即游戏结束(火柴人副碰撞体)
+        sensorList.push(
+            createImpactTracer(
+                head.value,
+                GameContext.BottomRef2.value[i],
+                createImpactCallback(() => {
+                    if (isjump.value) {
+                        bump.value = true
+                        gameOver()
+                    }
+                }, null),
+                viewsAutoFroze
+            )
+        );
+    }
+    //第一屏 与障碍物相撞（火柴人主碰撞体）
+    sensorList.push(
+        createImpactTracer(
+            body.value,
+            GameContext.ObstacleRef1.value[0],
+            createImpactCallback(() => {
+                bump.value = true
+                gameOver()
+            }, null),
+            viewsAutoFroze
+        )
+    );
+    //第一屏 与障碍物相撞（火柴人副碰撞体）
+    sensorList.push(
+        createImpactTracer(
+            head.value,
+            GameContext.ObstacleRef1.value[0],
+            createImpactCallback(() => {
+                bump.value = true
+                gameOver()
+            }, null),
+            viewsAutoFroze
+        )
+    );
+    //第二屏 与障碍物相撞（火柴人主碰撞体）
+    sensorList.push(
+        createImpactTracer(
+            body.value,
+            GameContext.ObstacleRef2.value[0],
+            createImpactCallback(() => {
+                bump.value = true
+                gameOver()
+            }, null),
+            viewsAutoFroze
+        )
+    );
+    //第二屏 与障碍物相撞（火柴人副碰撞体）
+    sensorList.push(
+        createImpactTracer(
+            head.value,
+            GameContext.ObstacleRef2.value[0],
+            createImpactCallback(() => {
+                bump.value = true
+                gameOver()
+            }, null),
+            viewsAutoFroze
+        )
+    );
+
+})
+
+/* 重要! 退出后应该释放所有碰撞监听者 */
+onBeforeUnmount(() => {
+    for (const sensor of sensorList) {
+        sensor.Recycle();
+    }
+    viewsAutoFroze?.Recycle();
+    //摧毁音频
+    PlaySound.destroy();
+})
+</script>
+
+<style lang="scss" scoped>
+@keyframes show {
+    from {
+        transform: scale3d(1, 1, 1);
+        opacity: 1;
+    }
+
+    to {
+        transform: scale3d(1.2, 1.2, 1.2);
+        opacity: 0;
+    }
+}
+</style>

package/Parkour/components/Matchman.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <JsvPreload :preloadList="preload_info"></JsvPreload>
+    <JsvActorMove :control="verticalControl" :style="{ top: 720 / 2 - 40, left: 50 }" ref="match">
+      <!-- 跑动 -->
+      <JsvSpriteAnim :spriteInfo="sprite_info_run.info" :loop="'infinite'" :viewSize="view_size" :duration="0.5"
+        :autostart="true" :imageUrl="pngObject.run_png" :controller="spriteController_run" v-show="isrun">
+      </JsvSpriteAnim>
+      <!-- 跳起 -->
+      <JsvSpriteAnim :spriteInfo="sprite_info_jumpUp.info" :loop="1" :viewSize="view_size" :duration="0.6"
+        :autostart="true" :imageUrl="pngObject.jumpUp_png" :controller="spriteController_jump" v-show="isjump">
+      </JsvSpriteAnim>
+      <!-- 落下 -->
+      <JsvSpriteAnim :spriteInfo="sprite_info_jumpDown.info" :loop="'infinite'" :viewSize="view_size" :duration="1"
+        :autostart="true" :imageUrl="pngObject.jumpDown_png" :controller="spriteController_down" v-show="isdown">
+      </JsvSpriteAnim>
+      <!-- 滚动 -->
+      <JsvSpriteAnim :spriteInfo="sprite_info_roll.info" :loop="2" :viewSize="view_size" :duration="0.4" :autostart="true"
+        :imageUrl="pngObject.roll_png" :onAnimEnd="onAnimEnd" :controller="spriteController_roll" v-show="isroll">
+      </JsvSpriteAnim>
+      <!-- 失败 -->
+      <JsvSpriteAnim :spriteInfo="sprite_info_fail.info" :loop="1" :viewSize="view_size" :duration="0.6" :autostart="true"
+        :imageUrl="pngObject.fail_png" :controller="spriteController_fail" v-show="isover" :onAnimEnd="onAnimEnd">
+      </JsvSpriteAnim>
+      <!-- 主碰撞体  -->
+      <div key="body" ref="body" :style="{
+        top: 60,
+        left: 70,
+        width: 20,
+        height: 50,
+        backgroundColor: 'rgba(0,0,0,0)'
+      }"></div>
+      <!-- 副碰撞体 上层区域 -->
+      <div key="head" ref="head" :style="{
+        top: 20,
+        left: 70,
+        width: 20,
+        height: 40,
+        backgroundColor: 'rgba(0,0,0,0)'
+      }" v-show="!ischange"></div>
+    </JsvActorMove>
+  </div>
+</template>
+
+<script setup>
+import {
+  JsvActorMove,
+  JsvSpriteAnim,
+  JsvPreload,
+  buildPreloadInfo,
+} from "jsview"
+import { inject } from "vue";
+import { pngObject, _formatInfo, jsonObject } from "../Common/MatchmanInfo";
+//预加载火柴人信息
+const preload_info = [buildPreloadInfo(pngObject.fail_png), buildPreloadInfo(pngObject.roll_png), buildPreloadInfo(pngObject.jumpDown_png), buildPreloadInfo(pngObject.jumpUp_png), buildPreloadInfo(pngObject.run_png)]
+//接收信息
+let verticalControl = inject("verticalControl")
+let body = inject("body")
+let head = inject("head")
+let ischange = inject("ischange")
+const onAnimEnd = inject("onAnimEnd")
+let view_size = inject("view_size")
+let match = inject("match")
+let isrun = inject("isrun")
+let isroll = inject("isroll")
+let isdown = inject("isdown")
+let isjump = inject("isjump")
+let isover = inject('isover')
+
+//不同形态控制器
+const spriteController_run = inject("spriteController_run")
+const spriteController_jump = inject("spriteController_jump")
+const spriteController_down = inject("spriteController_down")
+const spriteController_roll = inject("spriteController_roll")
+const spriteController_fail = inject("spriteController_fail")
+
+const sprite_info_run = _formatInfo(jsonObject.run_json)
+const sprite_info_jumpUp = _formatInfo(jsonObject.jumpUp_json)
+const sprite_info_jumpDown = _formatInfo(jsonObject.jumpDown_json)
+const sprite_info_roll = _formatInfo(jsonObject.roll_json)
+const sprite_info_fail = _formatInfo(jsonObject.fail_json)
+
+</script>
+
+<style lang="scss" scoped></style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.0.1106",
+  "version": "2.0.1119-next-vue.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",