颤振逻辑问题
Flutter logic issue
我正在制作这个小游戏,它类似于 Qix 游戏。
我已经构建了第一个屏幕,现在我需要实现功能,汽车应该使用按钮移动,并且在移动时它应该像一个容器一样在它后面绘制,直到它感觉整个体育场。
这是我让汽车移动的地方:
class _GameScreenState extends State<GameScreen> {
double xPosition = Random().nextInt(230).toDouble();
double yPposition = Random().nextInt(200).toDouble();
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bg.png"),
fit: BoxFit.cover,
),
),
child: Column(
children: [
// Game play
Expanded(
flex: 6,
child: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.transparent,
),
Positioned(
bottom: yPposition,
left: xPosition,
child: Image.asset("assets/images/car.png"),
)
],
),
),
// Player inputes
Expanded(
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
RoundIconButton(
onPress: () {
setState(() {
yPposition--;
});
},
icon: Icons.arrow_downward,
),
RoundIconButton(
onPress: () {
setState(() {
yPposition++;
});
},
icon: Icons.arrow_upward,
),
],
),
Row(
children: [
RoundIconButton(
onPress: () {
setState(() {
xPosition--;
});
},
icon: Icons.arrow_back,
),
RoundIconButton(
onPress: () {
setState(() {
xPosition = xPosition + 10;
});
},
icon: Icons.arrow_forward,
),
],
),
],
),
),
),
),
],
),
),
),
);
}
}
我还需要当我按下按钮时汽车继续移动,在我的情况下它只移动一次
您可以设置一个计时器,您希望多久更改一次位置。
要获取点击事件,GestureDetector
适用于这种情况,
我们将使用 onPanStart
使用定时器更新值,使用 onPanEnd
取消定时器。
运行 dartPad。
late Timer timer;
final duration = const Duration(milliseconds: 100);
void moveUp(_) {
timer = Timer.periodic(duration, (timer) {
setState(() {
yPposition++;
});
});
}
void moveDown(_) {
timer = Timer.periodic(duration, (timer) {
setState(() {
yPposition--;
});
});
}
void moveRight(_) {
timer = Timer.periodic(duration, (timer) {
setState(() {
xPosition++;
});
});
}
void moveLeft(_) {
timer = Timer.periodic(duration, (timer) {
setState(() {
xPosition--;
});
});
}
void onEnd(_) {
timer.cancel();
}
会用到方法
Row(
children: [
GestureDetector(
onPanStart: moveDown,
onPanEnd: onEnd,
child: Icon(Icons.arrow_downward),
),
GestureDetector(
onPanStart: moveUp,
onPanEnd: onEnd,
child: Icon(Icons.arrow_upward),
),
],
),
Row(
children: [
GestureDetector(
onPanStart: moveRight,
onPanEnd: onEnd,
child: Icon(Icons.arrow_forward),
),
GestureDetector(
onPanStart: moveLeft,
onPanEnd: onEnd,
child: Icon(Icons.arrow_back),
),
],
),
],
),
我正在制作这个小游戏,它类似于 Qix 游戏。
我已经构建了第一个屏幕,现在我需要实现功能,汽车应该使用按钮移动,并且在移动时它应该像一个容器一样在它后面绘制,直到它感觉整个体育场。
这是我让汽车移动的地方:
class _GameScreenState extends State<GameScreen> {
double xPosition = Random().nextInt(230).toDouble();
double yPposition = Random().nextInt(200).toDouble();
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bg.png"),
fit: BoxFit.cover,
),
),
child: Column(
children: [
// Game play
Expanded(
flex: 6,
child: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.transparent,
),
Positioned(
bottom: yPposition,
left: xPosition,
child: Image.asset("assets/images/car.png"),
)
],
),
),
// Player inputes
Expanded(
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
RoundIconButton(
onPress: () {
setState(() {
yPposition--;
});
},
icon: Icons.arrow_downward,
),
RoundIconButton(
onPress: () {
setState(() {
yPposition++;
});
},
icon: Icons.arrow_upward,
),
],
),
Row(
children: [
RoundIconButton(
onPress: () {
setState(() {
xPosition--;
});
},
icon: Icons.arrow_back,
),
RoundIconButton(
onPress: () {
setState(() {
xPosition = xPosition + 10;
});
},
icon: Icons.arrow_forward,
),
],
),
],
),
),
),
),
],
),
),
),
);
}
}
我还需要当我按下按钮时汽车继续移动,在我的情况下它只移动一次
您可以设置一个计时器,您希望多久更改一次位置。
要获取点击事件,GestureDetector
适用于这种情况,
我们将使用 onPanStart
使用定时器更新值,使用 onPanEnd
取消定时器。
运行 dartPad。
late Timer timer;
final duration = const Duration(milliseconds: 100);
void moveUp(_) {
timer = Timer.periodic(duration, (timer) {
setState(() {
yPposition++;
});
});
}
void moveDown(_) {
timer = Timer.periodic(duration, (timer) {
setState(() {
yPposition--;
});
});
}
void moveRight(_) {
timer = Timer.periodic(duration, (timer) {
setState(() {
xPosition++;
});
});
}
void moveLeft(_) {
timer = Timer.periodic(duration, (timer) {
setState(() {
xPosition--;
});
});
}
void onEnd(_) {
timer.cancel();
}
会用到方法
Row(
children: [
GestureDetector(
onPanStart: moveDown,
onPanEnd: onEnd,
child: Icon(Icons.arrow_downward),
),
GestureDetector(
onPanStart: moveUp,
onPanEnd: onEnd,
child: Icon(Icons.arrow_upward),
),
],
),
Row(
children: [
GestureDetector(
onPanStart: moveRight,
onPanEnd: onEnd,
child: Icon(Icons.arrow_forward),
),
GestureDetector(
onPanStart: moveLeft,
onPanEnd: onEnd,
child: Icon(Icons.arrow_back),
),
],
),
],
),