tropsCode/src/components/JumpRopeGame/index.vue

<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>