日常开发

src/components/JumpRopeGame/index.vue

@@ -13,20 +13,20 @@ const frameRate = ref(null);
 
 function preload() {
   this.load.spritesheet('character', 'static/images/animation/jumprope.png', {
-    frameWidth: 480,
-    frameHeight: 480
+    frameWidth: 240,
+    frameHeight: 240
   });
 }
 function create() {
   // 创建动画
   animatorProperty.value = this.anims.create({
     key: 'sports',
-    frames: this.anims.generateFrameNumbers('character', { start: 0, end: 2 }),
-    frameRate: 10,
+    frames: this.anims.generateFrameNumbers('character', { start: 0, end: 6 }),
+    frameRate: 15,
     repeat: 0 // -1表示无限循环
   });
   // 创建精灵并播放动画
-  player.value = this.add.sprite(240, 240, 'character');
+  player.value = this.add.sprite(120, 120, 'character');
 }
 
 function update() {
@@ -44,8 +44,8 @@ onMounted(() => {
   const config = {
     type: Phaser.AUTO,
     parent: gameContainer.value,
-    width: 480,
-    height: 480,
+    width: 240,
+    height: 240,
     transparent: true, // 设置为透明背景
     scene: {
       preload,
@@ -70,12 +70,12 @@ defineExpose({
 
 <style scoped>
 .gameContainer {
-  width: 480px;
-  height: 480px;
+  width: 240px;
+  height: 240px;
   position: fixed;
   z-index: 999;
-  left: 50%;
-  margin-left: -240px;
-  bottom: 1vh;
+  left: 10%;
+  margin-left: -120px;
+  bottom: 1.5vh;
 }
 </style>