让游戏更丰富——让Flutter游戏添加摇杆

2023-11-01 16:42:38

在上一篇文章中，我们已经创建了一个基本的坦克游戏。现在，我们将继续开发这个游戏，添加一个摇杆来控制坦克的移动。

创建摇杆

首先，我们需要创建一个摇杆组件。我们可以使用Flutter中的Joystick组件来实现这个功能。

import 'package:flutter/material.dart';

class Joystick extends StatelessWidget {
  const Joystick({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.grey,
      ),
      child: Stack(
        children: [
          // 摇杆底座
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.black,
              ),
            ),
          ),
          // 摇杆把手
          Positioned(
            left: 0,
            top: 0,
            child: Container(
              width: 50,
              height: 50,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

添加摇杆到游戏中

现在，我们需要将摇杆添加到游戏中。我们可以将摇杆组件添加到游戏界面的右下角。

class GamePage extends StatelessWidget {
  const GamePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 游戏地图
          Positioned.fill(
            child: Container(
              color: Colors.green,
            ),
          ),
          // 坦克
          Positioned(
            left: 100,
            top: 100,
            child: Tank(),
          ),
          // 摇杆
          Positioned(
            right: 10,
            bottom: 10,
            child: Joystick(),
          ),
        ],
      ),
    );
  }
}

控制坦克移动

现在，我们需要让摇杆控制坦克的移动。我们可以使用GestureDetector组件来实现这个功能。

import 'package:flutter/material.dart';

class Joystick extends StatelessWidget {
  const Joystick({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: (details) {
        // 当摇杆开始移动时，获取摇杆的中心点
        var center = Offset(50, 50);

        // 计算摇杆的移动距离
        var distance = (details.localPosition - center).distance;

        // 如果摇杆移动距离大于摇杆半径，则将摇杆移动距离限制为摇杆半径
        if (distance > 50) {
          distance = 50;
        }

        // 计算摇杆的移动角度
        var angle = (details.localPosition - center).direction;

        // 更新坦克的位置
        tank.x += distance * cos(angle);
        tank.y += distance * sin(angle);
      },
      onPanEnd: (details) {
        // 当摇杆停止移动时，将坦克的速度设为0
        tank.vx = 0;
        tank.vy = 0;
      },
      child: Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.grey,
        ),
        child: Stack(
          children: [
            // 摇杆底座
            Positioned.fill(
              child: Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.black,
                ),
              ),
            ),
            // 摇杆把手
            Positioned(
              left: 0,
              top: 0,
              child: Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}