百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

打造一个 Compose 版的俄罗斯方块

myzbx 2025-05-09 20:32 29 浏览

作者 | fundroid 责编 | 欧阳姝黎
本项目基于 Jetpack Compose 1.0.0-beta04 实现
Jetpack Compose 为 Android 提供了新的声明式UI开发方式，本文介绍如何基于 Compose 打造一个经典的俄罗斯方块游戏。


Part1 MVI 架构


游戏程序的执行流程就是一个不断等待输入、渲染界面的过程，这非常适合基于 MVI 架构进行开发。

MVI 即 Model-View-Intent ，它受前端框架的启发，提倡一种单向数据流的设计思想，可以配合 Compose 实现其逻辑部分。

本项目的 MVI 的结构如下：

  • View层：基于 Compose 打造，所有 UI 由代码实现

  • Model层：ViewModel 维护 State 的变化，游戏逻辑交由 reduce 处

  • V-M通信：通过 StateFlow 驱动Compose刷新，事件由 Action 分发至 ViewModel

首先看一下View层的组成，游戏界面由以下几部分构成：

  • GameBody：绘制按键、处理用户输入

  • BrickMatrix：绘制方块矩阵背景、下落中的方块

  • Scoreboard：显示游戏得分、时钟等信息


Part2 方块绘制（BrickMatrix）


方块区域由12 * 24 的小方块组成的矩阵构成，砖块基于 Compose 的 Canvas 绘制。

brick

drawBrick：

Canvas 需要使用 DrawScope，为了便于使用，我们定义 drawBrick 为 DrawScope的扩展函数

private fun DrawScope.drawBrick(
 brickSize: Float,//每一个方块的size
 offset: Offset,//在矩阵中的偏移位置
 color: Color//砖块颜色
) {

//根据Offset计算实际位置
val actualLocation = Offset(
 offset.x * brickSize,
 offset.y * brickSize
 )

val outerSize = brickSize * 0.8f
val outerOffset = (brickSize - outerSize) / 2

//绘制外部矩形边框
 drawRect(
 color,
 topLeft = actualLocation + Offset(outerOffset, outerOffset),
 size = Size(outerSize, outerSize),
 style = Stroke(outerSize / 10)
 )

val innerSize = brickSize * 0.5f
val innerOffset = (brickSize - innerSize) / 2

//绘制内部矩形方块
 drawRect(
 color,
 actualLocation + Offset(innerOffset, innerOffset),
 size = Size(innerSize, innerSize)
 )

}

drawMatrix：

搞定砖块单元，接着绘制矩阵如下

matrix


private fun DrawScope.drawMatrix(
 brickSize: Float,
 matrix: Pair<Int, Int> //横向、纵向的数量：12 * 24
) {
 (0 until matrix.first).forEach { x ->
 (0 until matrix.second).forEach { y ->
//遍历调用drawBrick
 drawBrick(
 brickSize,
 Offset(x.toFloat(), y.toFloat()),
 BrickMatrix
 )
 }
 }
}

Part3 绘制下落的砖块

通过将砖块单元摆放在不同位置，组成不同的形状（Shape）

shape

用相对 top-left 的 Offset值代表方块的摆放位置，每种 Shape 无非就是一组 Offset 的列表。

Shape：

定义所有 Shape 如下：

val SpiritType = listOf(
 listOf(Offset(1, -1), Offset(1, 0), Offset(0, 0), Offset(0, 1)),//Z
 listOf(Offset(0, -1), Offset(0, 0), Offset(1, 0), Offset(1, 1)),//S
 listOf(Offset(0, -1), Offset(0, 0), Offset(0, 1), Offset(0, 2)),//I
 listOf(Offset(0, 1), Offset(0, 0), Offset(0, -1), Offset(1, 0)),//T
 listOf(Offset(1, 0), Offset(0, 0), Offset(1, -1), Offset(0, -1)),//O
 listOf(Offset(0, -1), Offset(1, -1), Offset(1, 0), Offset(1, 1)),//L
 listOf(Offset(1, -1), Offset(0, -1), Offset(0, 0), Offset(0, 1))//J
)

Spirit：

定义 Spirit 代表下落砖块，通过 Shape 和 Offset 决定 Spirit 在 Matrix 中的具体位置。

data class Spirit(
val shape: List<Offset> = emptyList(),
val offset: Offset = Offset(0, 0),
) {
val location: List<Offset> = shape.map { it + offset }
}

