前言

專案地址：github 開源地址，碼云開源地址
專案背景：剛剛結束的暑假小學期中，和我的兩個神仙隊友WYX,XPF（我的隊友超級棒！）共同完成的第一個安卓開發專案——俄羅斯方塊游戲，
框架和語言：kotlin+ jetpack compose (compose 是谷歌最新推出的開發框架，AndroidStudio剛出了支持compose的穩定版本)
參考專案：參考了https://github.com/leavesC/compose_tetris
在此基礎上增加了許多豐富的功能（如切換游戲難度，切換背景音樂，記錄最高分…）

俄羅斯方塊開發檔案

應用名稱：鵝螺螄方塊
應用型別：休閑游戲
小組成員：WYX、ZYW、XPF
開發時間：2021年7月26日 - 2021年8月14日

1.摘要

本組使用 Android studio 作為集成式開發環境，完全自主學習 Kotlin 編程語言和 Jetpack Compose 框架，撰寫了一個功能齊全、具有動態界面的俄羅斯方塊安卓游戲，
主要作業包括：搭建 Compose Activity 專案環境，全堆疊開發實作俄羅斯方塊的后端游戲邏輯、界面互動、前端界面設計、音效播放、影片效果等功能（詳見“設計需求”一節），
學習使用全新的 Jetpack Compose 框架是本專案最大的挑戰，Jetpack Compose 是谷歌推出的新式宣告性界面工具包 ，包括一整套全新的渲染、布局、事件、重繪機制，需要一段時間才能入門，但有效提高了本小組的開發效率，
本檔案用于描述《計算機科學與技術專業實踐與訓練》課程所撰寫程式的設計方案，檔案閱讀物件為本課程授課教師及本課堂同學，

2.開發工具選取

Jetpack Compose 是用于構建原生界面的最新的 Android 工具包，結合了反應式編程模型和 Kotlin 編程語言的簡潔性和易用性，

2.1.Compose 的自身優點

• 采用宣告式 UI 設計
• 提供豐富的 Material 組件，加速開發
• 具有直觀的 Kotlin API
• 擁有更簡單的、自定義的實時互動預覽功能

2.2.資料驅動界面

游戲的執行程式可以概括為不斷等待用戶的輸入資訊，進行狀態查詢，渲染界面的程序，而這種游戲模型的邏輯非常符合前端開發的思想：資料驅動界面，

當下的小游戲多以前端為主，客戶端開發成本較大，而使用 Compose 可以降低開發成本，Compose 實作資料驅動是依賴類似 Flutter 的 Provide 一樣的更新機制，但并沒有采用采用了傳統 UI 的多層繼承結構，而是多個 View 組合成一個 View ，更新資料只要在使用的物體上面加注解 @Model ，在更新物體的同時，會通知 UI 進行修改，

3.設計需求

3.1.功能需求

3.1.1.基本游戲功能

• 實作俄羅斯方塊的游戲的基本邏輯：控制方塊的運動和旋轉
• 實作游戲整體功能控制：開始游戲、暫停游戲、重新開始、音樂開啟關閉；

3.1.2.拓展功能

• 實作游戲高級設定：調整游戲難度，游戲界面主題切換，更改游戲背景音樂；
• 增加計分系統，在游戲界面實時顯示目前得分，統計歷史最高得分；
• 增加玩家檔案資訊，使玩家可以輸入保存自己的姓名；
• 增加游戲說明的資訊，使得玩家了解游戲規則和技巧；
• 實作關于我們頁面：展示應用版本資訊、開發團隊的留言、產品設計理念；

3.2.界面需求

3.2.1.整體界面設計

• 設計導航欄使得界面的跳轉更加簡明快捷，
• 設計垂直滾動式頁面增加單個頁面展示的空間，
• 設計白天與黑夜兩種模式的界面配色，啟動應用時會自動根據手機夜間模式切換，界面內包括太陽和月亮的影片，
• 設計多種模式的漸變色按鈕，增加按鈕的質感以提升玩家的體驗，
• 設計多種風格的字體樣式以區分不同的內容和突出重點，
• 設計多種矢量圖示，使得資訊的展現更加形象，

