测试动画

src/components/JumpRopeGame/index copy.vue

@@ -0,0 +1,76 @@
+<template>
+  <div ref="gameContainer" class="game-container"></div>
+</template>
+
+<script>
+import { onMounted, ref } from 'vue';
+import Phaser from 'phaser';
+
+export default {
+  name: 'JumpRope',
+  setup() {
+    const gameContainer = ref(null);
+
+    onMounted(() => {
+      // 创建 Phaser 游戏实例
+      const config = {
+        type: Phaser.AUTO,
+        parent: gameContainer.value,
+        width: 800,
+        height: 800,
+        transparent: true, // 设置为透明背景
+        scene: {
+          preload,
+          create,
+          update,
+        },
+      };
+
+      new Phaser.Game(config);
+
+      let rope, player;
+
+      function preload() {
+        this.load.image('rope', 'static/images/animation/2.png'); // 跳绳的图片
+        this.load.image('player', 'static/images/animation/1.png'); // 玩家角色的图片
+      }
+
+      function create() {
+        // 创建跳绳
+        rope = this.add.image(400, 300, 'rope').setOrigin(0.5, 0.5);
+        rope.angle = 0;
+
+        // 创建玩家角色
+        player = this.add.image(400, 450, 'player').setOrigin(0.5, 0.5);
+
+        // 创建动画
+        this.tweens.add({
+          targets: rope,
+          angle: 360,
+          duration: 1000,
+          repeat: -1,
+          yoyo: true,
+          ease: 'Sine.easeInOut',
+        });
+      }
+
+      function update() {
+        // 每帧更新的逻辑，如果有的话
+      }
+    });
+
+    return {
+      gameContainer,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.game-container {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  position: relative;
+}
+</style>

src/components/JumpRopeGame/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div ref="gameContainer" class="game-container"></div>
+</template>
+
+<script>
+import { onMounted, ref } from 'vue';
+import Phaser from 'phaser';
+
+export default {
+  name: 'JumpRope',
+  setup() {
+    const gameContainer = ref(null);
+
+    onMounted(() => {
+      // 创建 Phaser 游戏实例
+      const config = {
+        type: Phaser.AUTO,
+        parent: gameContainer.value,
+        width: 800,
+        height: 800,
+        transparent: true, // 设置为透明背景
+        scene: {
+          preload,
+          create,
+          update,
+        },
+      };
+
+      new Phaser.Game(config);
+
+      let rope, player;
+
+      function preload() {
+        this.load.image('rope', 'static/images/animation/2.png'); // 跳绳的图片
+        this.load.image('player', 'static/images/animation/1.png'); // 玩家角色的图片
+      }
+
+      function create() {
+        // 创建跳绳
+        rope = this.add.image(400, 300, 'rope').setOrigin(0.5, 0.5);
+        rope.angle = 0;
+
+        // 创建玩家角色
+        player = this.add.image(400, 450, 'player').setOrigin(0.5, 0.5);
+
+        // 创建动画
+        this.tweens.add({
+          targets: rope,
+          angle: 360,
+          duration: 1000,
+          repeat: -1,
+          yoyo: true,
+          ease: 'Sine.easeInOut',
+        });
+      }
+
+      function update() {
+        // 每帧更新的逻辑，如果有的话
+      }
+    });
+
+    return {
+      gameContainer,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.game-container {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  position: relative;
+}
+</style>

src/types/components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AddItemWindow: typeof import('./../components/AddItemWindow/index.vue')['default']
     ChooseStudent: typeof import('./../components/ChooseStudent/index.vue')['default']
+    copy: typeof import('./../components/JumpRopeGame/index copy.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElIcon: typeof import('element-plus/es')['ElIcon']
@@ -21,6 +22,8 @@ declare module 'vue' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     FaceWindow: typeof import('./../components/FaceWindow/index.vue')['default']
     Header: typeof import('./../components/Header/index.vue')['default']
+    'Index copy': typeof import('./../components/JumpRopeGame/index copy.vue')['default']
+    JumpRopeGame: typeof import('./../components/JumpRopeGame/index.vue')['default']
     MultipleItem: typeof import('./../components/MultipleItem/index.vue')['default']
     OptionWindow: typeof import('./../components/OptionWindow/index.vue')['default']
     ReportList: typeof import('./../components/ReportList/index.vue')['default']

src/views/set/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="set">
     <Header @confirmExit="confirmExit"></Header>
+    <!-- <JumpRopeGame /> -->
     <div class="main">
       <div class="li" @click="getConfig">
         <div class="liBox">