微信小程序-贪吃蛇开发5 游戏界面设计,flex布局

本系列是作者自学实践过程的记录
本文是贪吃蛇游戏界面的设计
有问题欢迎讨论

一、需求分析

目标样式

这里我们可以使用上下两个view将页面分成两部分，然后在上面的view标签内嵌套三个view用于显示。虽然view是块级元素，但是我们可以通过wxss中对布局属性进行设计使其并排显示。

初始框架这里便搭载好了，接下来就是wxss的样式处理了。

二、得分界面详细设计

2.1 wxml标签类定义

大部分情况使用类选择器进行样式选择。

<!--pages/snake/snake.wxml-->
<view class="score">
  <view class="title">snake</view>
  <view class="scoredetail">
    <view class="scoredesc">得分</view>
    <view class="scorenum">得分变量，使用js</view>
  </view>
  <view class="scoredetail">
    <view class="scoredesc">历史最高分</view>
    <view class="scorenum">变量，使用js</view>
  </view>
</view>
<view class="ground">
  <view class="rows"></view>
</view>

2.2 wxss样式设计

这里我们主要涉及flex布局，即flexible box，弹性盒子布局。
其功能主要有：

• 居中显示
• 自动适应窗口，这也是弹性盒子的由来

之所以可以实现弹性盒子，是由于两根轴的存在，即水平的主轴和垂直的交叉轴。

主轴的方向可以通过flex-direction进行指定：

值	效果
row（默认）	主轴水平方向，从左向右
row-reverse	主轴水平方向，从右向左
column	主轴垂直方向，从上向下
column	主轴垂直方向，向下向上
flex还剩下其余五个属性包括：

• flex-wrap，wrap即环绕的意思，这里是处理换行的问题
• flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
• justify-content：flow是漂浮的意思，这里和另一个grid布局的flow的意思一样，都是元素的对齐方式，包括左对齐、右对齐、居中对齐、两端对齐
• align-items：元素在交叉轴上对齐方式，同flex-flow一样
• align-content：多根轴线对齐方式，在嵌套元素有三行即以上时候进行使用

根据我们的贪吃蛇游戏需求，只需要保持默认即可。

完整样式：

.score{

  display: flex;
}
.title{
  flex: 1;
  background-color: pink;
  height: 150rpx;
  /* 页边距，顺序为上下左右 */
  margin: 40rpx 20rpx 40rpx 40rpx;
  /* 文字对齐方式 */
  text-align: center;
  font-size: 65rpx;
  /* 文字垂直高度 */
  line-height: 150rpx;
  /* 圆角边框 */
  border-radius: 20rpx;
}
.scoredetail{
  flex: 1;
  background-color: #BDC3FD;
  height: 150rpx;
  margin: 40rpx 20rpx;
  text-align: center;
  border-radius: 20rpx;
}
/* 所有类为scoredetail的标签中，为最后一个标签单独设置样式，因为太靠近边界了 */
.scoredetail:last-child{
  margin-right: 40rpx;
}
.scoredesc{
  line-height: 60rpx;
}
.socrenum{
  line-height: 60rpx;
}

效果如图：

三、游戏地图详细设计

到这里，页面静态设计结束，下面开始网页动态设计的任务，在这里我们先把背景颜色和布局设计好即可。

.ground{

}
.rows{
  width: 680rpx;
  height: 800rpx;
  background-color: #ABDDFF;
  margin-left: 40rpx;
}

最终效果：