drawSpirit

最后调用 drawBrick，绘制下落砖块

fun DrawScope.drawSpirit(spirit: Spirit, brickSize: Float, matrix: Pair<Int, Int>) {
 clipRect(
0f, 0f,
 matrix.first * brickSize,
 matrix.second * brickSize
 ) {
 spirit.location.forEach {
 drawBrick(
 brickSize,
 Offset(it.x, it.y),
 BrickSpirit
 )
 }
 }
}

Part4 游戏机身（GameBody）

GameBody 的核心是按钮的绘制以及事件处理。

button 的绘制很简单, 通过 RoundedCornerShape 实现圆形、再借助 Modifier 添加阴影，增加拟物感

GameButton：

@Composable
fun GameButton(
 modifier: Modifier = Modifier,
 size: Dp,
 content: @Composable (Modifier) -> Unit
) {
val backgroundShape = RoundedCornerShape(size / 2)

 Box(
 modifier = modifier
 .shadow(5.dp, shape = backgroundShape)
 .size(size = size)
 .clip(backgroundShape)
 .background(
 brush = Brush.verticalGradient(
 colors = listOf(
 Purple200,
 Purple500
 ),
 startY = 0f,
 endY = 80f
 )
 )

 ) {
 content(Modifier.align(Alignment.Center))
 }
}

组装Button、发送Action

在 GameBody 中对 Button 进行布局、在 OnClick 中向 ViewModel 发送 Action。

四个方向键的布局如下：

Box(
 modifier = Modifier
 .fillMaxHeight()
 .weight(1f)
) {
 GameButton(
 Modifier.align(Alignment.TopCenter),
 onClick = { clickable.onMove(Direction.Up) },
 size = DirectionButtonSize
 ) {
 ButtonText(it, stringResource(id = R.string.button_up))
 }
 GameButton(
 Modifier.align(Alignment.CenterStart),
 onClick = { clickable.onMove(Direction.Left) },
 size = DirectionButtonSize
 ) {
 ButtonText(it, stringResource(id = R.string.button_left))
 }
 GameButton(
 Modifier.align(Alignment.CenterEnd),
 onClick = { clickable.onMove(Direction.Right) },
 size = DirectionButtonSize
 ) {
 ButtonText(it, stringResource(id = R.string.button_right))
 }
 GameButton(
 Modifier.align(Alignment.BottomCenter),
 onClick = { clickable.onMove(Direction.Down) },
 size = DirectionButtonSize
 ) {
 ButtonText(it, stringResource(id = R.string.button_down))
 }

}

Clicable：分发事件

clickable 负责事件分发：

data class Clickable constructor(
val onMove: (Direction) -> Unit,//移动
val onRotate: () -> Unit,//旋转
val onRestart: () -> Unit,//开始、重置游戏
val onPause: () -> Unit,//暂停、恢复游戏
val onMute: () -> Unit//打开、关闭游戏音乐
)

Part5 订阅游戏状态（ViewState）

GameScreen 订阅 viewModel 的数据实现UI的刷新。ViewState 是唯一的数据源，遵循 SSOT(Single Source Of Truth) 原则。

Compose 中使用 ViewModel 需要添加 viewmodel-compose 的支持

