feat(control) 多角色控制

utils/phaser-demo.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Phaser Top-Down Demo</title>
+  <style>body { margin: 0; }</style>
+</head>
+<body>
+<!--  <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script>-->
+  <script src="../phaser.min.js"></script>
+  <script>
+    const config = {
+      type: Phaser.AUTO,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      backgroundColor: '#87ceeb',
+      physics: {
+        default: 'arcade',
+        arcade: {
+          debug: false
+        }
+      },
+      scene: {
+        preload: preload,
+        create: create,
+        update: update
+      }
+    };
+
+    const game = new Phaser.Game(config);
+    let player;
+    let cursors;
+
+    function preload() {
+      // 创建一个简单的圆形纹理作为玩家
+      const canvas = document.createElement('canvas');
+      canvas.width = 32;
+      canvas.height = 32;
+      const ctx = canvas.getContext('2d');
+      ctx.fillStyle = '#ff0000';
+      ctx.beginPath();
+      ctx.arc(16, 16, 14, 0, Math.PI * 2);
+      ctx.fill();
+      this.textures.addCanvas('player', canvas);
+    }
+
+    function create() {
+      // 添加玩家（启用物理）
+      player = this.physics.add.sprite(400, 300, 'player');
+      player.setCollideWorldBounds(true);
+      player.setBounce(0.1);
+      player.setDrag(0.9);
+
+      // 设置世界大小（模拟开放世界）
+      this.physics.world.setBounds(-2000, -2000, 4000, 4000);
+
+      // 相机跟随
+      this.cameras.main.startFollow(player, true, 0.1, 0.1);
+      this.cameras.main.setBounds(-2000, -2000, 4000, 4000);
+
+      // 键盘输入
+      cursors = this.input.keyboard.createCursorKeys();
+      this.wasd = {
+        up: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W),
+        down: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S),
+        left: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
+        right: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D)
+      };
+    }
+
+    function update() {
+      const speed = 500;
+      player.setVelocity(0);
+
+      if (cursors.up.isDown || this.wasd.up.isDown) {
+        player.setVelocityY(-speed);
+      }
+      if (cursors.down.isDown || this.wasd.down.isDown) {
+        player.setVelocityY(speed);
+      }
+      if (cursors.left.isDown || this.wasd.left.isDown) {
+        player.setVelocityX(-speed);
+      }
+      if (cursors.right.isDown || this.wasd.right.isDown) {
+        player.setVelocityX(speed);
+      }
+    }
+  </script>
+</body>
+</html>