CINC/utils/phaser-demo.html

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