implementation "androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha03"`

@Composable
fun GameScreen(modifier: Modifier = Modifier) {

val viewModel = viewModel<GameViewModel>() //获取ViewModel
val viewState by viewModel.viewState.collectAsState() //订阅State

 Box() {

 Canvas(
 modifier = Modifier.fillMaxSize()
 ) {

val brickSize = min(
 size.width / viewState.matrix.first,
 size.height / viewState.matrix.second
 )

//仅负责绘制UI，没有任何逻辑处理
 drawMatrix(brickSize, viewState.matrix)
 drawBricks(viewState.bricks, brickSize, viewState.matrix)
 drawSpirit(viewState.spirit, brickSize, viewState.matrix)

 }

//略...

 }

}

借助 MVI 的加持，Compose 无需染指任何逻辑，逻辑全部交由 ViewModel处理。

接下来，看一下ViewModel的核心实现，ViewState & Action


Part6 ViewState


遵循 SSOT 原则，所有影响 UI 刷新的数据都应该定义在 ViewState 中

data class ViewState(
val bricks: List<Brick> = emptyList(), //底部落地成盒的砖块
val spirit: Spirit = Empty, // 下落中的砖块
val spiritReserve: List<Spirit> = emptyList(), //后补t砖块（Next）
val matrix: Pair<Int, Int> = MatrixWidth to MatrixHeight,//矩阵尺寸
val gameStatus: GameStatus = GameStatus.Onboard,//游戏状态
val score: Int = 0, //得分
val line: Int = 0, //下了多少行
val level: Int = 0,//当前级别（难度）
val isMute: Boolean = false,//是否静音
 )
enum class GameStatus {
 Onboard, //游戏欢迎页
 Running, //游戏进行中
 LineClearing,// 消行动画中
 Paused,//游戏暂停
 ScreenClearing, //清屏动画中
 GameOver//游戏结束
}

如上，甚至连消行、清屏这类逻辑也统一由 ViewModel 负责


Part7 Action


用户的输入通过 Action 通知到 ViewModel ，目前支持以下几种 Action：

sealed class Action {
data class Move(val direction: Direction) : Action() //点击方向键
object Reset : Action() //点击start
object Pause : Action() //点击pause
object Resume : Action() //点击resume
object Rotate : Action() //点击rotate
object Drop : Action() //点击↑，直接掉落
object GameTick : Action() //砖块下落通知
object Mute : Action()//点击mute
}

Part8 reduce


ViewModel 接收到 Action 后，分发到 reduce、更新 ViewState。

GameTicker：砖块下落Action

以最核心的 GameTicker 为例，它保证了砖块按一定速度下降。其他所有 Action 都是用户触发的，唯有 GameTicker 是自动触发，

GameTicker逻辑

基本流程如上图，根据 Spirit 在当前 Matrix 中的状态更新 ViewStae:

fun reduce(state: ViewState, action: Action) {
when(action) {

 Action.GameTick -> run {

// 没有触达底部，y轴偏移+1
val spirit = state.spirit.moveBy(Direction.Down.toOffset())
if (spirit.isValidInMatrix(state.bricks, state.matrix)) {
 emit(state.copy(spirit = spirit))
 }

// GameOver
if (!state.spirit.isValidInMatrix(state.bricks, state.matrix)) {
//砖块超出屏幕上界，游戏结束
 }

// 更新底部Bricks，
// updateBricks: 底部Bricks的状态信息
// clearedLine：消行信息
val (updatedBricks, clearedLines) = updateBricks(
 state.bricks,
 state.spirit,
 matrix = state.matrix
 )

//updatedBricks返回的底部Bricks的信息由三个List<Brick>组成
val (noClear, clearing, cleared) = updatedBricks

if (clearedLines != 0) {
// 成功消行
// 执行消行动画，见后文
 } else {
//没有消行
 emit(newState.copy(
 bricks = noClear，
 spirit = state.spiritNext))
 }
 }//end of run
 }
}

isValidInMatrix() 判断 Spirit 相对于 Matrix 是否已经出界，出界以为游戏结束。当 Spirit 触达底部时，updatedBricks 负责更新底部 Bricks 数据，即将 Spirit 的 bricks 合并到底部 Bricks 中。

消行动画：

Brick 的定义很简单，就是在 Matrix 中的 Offset

data class Brick(val location: Offset = Offset(0, 0))

updatedBricks 返回三个List<Brick>，分别记录消行动画过程中 Bricks 的中间状态

noClear：未消行的bricksclearing：消行中的bricks，相当于Invisiablecleared：消行后的bricks，相当于Gone

基于返回的 List<Brick> ，更新 state 实现消行动画

launch {
//animate the clearing lines
 repeat(5) {
 emit(
//间隔100ms，交替显示noClear/clearing
 state.copy(
 gameStatus = GameStatus.LineClearing,
 spirit = Empty,
 bricks = if (it % 2 == 0) noClear else clearing
 )
 delay(100)
 }

//delay emit new state
 emit(
//动画结束，bricks更新到cleared
 state.copy(
 spirit = state.spiritNext,
 bricks = cleared,
 gameStatus = GameStatus.Running
 )
 )
}

Part9 最后


篇幅有限，本文只能以小见大地介绍一个基本实现过程，更多细节欢迎查阅源码了解。

https://github.com/vitaviva/compose-tetris

整个游戏，包括动画在内的所有的UI刷新全是由 State 驱动完成的，运行十分流畅，这证明 Compose 在性能上已经完全不输传统UI开发，未来随着功能上的不断完善，Compose 的时代或许真的要来了，自 Android 诞生就存在的 android.view.View 体系也将迎来它的最终谢幕。。

~game over~

相关推荐

vue3和web网页直接操作微信小程序云开发数据库

我们开发好小程序以后，有时候需要编写一个管理后台网页对数据库进行管理，之前我们只能借助云开发自带的cms网页，但是cms网页设计的比较丑，工作量和代码量也不够，所以我们今天就来带大家实现用vue3编写...

WebCurl:极致轻量的跨平台 HTTP 请求调试工具

在接口开发与测试领域，工具的轻量化、兼容性与安全性往往直接影响工作效率。WebCurl作为一款纯原生、无依赖的网页版API测试与调试工具，凭借极简架构与全场景适配能力，重新定义了接口调试工具的使...

webapi 全流程_webapi项目

C#中的WebAPIMinimalApi没有控制器，普通api有控制器，MinimalApi是直达型，精简了很多中间代码，广泛适用于微服务架构MinimalApi一切都在组控制台应用程序类【Progr...

Nodejs之MEAN栈开发(四)-- form验证及图片上传

这一节增加推荐图书的提交和删除功能，来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork：https://github.com/stoneniqiu/R...

CodeSpirit.Amis.AiForm 智能表单使用指南

概述AiForm是CodeSpirit.Amis框架的智能表单功能，专为AI驱动的长时间处理任务设计。它自动生成一个多步骤的用户界面，包含表单输入、进度监控、日志显示和结果展示等功能。功能特点...

初级、中级、高级前端工程师，对于form表单实现的区别

在React项目中使用AntDesign（Antd）的Form组件能快速构建标准化表单，特别适合中后台系统开发。以下是结合Antd的最佳实践和分层实现方案：一、基础用法：快速搭...

Bun v0.7 大版本发布，与 Vite 牵手来破局?

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。今天给大家带来...

「前端」界面可视化开发框架formio.js

简介formio是一个前端可视化开发框架，无需写css/js就可以开发一套前端界面。直接在界面内拖拽就可以完成界面的布局及开发。数据交互也是固定的，表单校验也可以配置，功能非常强大。特性使用ES6...

小伙给同事爬取数据竟获取不到，竟要使用这种请求方式才能获取?

Http请求中FormData和RequestPayload两种参数的区别?AjaxPost请求中常用的两种的形式：formdata和requestpayload一、默认的表单方式...

WinForm + Win32 API 自定义无边框窗口实战(工业软件必备)

前言随着.NET9.0AOT（Ahead-of-Time）的发布，便萌生了用代码测试AOT编译效果的想法，同时评估未来是否为NanUI开发支持AOT编译的新版本。关于NanUI项目，若大家尚未了...

DeepSeek从入门到精通(11)——网页版、APP、API使用方式比较

DeepSeek提供了三种主要的使用方法：网页版、手机APP和API调用。这三种方式各有特点，适用于不同的使用场景。下面从使用方法和主要特点两方面进行比较：一、网页版使用方法：直接通过浏览器访问De...

初略Web API Notification 桌面通知

HTML5WebNotificationsAPI通知接口用于向用户配置和显示桌面通知弹窗。例如，Email邮件通知、来电提醒、聊天信息提醒或任务提醒等。关于Web开发技术中Notificat...

什么是API网关?——驱动数字化转型的“隐形冠军”

什么是API网关API网关（APIGateway）是一个服务器，位于应用程序和后端服务之间，提供了一种集中式的方式来管理API的访问。它是系统的入口点，负责接收并处理来自客户端的请求，然后将请求路由...

.NET 7使用 Entity Framework Core 制作增删改查(CRUD) Web API 教程

在本文中，我们将使用EntityFrameworkCore(EFCore)实现一个.NET7WebAPICRUD示例。WebAPI是一个构建HTTP服务的框架，可以从浏览器、移动设备和...

C# ASP.NET Core Web Api 与 MVC 模式下 body 参数传递，post 参数方式

在ASP.NETCore中，WebAPI和MVC模式在处理HTTP请求时，特别是POST请求，使用body参数来传递数据的方式非常相似。两者都使用模型绑定来自动将请求体中的数据映射到C#对象上。下...

一周热门
最近发表
标签列表