使用Flutter编写的一个2048小游戏
最近在学习flutter，随手写了一个2048的小游戏，目前只实现了基本的功能，还有一些功能没有加上去，主要是因为在调用setState()方法更新UI的时候出现了一些异常，暂时没有找到解决的方法。
下面是程序执行效果：
主要widget就是两个，一个是游戏页面，一个是游戏页面中每一个方块对应的GameBoxWidget,其中游戏页面主要负责GameBox的创建，维护和移动等操作，GameBoxWidget主要负责游戏方块自身的数字更新，颜色更新等。下面是代码：
//滑动方向，默认垂直方向
bool _moveVertical = true;
//滑动距离,配合滑动方向确定方块的移动信息
double _moveDistance = 0;
bool _needBuildNextBox = false;
//创建游戏方块对象
List<GameBoxWidget> _gameBoxList = List();
int _firstPosition;
int _secondPosition;
@override
void initState() {
super.initState();
//依次创建创建16个方块，避免重复创建对象
_initGameBox();
}
//初始化方块信息
void _initGameBox() {
_gameBoxList.clear();
for (int i = 0; i < 16; i++) {
GameBoxWidget gameBoxWidget = GameBoxWidget(
position: i,
);
_gameBoxList.add(gameBoxWidget);
}
_firstPosition = generalPoaition();
_secondPosition = generalPoaition();
}
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
color: Color.fromARGB(255, 227, 204, 169),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
//上面是显示游戏名称和得分
Expanded(
flex: 2,
child: Stack(
alignment: Alignment.centerLeft,
children: <Widget>[
Positioned(
left: 10.0,
//左边显示游戏名称
child: Text(
"2048",
style: TextStyle(
color: Color.fromARGB(200, 105, 75, 35),
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
textScaleFactor: 2.0,
),
)，
),
Expanded(
flex: 5,
child: GestureDetector(
child: Center(
child: Container(
padding: EdgeInsets.all(15.0),
constraints: BoxConstraints.tightFor(),
child: Container(
padding: EdgeInsets.only(bottom: 10.0, right: 10.0),
constraints: BoxConstraints.tightFor(),
decoration: BoxDecoration(
color: Color.fromARGB(255, 105, 75, 35),
borderRadius: BorderRadius.circular(5.0)),
child: Stack(
children: _gameBoxList.map((item) {
if (item.position == _firstPosition ||
item.position == _secondPosition) {
item.value = generatorRandom();
}
return item;
}).toList(),
),
),
),
),
onVerticalDragUpdate: (updateEvent) {
_moveVertical = true;
_moveDistance += updateEvent.delta.dy;
},
onVerticalDragEnd: (dragUpDetails) {
checkPostionMoveInfo(_moveVertical, _moveDistance);
_moveDistance = 0;
},
onHorizontalDragUpdate: (updateEvent) {
_moveVertical = false;
_moveDistance += updateEvent.delta.dx;
},
onHorizontalDragEnd: (details) {
checkPostionMoveInfo(_moveVertical, _moveDistance);
_moveDistance = 0;
},
),
),
Spacer(
flex: 1,
),
],
),
);
}
//遍历查看需要滑动的position和滑动的距离
void checkPostionMoveInfo(bool isVertical, double path) {
//如果是垂直方向滑动
if (isVertical) {
List<GameBoxWidget> column0Box = List();
List<GameBoxWidget> column1Box = List();
List<GameBoxWidget> column2Box = List();
List<GameBoxWidget> column3Box = List();
for (int i = 0; i < 16; i++) {
switch (i % 4) {
case 0:
//将第一列的数据加入到List中
column0Box.add(_gameBoxList[i]);
break;
case 1:
column1Box.add(_gameBoxList[i]);
break;
case 2:
column2Box.add(_gameBoxList[i]);
break;
case 3:
column3Box.add(_gameBoxList[i]);
break;
default:
}
}
if (path < 0) {
print("向上滑动");
//垂直方向向上移动
moveVerticalUp(column0Box, true);
moveVerticalUp(column1Box, true);
moveVerticalUp(column2Box, true);
moveVerticalUp(column3Box, true);
} else {
moveVerticalDown(column0Box, true);
moveVerticalDown(column1Box, true);
moveVerticalDown(column2Box, true);
moveVerticalDown(column3Box, true);
}
} else {
List<GameBoxWidget> row0Box = List();
List<GameBoxWidget> row1Box = List();
List<GameBoxWidget> row2Box = List();
List<GameBoxWidget> row3Box = List();
for (int i = 0; i < 16; i++) {
switch (i ~/ 4) {
case 0:
//将第一列的数据加入到List中
row0Box.add(_gameBoxList[i]);
break;
case 1:
row1Box.add(_gameBoxList[i]);
break;
case 2:
row2Box.add(_gameBoxList[i]);
break;
case 3:
row3Box.add(_gameBoxList[i]);
break;
default:
}
}
if (path < 0) {
//水平方向向左移动
moveVerticalUp(row0Box, false);
moveVerticalUp(row1Box, false);
moveVerticalUp(row2Box, false);
moveVerticalUp(row3Box, false);
print("循环完成：是否需要生成下一个游戏方块$_needBuildNextBox");
} else {
moveVerticalDown(row0Box, false);
moveVerticalDown(row1Box, false);
moveVerticalDown(row2Box, false);
moveVerticalDown(row3Box, false);
}
}
//在此处判断是否需要生成洗一个方块
if (_needBuildNextBox) {
_generalNextRandonBox();
} else {
SnackBar(
content: Text("请向其它方向移动"),
duration: Duration(seconds: 1),
);
}
_needBuildNextBox = false;
}
/**
*具体的移动方块的代码
*/
//查看当前方块是否存在
bool checkGameBoxExit(GameBoxWidget widget) {
if (widget.value != null && widget.value > 0) {
return true;
}
return false;
}
//查看两个方块是否可以合并
bool checkGameBoxMerge(GameBoxWidget widget1, GameBoxWidget widget2) {
if (widget1.value == widget2.value) {
return true;
}
return false;
}
//在0~15之间生成一个随机数
int generalPoaition() {
//首先循环遍历查看是否所有的方块都被填充
bool allIn = true;
for (var i = 0; i < _gameBoxList.length; i++) {
if (_gameBoxList[i].value == null || _gameBoxList[i].value < 2) {
allIn = false;
break;
}
}
if (allIn) {
return -1;
}
int generalPosition;
do {
generalPosition = Random().nextInt(16);
} while (_gameBoxList[generalPosition].value != null &&
_gameBoxList[generalPosition].value > 0);
return generalPosition;
}
//生成一个2或者4的随机数
int generatorRandom() {
int value;
do {
value = Random().nextInt(5);
} while (value != 2 && value != 4);
return value;
}
}
下面是游戏方块GameBoxWidget的代码
class GameBoxWidget extends StatefulWidget {
//方块所在的位置
final int position;
//方块显示的数值
int value;
_GameBoxState _gameBoxState;
GameBoxWidget({Key key, this.position = 0}) : super(key: key);
//更新value值
void updateValue(int newValue){
_gameBoxState.setState((){
this.value =newValue;
});
}
//设置动画执行
void startAnimation(int movePosition, bool vertical) {
_gameBoxState.startPaddingAnimation(movePosition, vertical);
}
@override
_GameBoxState createState() {
_gameBoxState = _GameBoxState();
return _gameBoxState;
}
}
class _GameBoxState extends State<GameBoxWidget>
with SingleTickerProviderStateMixin {
//方块的宽度
double _boxWidth;
//方块初始时的颜色，根据方块中的数值来显示
Color _baseColor = Colors.orangeAccent;
int _baseColorR = 20;
int _baseColorG = 30;
int _baseColorB = 30;
//距离顶部的padding
double _topPadding = 0;
//距离左边的padding
double _leftPadding = 0;
//动画控制器
AnimationController _controller;
//距离顶部的动画
Animation<double> _topAnimation;
Tween<double> _topTween;
//距离左边的动画
Animation<double> _leftAnimation;
Tween<double> _leftTween;
@override
void initState() {
// TODO: implement initState
super.initState();
//获取颜色值
//_getBoxColor();
//设置动画控制器
_controller = new AnimationController(
duration: Duration(milliseconds: 200),
vsync: this,
);
//初始化动画参数
_topTween = Tween<double>();
_topAnimation = _topTween.animate(_controller);
_leftTween = Tween<double>();
_leftAnimation = _leftTween.animate(_controller);
}
//根据不同的数字设置不同的背景颜色
Color _getBoxColor() {
int currentValue = widget.value;
if (widget.value != null && widget.value > 0) {
do {
if (_baseColorR + 30 < 255) {
_baseColorR += 22;
} else {
_baseColorR = 70;
}
if (_baseColorG + 20 < 255) {
_baseColorG += 22;
} else {
_baseColorG = 80;
}
if (_baseColorB + 33 < 255) {
_baseColorB += 22;
} else {
_baseColorB = 90;
}
currentValue = (currentValue ~/ 2).toInt();
} while (currentValue / 2 != 1);
}
print("获取到的颜色值：$_baseColorR,$_baseColorG,$_baseColorB");
_baseColor = Color.fromARGB(255, _baseColorR, _baseColorG, _baseColorB);
return _baseColor;
}
//根据不同的value值设置不同的背景颜色
Color _getBackColor() {
switch (widget.value ?? 0) {
case 0:
return Colors.orangeAccent;
case 2:
return Colors.pinkAccent;
case 4:
return Colors.purpleAccent;
case 8:
return Colors.redAccent;
case 16:
return Colors.tealAccent;
case 32:
return Colors.deepOrange;
case 64:
return Colors.amberAccent;
case 128:
return Colors.blueAccent;
case 256:
return Colors.brown;
case 512:
return Colors.cyanAccent;
case 1024:
return Colors.deepOrangeAccent;
case 2048:
return Colors.deepPurpleAccent;
case 4096:
return Colors.indigoAccent;
case 8192:
return Colors.limeAccent;
case 16384:
return Colors.orangeAccent;
default:
}
}
//启动动画
/**
* value: 移动距离
* vertical:方向信息
*/
void startPaddingAnimation(int movePosition, bool isVertical) async{
print("开始执行动画：$isVertical");
if (widget.position < 16) {
if (isVertical) {
_topTween.begin = 10.0 +
(widget.position ~/ 4) * _boxWidth +
(widget.position ~/ 4) * 10;
_topTween.end =
10.0 + (movePosition ~/ 4) * _boxWidth + (movePosition ~/ 4) * 10;
} else {
_leftTween.begin = 10.0 +
(widget.position % 4) * _boxWidth +
(widget.position % 4) * 10;
_leftTween.end =
10.0 + (movePosition % 4) * _boxWidth + (movePosition % 4) * 10;
}
_controller.addStatusListener((listener) {
switch (listener) {
case AnimationStatus.completed:
//动画执行完成,重置topPadding和leftPadding
_topPadding = 10.0 +
(widget.position ~/ 4) * _boxWidth +
(widget.position ~/ 4) * 10;
_leftPadding = 10.0 +
(widget.position % 4) * _boxWidth +
(widget.position % 4) * 10;
//_getBoxColor();
break;
default:
}
});
_controller.addListener(() {
if (isVertical) {
_topPadding = _topAnimation.value;
} else {
_leftPadding = _leftAnimation.value;
}
});
await _controller.forward().orCancel;
}
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Positioned(
left: _leftPadding,
top: _topPadding,
child: Container(
width: _boxWidth,
height: _boxWidth,
alignment: Alignment.center,
decoration: BoxDecoration(
color: _getBackColor(),
borderRadius: BorderRadius.circular(4.0),
),
child: Text(
widget.value == null ? "" : widget.value.toString(),
style: TextStyle(
color: Colors.white,
fontSize: 14.0,
),
textScaleFactor: 1.3,
),
),
);
});
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
_boxWidth = (MediaQuery.of(context).size.width - 30 - 50) / 4;
//设置每一个gameBox的位置
_topPadding =
10.0 + (widget.position ~/ 4) * _boxWidth + (widget.position ~/ 4) * 10;
_leftPadding =
10.0 + (widget.position % 4) * _boxWidth + (widget.position % 4) * 10;
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
上面的代码没有写完，主要是复制粘贴太麻烦，完整的代码在github上：https://github.com/yiwenfanjuan/project2048。