3.2.2.特色界面設計

• 游戲螢屏可由用戶自己調節大小，并當調節范圍超出最大和最小的界限時，設計彈窗提醒用戶，
• 游戲螢屏邊框實作色彩的漸變，增添游戲的炫酷感，
• 設計手勢控制的旋轉圓形頭像，可變帶寬和模糊度的圓環邊框，可變模糊度和曲線形狀的頂部背景圖片，
• 設計 3D 翻折影片，隱藏和展開游戲說明，使得界面更加簡潔靈動，
• 設計水墨渲染影片，通過手勢將灰度圖片點亮，增添界面的高級感，
• 設計上下兩個圖層，通過下圖層的陰影使得可360°翻轉的圖片有肉眼3D的效果
• 設計星空背景和火箭發射的影片，更形象的展示我們的理念和深層寓意，
• 設計色彩漸變的字體，是界面更加有趣美觀，
• 仿照膠片樣式，設計橫向滾動的影像卡片，展示開發者留言，
• 設計關鍵資訊可復制的文本，展示專案地址，開發者聯系方式，

4.專案檔案及其功能

4.1.游戲架構基于 MVI 設計

MVI 即 Model-View-Intent ，提倡一種單向資料流的設計思想，非常適合在 Compose 專案中實作邏輯部分，可以徹底貫徹“資料驅動 UI”的核心思想，

• View 層：基于 Compose 打造，所有 UI 元素都由代碼實作
• Model 層：ViewModel 維護 State 的變化，游戲邏輯交由 reduce 處理
• V-M 通信：通過 StateFlow 驅動 Compose 重繪，用戶事件由 Action 分發至 ViewModel

4.2.源檔案功能簡述表

如下表所示，所有源代碼部分都在 com.android_tetris 包內：

4.3 功能索引

5.遇到的困難和解決方案

5.1.零基礎學習新的語言和框架

本程式完全使用 Kotlin 語言開發，并選用 Jetpack Compose 框架作為前端框架，
我們完全自主學習了 Jetpack Compose （以下簡稱 Compose ）這個還未推出正式版的宣告式 UI 框架，由于谷歌暫未推出 Compose 的正式版本，現在網上相關資料和教程都還非常稀少，API檔案還是全英文的，我們常常在意想不到的問題上被卡住還沒有什么辦法，
雖然入門程序極其艱難，但是在學習使用 Compose 的全新框架開發的程序中，我們的英語水平、資訊檢索能力、解決問題的能力，都得到了極大的鍛煉，相信這段艱苦的自主學習經歷對我們之后的編程之路一定有所幫助，

5.2.使用 Gitee 托管倉庫

由于這是一個工程量比較大的專案，我們采用 Gitee 進行版本管理，但在使用程序中，我們上傳經常遇到“檔案超過 100M ”的錯誤提示，
為解決這一問題，我們學習了 .gitignore 檔案的使用方法：在該檔案按優先級從高到低，寫明讓 Git 倉庫上傳時忽略掉的檔案目錄/后綴名， Git 就會主動忽略這些檔案，
我們可以用這一辦法處理專案編譯產生的檔案和龐大的開發環境檔案，

5.3.編輯 build.gradle 環境組態檔

開發初期，由于 Kotlin 和 Compose 還在頻繁更新 API ，版本迭代很快，因此我們遇到了很多次 build 不成功的情況，報錯位置都出現在 build.gradle 檔案，
查閱資料發現， Project 層級和 Module 層級各有相對應的兩個 build.gradle 檔案，在 Android studio 中分別顯示為 build.gradle (Project: 專案名) 和 build.gradle (Module: 專案名.app) ，
在 build.gradle (Project: 專案名) 中， buildscript { } 代碼塊是該專案的 gradle 配置，只存放用到的代碼托管庫和專案構建級別的依賴：

buildscript {
    ext {
        compose_version = '1.0.0-beta08'
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:7.1.0-alpha02'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.10"
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
        // （此處的注釋提示：不要把應用程式的依賴庫在此參考）
    }
}

在 build.gradle (Module: 專案名.app) 中， build.gradle 主要用于配置模塊級別的配置資訊和依賴：

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

android {
    compileSdk 30
    buildToolsVersion "30.0.3"
    defaultConfig {
        applicationId "com.android_tetris"
        minSdk 21
        targetSdk 30
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }
    
    // 輸出 APK 用到的應用簽名資訊
    signingConfigs {
        releaseConfig {
            storeFile file("..\\key.jks")
            storePassword "123456"
            keyAlias "key0"
            keyPassword "123456"
            v1SigningEnabled true
            v2SigningEnabled true
        }
    }

    buildTypes {
        debug {
            signingConfig signingConfigs.releaseConfig
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
        release {
            signingConfig signingConfigs.releaseConfig
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
        useIR = true
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
        kotlinCompilerVersion '1.5.10'
    }
}

dependencies {
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.3.0'
    ...
}

5.4.用 Kotlin 撰寫游戲邏輯實作 Model 層次

為遵守 MVI 設計邏輯，對于游戲界面，所有會由游戲內行為發出再導致前端顯示重繪的變化，都集中存放在 TetrisState.kt 檔案中，界面的所有變化都依賴后端 State 的變化而重繪，
俄羅斯方塊共有 7 種形狀，每種形狀有隨著旋轉還會有幾種不同形態，本專案在 MockData.kt 檔案中選用 44 的二維 IntArray 陣列儲存方塊形狀，在 TetrisState.kt 中選用 1024 的二維 IntArray 陣串列示存放方塊的螢屏，
以下是 TetrisState.kt 檔案中一部分重要函式和類的代碼：

// class Tetris：對于單個俄羅斯方塊的 State 狀態類
data class Tetris constructor(
    val shapes: List<List<Location>>, // 此方塊所有可能的旋轉結果
    val type: Int,                 // 用于標記當前處于哪種旋轉狀態
    val offset: Location,          // 方塊相對螢屏左上角的偏移量
) { ... }

// class TetrisState：游戲的 State 狀態類
data class TetrisState(
    val brickArray: Array<IntArray>,    //  螢屏坐標系
    val tetris: Tetris,                 //  下落的方塊
    val gameStatus: GameStatus = GameStatus.Welcome, //  游戲狀態
    val soundEnable: Boolean = true,    //  是否開啟音效
    val nextTetris: Tetris = Tetris(),  //  下一個方塊
    var currentScore: Int = infoStorage.currentScore //  當前分數
) { ... }

// class Action：接受用戶 View 層次傳入信號的 Action 類
sealed class Action {            
    object Welcome : Action()
    object Start : Action()
    object Pause : Action()
    object Reset : Action()
    object Sound : Action()
    object Settings : Action()
    object Background : Action()
    object Resume : Action()
    data class Transformation(val transformationType: TransformationType) : Action()
}

// fun combinedPlayListener() 函式：Action 行為的監聽器，監聽器接收到信號后，分別再發送給 private fun TetrisState.onStart() 等 TetrisState 的私有函式，進行處理
fun combinedPlayListener(        
    onStart: () -> Unit = {},
    onPause: () -> Unit = {},
    onReset: () -> Unit = {},
    onSound: () -> Unit = {},
    onSettings: () -> Unit = {},
    onTransformation: (TransformationType) -> Unit = {}
) = PlayListener(
    onStart = onStart,
    onPause = onPause,
    onReset = onReset,
    onSound = onSound,
    onSettings = onSettings,
    onTransformation = onTransformation
)

5.5.View 層和 Model 層的互動機制
以下是 TetrisViewModel 類宣告部分代碼 ：

class TetrisViewModel : ViewModel() {
    //功能：接收 Action 信號，由用戶的動作改變 ViewModel
	fun dispatch(action: Action) {...}  
    //功能：改變下落速度
    fun changeDownSpeed(newSpeed :Long){...}  
    //功能：初始進入軟體時的歡迎效果
    private fun onWelcome() {...}
    //功能：開始游戲
    private fun onStartGame(){...}
    //功能：暫停游戲
    private fun onPauseGame(){...}
    //功能：結束游戲
    private fun onGameOver(){...}
    //功能：開始清空界面
    private fun startClearScreenJob(invokeOnCompletion: () -> Unit){...}
    //功能：取消清空界面
    private fun cancelClearScreenJob(){...}
    //功能：方塊下降
    private fun startDownJob() {...}
    //功能：暫停方塊下降
    private fun cancelDownJob() {...}
    //功能：將當前界面狀態傳遞給用戶
    private fun dispatchState(tetrisState: TetrisState) {..}
    //功能：游戲背景音樂播放
    private fun playSound(action: Action) {...}
    //功能：播放不同型別的背景音樂
    private fun playSound(soundType: SoundType){...}
}

5.6.基于 Compose 實作 View 層次

由于檔案篇幅有限，詳細的媒體內容展示可參考源代碼、 PPT、和應用展示視頻，

俄羅斯方塊游戲螢屏

主要用到了 Compose 的自定義影像核心可組合項 Canvas ，預覽效果如下圖：

主要邏輯功能包括：繪制游戲螢屏背景、繪制以難度指定速度不斷下落的方塊、為方塊提供按鍵移動功能、判斷是否進行消行、如果方塊超出當前螢屏則結束游戲，
代碼如下：

// 源檔案：TetrisScreen.kt 
package com.android_tetris.ui
import...
@Composable
fun TetrisScreen(tetrisState: TetrisState) {...  
    Canvas(modifier=Modifier.(...)){...
        kotlin.run { //繪制方塊矩陣
            screenMatrix.forEachIndexed { y, ints ->
                ints.forEachIndexed { x, isFill ->
                    translate(...) {drawBrick(...)}
                }
            }
        } 
        kotlin.run { ...drawPath(...)}//繪制下落方塊        
        kotlin.run { drawRightPanel(...)}//繪制右側得分欄   
		kotlin.run { drawHint(...)} //繪制提示文字
    }
}
//繪制單個方塊
fun DrawScope.drawBrick(brickSize: Float,//每一個方塊的size
                        color: Color,//磚塊顏色
                        background: Color //背景顏色
) {...
    translate(...) {drawRect(...)}//繪制外部矩形邊框
   	translate(...) {drawRect(...)}//繪制內部矩形邊框
}
private fun DrawScope.drawRightPanel(...) {...}//繪制右側得分欄
private fun DrawScope.drawHint(...) {...}//繪制提示文字

俄羅斯方塊游戲按鈕布局

預覽效果如下圖：

ConstraintLayout 是一種根據可組合項的相對位置關系顯示的布局型別，代碼如下：

//TetrisButton.kt
fun TetrisButton(
    playListener: PlayListener = combinedPlayListener()
) {
	Column(...){
		Row(...){
			ControlButton(...){ playListener.onStart()}//開始游戲
			ControlButton(...){ playListener.onPause()}//暫停游戲
			ControlButton(...){ playListener.onReset()}//重新開始
			ControlButton(...){ playListener.onSound()}//音樂開關
		}
		ConstraintLayout(...){
			PlayButton(...){playListener.onTransformation(Rotate)}//旋轉方塊
			PlayButton(...){playListener.onTransformation(Fall)}//方塊加速下落
			PlayButton(...){ playListener.onTransformation(Left)}//方塊左移
			PlayButton(...){playListener.onTransformation(Right)}//方塊右移
			PlayButton(...){playListener.onTransformation(FastDown)}//方塊直接降落到最底部
		}	
	}
}

俄羅斯方塊游戲機背景

預覽效果如下圖：

代碼如下：
// TetrisBody.kt
package com.android_tetris.ui
fun TetrisBody(
    tetrisScreen: @Composable (() -> Unit), 
    tetrisButton: @Composable (() -> Unit),
){...
  	val size by animateDpAsState(...)//改變大小狀態
  	val color by infiniteTransition.animateColor(..,)//改變顏色狀態
	Column(...){
		TopBar(...){
			Row(...){
				Icon(...); Text(...)//轉到setting界面
				Icon(...); Text(...)//轉到More界面
				Icon(...); Text(...)//增大螢屏
				Icon(...); Text(...)//減小螢屏
			}
		}
		Box(...){
			Column(...){ tetrisScreen()}//游戲螢屏區
		}
	}
	tetrisButton()//游戲按鈕區
}

最終主界面的整體組合效果：

游戲設定頁面

預覽效果如下圖：

代碼如下：

//TetrisSettingScreen.kt
fun SettingsScreen(){
	Box(modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())//垂直滾動
	){
		Box(...){
			Box{
				Column(...){
					Box(...){
						 LoginPageTopBlurImage(...)//頂部模糊背景
						 LoginPageTopRotaAndScaleImage(...)//頂部旋轉頭像
					}
					Column(...){
						Row{
							Text(...)//game setting 圖示
							if(...){... PlanetMoon()}//黑夜模式展示月亮影片
							else AnimateSun(Modifier.size(50.dp))//白天模式展示太陽
						}
						ConstraintLayout(...){...
							Row(...){...//難度選擇
								Column(...){
									 RadioSelectionButton(label = "Easy",...)//簡單
									 RadioSelectionButton(label = "Normal",...)//普通
									 RadioSelectionButton(label = "Hard",...)//困難
								}
							}
							Row(...){...//主題選擇
								Column(...){
									RectangularButton(...)
									{viewModel.Theme = ComposeTetrisTheme.Theme.Light} //白天模式
									RectangularButton(...)
									{viewModel.Theme = ComposeTetrisTheme.Theme.Dark} //黑夜模式
								}
							}
							Row(...){...//音樂切換
								 RectangularButton(...){when(infoStorage.bgm){...}}
							}							
						}
						Text( text = "Player Profile",...)//個人主頁標題
						ConstraintLayout(...){
							Row(...){...//用戶名
								TextField(...)
							}
							Row(...){...//最高分
								Text(text = "$highest",...)                          
							}
							Row(...){...//幫助檔案
								DropDownAnimate(...){Text(...)}
							}
						}
					}
				}
			}
		}
	}
}

關于我們頁面
預覽效果如圖所示：

代碼如下：

//AboutUsScreen.kt
package com.android_tetris
...
fun AboutUsScreen(){
	    Box(modifier = Modifier.verticalScroll(rememberScrollState())//垂直滾動界面
        .background(color = Color.Black)
    ){
    	Column(...){
    		 topBarView_More()  //頂部導航欄
    		 Text( buildAnnotatedString {...})//彩虹式標題
    		 BlinkTag {...}//提示文字，點擊圖片
    		 Row(...){InkColorCanvas()} // 水墨渲染圖片
    		 Row(...){Parallax()}//3D安卓小人，展示開發資訊
    		 Row(...){
    		 	Text(text = "Our Faith",...)//標題
    		 	Spacer(...)//間距
    		 	Image(...)//月亮圖片
    		 }
    		 Row(...){...
    		 	BoxWithConstraints(...){
    		 		Rocket(...)//發射影片
    		 		LaunchButton(...)//發射按鈕
    		 	}
    		 }
    		 Text(text = "Message Board",...)//標題
    		 Image(...)//膠片上邊框
    		 Box( modifier = Modifier.horizontalScroll(rememberScrollState())...   		 		
    		 ){//橫向滾動
    		 	Row{
    		 		Box(...){ ImageCard(...)}...//留言卡片一
    		 		Box(...){ ImageCard(...)}...//留言卡片二
    		 		Box(...){ ImageCard(...)}...//留言卡片三
    		 	} 		 	
    		 }
    		 Text(text = "Contact us",...)//標題
    		 Text(...)//提示資訊
    		 Box( modifier = Modifier.horizontalScroll(rememberScrollState())...   		 		
    		 ){//橫向滾動
    		 	Row{
    		 		Box(...){Card(...){...}}//專案地址資訊
    		 		Box(...){Card(...){...}}//開發者郵箱
    		 		Box(...){Card(...){...}}//開發者碼云賬戶
    		 	} 		 	
    		 }
    	}
    }
}

5.7.實作界面切換和導航功能

最開始，我們想借助 Jetpack Navigation 框架的介面實作界面跳轉，但進行了很多天的嘗試也未能成功，
隨著我們更加深入理解 Compose 的特性，我們認識到 Compose 作為“宣告式界面”本身就能夠自動更新其中的資料，因此，可以定義一個頂級宣告變數，使該變數指代當前應該顯示的螢屏，從而采用選擇性顯示或隱藏某界面的方式，間接實作界面切換功能，

// MainActivity.kt 中選擇性顯示界面的代碼
ComposeTetrisTheme(viewModel.Theme) {
    when (infoStorage.currentScreen) {
        0 -> {
            TetrisGameScreen()
        }
        1 -> {
            SettingsScreen()
        }
        2 -> {
            AboutUsScreen()
        }
    }
}

//Topbar.kt
package com.android_tetris.ui.theme

//設定界面導航欄
@Composable
fun topBarView_Set(){...}

//關于我們界面導航欄
@Preview
@Composable
fun topBarView_More(){...}

5.8.設定顯示界面主題

定義主題顏色：分白天和黑夜兩個主題，對游戲界面背景顏色、設定界面背景顏色、字體和按鈕等顏色進行設定，根據用戶所選擇的主題，確定顏色組合，賦值給 MaterialTheme 的 colors 成員，

// 黑色主題
private val DarkColorPalette = darkColors( ... )
// 白天主題
private val LightColorPalette = lightColors( ... )

構建 ComposeTetrisTheme 物件，用列舉類存放白天黑夜兩個主題供用戶選擇，

object ComposeTetrisTheme {
    enum class Theme {
        Light, Dark
    }
}

撰寫主題設定函式：定義 fun ComposeTetrisTheme () 函式，該函式第一個引數接收一個主題物件引數，用于引數判斷當前的主題型別；第二個引數接收一個 content 引數確定主題函式作用范圍，將變數 colors 傳給 MaterialTheme，

fun ComposeTetrisTheme(
    theme: ComposeTetrisTheme.Theme = ComposeTetrisTheme.Theme.Light,
    content: @Composable () -> Unit
) {
    val colors = if (theme == ComposeTetrisTheme.Theme.Dark)
        DarkColorPalette
    else
        LightColorPalette

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

設定按鈕事件實作主題切換：繪制兩個按鈕分別代表白天模式和黑夜模式，效果是點擊按鈕 day mode，將 viewModel.Theme 置為 Light，點擊按鈕 Night mode，將 viewModel.Theme 置為 Dark，主題 Theme 的控制變數放在 ThemeViewModel 類中， ThemeViewModel 繼承自 ViewModel ， ViewModel 旨在以生命周期意識的方式，存盤和管理用戶界面相關的資料，目的是存放應用程式頁面所需的資料，這樣頁面只需要處理用戶互動，以及負責展示資料的作業，
ThemeViewModel 只包含一個成員 var Theme ，用 by mutableStateOf(ComposeTetrisTheme.Theme.Light) 初始化，其中 mutableStateOf 函式的作用是顯式標明這個 Theme 是有狀態的，如果 Theme 的狀態發生了改變，所有參考這個狀態的控制元件都需要重新繪制，

var viewModel : ThemeViewModel = viewModel()
    Column(modifier = Modifier.fillMaxWidth()) {
        RectangularButton(
            label = "Daytime mode"，
        ) {
            viewModel.Theme = ComposeTetrisTheme.Theme.Light
        }

        RectangularButton(
            label = "Night mode",
        ) {
            viewModel.Theme = ComposeTetrisTheme.Theme.Dark
        }
    }

class ThemeViewModel : ViewModel() {
    // 選擇夜間模式還是普通配色
    var Theme by mutableStateOf(ComposeTetrisTheme.Theme.Light)
}

5.9.影片設計

Jetpack Compose 為各種影片效果提供實驗性 API，可能會在之后的版本中逐步完善：

// Animation.kt
package com.android_tetris.ui.theme

// 繪制動態月亮
@Composable
fun PlanetMoon() {...}// 插入月亮圖片
@Composable
private fun buildEarthFloatAnimation(): State<Float>{...}//實作月亮垂直方向浮動效果
@Composable
private fun buildEarthRotationAnimation(): State<Float> {...}//實作月亮沿著豎直軸旋轉效果

// 水墨渲染影片
@Composable
fun InkColorCanvas() {...}

// 旋轉太陽的影片
@Composable
fun AnimateSun(modifier: Modifier = Modifier){...}
@Composable
fun Sun(modifier: Modifier = Modifier) {...}

// 3D頁面下翻影片
@Composable
fun DropDownAnimate(
    text: String,
    modifier: Modifier = Modifier,
    initiallyOpened: Boolean = false,
    content: @Composable () -> Unit
) {...}

//3D 安卓小人影片
fun Parallax() {...}
fun getRotationAngles(
    start: Pair<Float, Float>,
    end: Pair<Float, Float>,
    size: Size
): Pair<Float, Float> {...}
fun getDistances(p1: Pair<Float, Float>, p2: Pair<Float, Float>): Pair<Float, Float> {...}
fun getTranslation(angle: Float, maxDistance: Float): Float {...}

// 火箭發射影片
@Composable
fun Rocket(
    isRocketEnabled: Boolean,
    maxWidth: Dp,
    maxHeight: Dp
) {...}
//火箭發射按鈕
@ExperimentalAnimationApi
@Composable
fun LaunchButton( 
    animationState: Boolean,
    onToggleAnimationState: () -> Unit,
){...}

//ImageCard
@Composable
fun ImageCard(
    painter: Painter,
    contentDescription: String,
    title: String,
    modifier:Modifier=Modifier
){...}

// Login.kt
package com.android_tetris.ui.theme
import...

//登陸背景模糊頭縮放部圖片
@Composable
fun LoginPageTopBlurImage(
    animatedBitmap: Animatable<Float, AnimationVector1D>,
    animatedOffset: Animatable<Float, AnimationVector1D>,
    animatedScales: Animatable<Float, AnimationVector1D>
) {...}

//登陸頁面頭部旋轉縮放的圖片
@Composable
fun LoginPageTopRotaAndScaleImage(
    animatedColor: Animatable<androidx.compose.ui.graphics.Color, AnimationVector4D>,
    animatedScales: Animatable<Float, AnimationVector1D>,
    animatedOffset: Animatable<Float, AnimationVector1D>
) {...}

//圓形圖片
@Stable
class CicleImageShape(val circle: Float = 0f) : Shape {
    override fun createOutline(...): Outline {...}
}

//形狀裁剪
@Stable
class QureytoImageShapes(var hudu: Float = 100f, var controller:Float=0f) : Shape {
    override fun createOutline(...): Outline {...}
}

// 模糊效果
object BitmapBlur {
    fun doBlur(sentBitmap: Bitmap, radiu: Int = 1, canReuseInBitmap: Boolean): Bitmap {}
}

//RainbowSpark.kt
package com.android_tetris.ui.theme
import...

// 彩虹漸變字體
@ExperimentalAnimationApi
@Composable
fun MultiColorSmoothText(
    modifier: Modifier = Modifier,
    text: String,
    style: TextStyle = LocalTextStyle.current,
    rainbow: List<Color> = PastelRainbow,
    startIndex: Int = 0,
    duration: Int
) {...}

//閃爍字體
@ExperimentalAnimationApi
@Composable
fun BlinkTag(
    modifier: Modifier = Modifier,
    duration: Int = 500000,
    content: @Composable (modifier: Modifier) -> Unit
) {...}

附錄：源代碼 Git 倉庫鏈接

Gitee：https://gitee.com/yxwang2023/android_tetris
GitHub：https://github.com/zyw-stu/Andriod_Tetris