004-Kotlin界面开发快速入水之TicTacToe

程序界面和效果

快速入水

要学习一样跟程序设计有关的东西，最好的办法始终是把手打湿，整一个能够运行，可以实验的东西出来。

也只有在程序开发中，我们才能想一个魔法师而不是魔术师，我们真的能够创造一个东西。而且编译器不会因为我们很丑、我们学历不行、我们没女朋友、我们很穷而拒绝我们，只要我们严格按照手册，就真的可以梦想成真。真是幸运啊！

所以，我们先来写一个简单的程序，一个大家都完全不会感兴趣的游戏：井字棋。

这个游戏实在是无聊，我从来没有成功说服任何一个人跟我一起好好玩过……不过……无聊也是它的好处，马上就行。

构建工具链

现代化的程序设计语言通常都有完整的工具链，负责完成：

• 管理工程-文件的组织
• 编译源代码
• 运行、运行、分发程序

热门但是无法流行的伟大Rust语言，它的工具链是cargo。

不热门但是很流行的C/C++语言，它的工具链是make，现在也有cmake，或者ninja。

热门流行的Java语言，它的工具链是ant、maven和gradle。

Kotlin是基于Java的，它的工具链我们一般选择gradle。实际上gradle、maven、ant都是Java的构建工具。

用gradle构建Kotlin程序，最好玩的是，我们可以编写kotlin来完成。当然，以前还用groovy，现在大概可能或许提倡用kotlin。

构成一个gradle工程的文件有：

• settings.gradle.kts：工程的设置
• build.gradle.kts：工程的构建
• src：源代码目录
• gradle.properties：gradle的属性文件
• gradlew和gradlew.bat：gradle的wrapper的启动脚本
• gradle/wrapper目录：gradle的配置文件和wrapper
  • gradle-wrapper.jar
  • gradle-wrapper.properties

这是在IDEA中一个典型工程的结构：

这里展示了全部的文件，包括隐藏文件:

• .gradle：gradle的缓存目录
• .idea：IDEA的配置目录
• build：gradle的构建目录
• .kotlin：kotlin的配置目录
• .run：运行配置目录

有些时候，还有：

• out：编译输出目录

当然，这些都不需要自己来创建，只需要在IDEA中创建一个新的gradle工程就行了。甚至，下面大部分配置都不需要自己来创建，只需要安装一个Jetpack Compose的插件，然后新建一个Compose工程就行了。

但是，我们这里还是絮絮叨叨一下，可以大概知道这些都是什么。

Gradle Wrapper

为了让工程更加有移植性，我们一般会使用gradle wrapper，这个工具会自动下载指定版本的gradle，并且把gradle的启动脚本放在工程的根目录下。

我们可以通过gradlew或者gradlew.bat来启动gradle，这样就不需要在系统中安装gradle了。

这相关的几个文件，我们可以通过gradle wrapper命令来生成。

gradle wrapper

这个命令会生成gradlew、gradlew.bat、gradle/wrapper/gradle-wrapper.jar、gradle/wrapper/gradle-wrapper.properties这几个文件。

在最后那个文件中，通常包含有下载的地址和版本号。

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-8.7-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

我们通（bi）常（xu）更改那个distributionUrl地址，指向我们自己的镜像源，这样下载会快一些。

gradle.properties

这个文件通常用来存放一些工程的属性，比如版本号、插件版本等等。

org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
kotlin.code.style=official
kotlin.version=2.0.0
compose.version=1.6.10

第一行的org.gradle.jvmargs是gradle的启动参数，这里设置了堆内存和文件编码。

在调用gradle的时候，我们可以通过-P参数来传递这些属性，比如：

gradle build -Pkotlin.version=1.5.31

这里设定的属性，可以在build.gradle.kts文件中使用。

settings.gradle.kts

我们需要在settings.gradle.kts文件中添加一些内容，这个文件是一个Kotlin脚本，用来描述工程的设置。

pluginManagement {repositories {maven("https://maven.aliyun.com/repository/public")maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")google()gradlePluginPortal()mavenCentral()}plugins {kotlin("jvm").version(extra["kotlin.version"] as String)id("org.jetbrains.compose").version(extra["compose.version"] as String)id("org.jetbrains.kotlin.plugin.compose").version(extra["kotlin.version"] as String)}
}rootProject.name = "Demo004"

这个文件首先描述了插件的管理，然后指定了工程的名称。

当然，我们也在这里添加了一些镜像源，这样下载插件会快一些。这个技能必须要掌握……不掌握就会觉得体验极其糟糕……什么都打不开，什么都运行不了。

build.gradle.kts

我们需要在build.gradle.kts文件中添加一些内容，这个文件是一个Kotlin脚本，用来描述工程的构建过程。

import org.jetbrains.compose.desktop.application.dsl.TargetFormat
import org.jetbrains.kotlin.gradle.targets.js.npm.fromSrcPackageJsonplugins {kotlin("jvm")id("org.jetbrains.compose")id("org.jetbrains.kotlin.plugin.compose")
}group = "org.cardc.fdii"
version = "1.0.0"repositories {maven("https://maven.aliyun.com/repository/public")mavenCentral()maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")google()
}dependencies {// Note, if you develop a library, you should use compose.desktop.common.// compose.desktop.currentOs should be used in launcher-sourceSet// (in a separate module for demo project and in testMain).// With compose.desktop.common you will also lose @Preview functionalityimplementation(compose.desktop.currentOs)// Gson dependencyimplementation("com.google.code.gson:gson:2.11.0")
}compose.desktop {application {mainClass = "MainKt"nativeDistributions {targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)packageName = "Demo004"packageVersion = "1.0.0"}}
}

这里面，通常只更改了几处：

• group：工程的组织
• version：工程的版本，通常我会从1.0-SNAPSHOT改成1.0.0，前者在分发的时候会有问题
• repositories：镜像源，这里添加了一些镜像源，同样！这个技能必须要掌握！
• dependencies：依赖，这里compose.desktop.currentOs，这是Compose Desktop的依赖，如果是Compose工程，自动就有；后面的gson是一个JSON库，我们可能会用到。

src目录

这个目录是源代码目录，我们可以在这个目录下创建kotlin、java、resources等等目录，用来存放源代码和资源文件。

当然，以这个工程为例，我们只需要在src/main/kotlin目录下创建一个Main.kt文件，这个文件就是程序的入口。

import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.useResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.WindowPosition
import androidx.compose.ui.window.application
import androidx.compose.ui.window.rememberWindowState
import java.io.File@Composable
fun TicTocTile(x: Int,y: Int,ticTacToe: TicTacToe
) {Box(modifier = Modifier.size(100.dp).background(Color.LightGray),contentAlignment = Alignment.Center) {Button(modifier = Modifier.padding(5.dp).fillMaxSize(),colors = ButtonDefaults.buttonColors(backgroundColor = ticTacToe[x, y].color()),onClick = {if (ticTacToe.isGameOver()) {ticTacToe.startNewGame()return@Button}ticTacToe.nextMove(x, y)}) {Text(text = ticTacToe.textAt(x, y),fontSize = 36.sp,color = Color.Black)}}
}@Composable
@Preview
fun TicToc() {val board = remember {mutableStateMapOf<Pair<Int, Int>, Player>(Pair(0, 0) to Player.NULL,Pair(0, 1) to Player.NULL,Pair(0, 2) to Player.NULL,Pair(1, 0) to Player.NULL,Pair(1, 1) to Player.NULL,Pair(1, 2) to Player.NULL,Pair(2, 0) to Player.NULL,Pair(2, 1) to Player.NULL,Pair(2, 2) to Player.NULL)}val player = remember { mutableStateOf(Player.X) }val ticTacToe = TicTacToe(board, player)Column {for (i in 0..2) {Row {for (j in 0..2) {TicTocTile(i, j, ticTacToe)}}}Text(modifier = Modifier.padding(10.dp).align(Alignment.CenterHorizontally),text = ticTacToe.gameText(),fontSize = 30.sp,color = ticTacToe.color(),textAlign = TextAlign.Center)}}fun main() = application {useResource("config.json") {config = loadConfig(it)}Window(onCloseRequest = ::exitApplication,title = "Tic Tac Toe",state = rememberWindowState(position = WindowPosition.Aligned(Alignment.Center),size = DpSize(320.dp, 400.dp))) {Box(modifier = Modifier.background(Color.White).fillMaxSize(),contentAlignment = Alignment.Center) {TicToc()}}
}

然后是TicTacToe的实现：

enum class Player {NULL, X, O;fun nameString(): String {return when (this) {X -> "X"O -> "O"else -> ""}}}import androidx.compose.runtime.MutableState
import androidx.compose.runtime.snapshots.SnapshotStateMapdata class TicTacToe(val board: SnapshotStateMap<Pair<Int, Int>, Player>, val player: MutableState<Player>) {fun gameText(): String {val winner = winner()if (isGameOver()) {if (winner == Player.NULL) {return "Game Over Tie."}return "Player ${winner.nameString()} won!"}return "Player ${player.value.nameString()}'s turn"}fun winner(): Player {for (i in 0..2) {if (get(i, 0) != Player.NULL && get(i, 0) == get(i, 1) && get(i, 1) == get(i, 2)) {return get(i, 0)}if (get(0, i) != Player.NULL && get(0, i) == get(1, i) && get(1, i) == get(2, i)) {return get(0, i)}}if (get(0, 0) != Player.NULL && get(0, 0) == get(1, 1) && get(1, 1) == get(2, 2)) {return get(0, 0)}if (get(0, 2) != Player.NULL && get(0, 2) == get(1, 1) && get(1, 1) == get(2, 0)) {return get(0, 2)}return Player.NULL}fun nextMove(x: Int, y: Int) {if (isTaking(x, y)) returnboard.put(Pair(x, y), player.value)nextPlayer()}operator fun get(x: Int, y: Int): Player {return board[Pair(x, y)] ?: Player.NULL}fun textAt(x: Int, y: Int): String {return get(x, y).nameString()}fun startNewGame() {for (key in board.keys) {this.board.put(key, Player.NULL)}player.value = Player.X}fun isGameOver(): Boolean {return winner() != Player.NULL || isFilled()}private fun isFilled(): Boolean {board.values.find { it == Player.NULL }?.let {return false}return true}private fun isTaking(x: Int, y: Int): Boolean {return get(x, y) != Player.NULL}private fun nextPlayer() {player.value = if (player.value == Player.X) Player.O else Player.X}}

为了配合显示颜色，我们还需要一个扩展函数：

import Player.O
import Player.X
import androidx.compose.ui.graphics.Color
import com.google.gson.Gson
import java.io.File
import java.io.InputStreamdata class Config(val PlayerXColor: String="00FF00",val PlayerOColor: String="#0000FF",val GameOverColor: String="##FF0000"
)fun loadConfig(file: InputStream): Config {try {val json = file.readAllBytes().decodeToString()return Gson().fromJson(json, Config::class.java)} catch (e: Exception) {e.printStackTrace()return Config("#FF0000", "#0000FF", "#00FF00")}
}val String.colorget() = Color(removePrefix("#").toInt(16)).copy(alpha = 1f)lateinit var config: Configfun Player.color(): Color {return when (this) {X -> config.PlayerXColor.colorO -> config.PlayerOColor.colorelse -> Color.White}
}fun TicTacToe.color(): Color {if (isGameOver()) {return config.GameOverColor.color}return player.value.color()
}

这个负责从config.json文件中读取颜色配置，然后在游戏中对不同玩家显示不同颜色，并给出游戏结束时的颜色。

这个config.json文件的内容是：

{"PlayerXColor": "#00FF00","PlayerOColor": "#0000FF","GameOverColor": "#FF0000"
}

这样，我们就完成了一个简单的井字棋游戏。

运行

在windows下面，我们可以通过gradlew.bat来运行这个程序：

./gradlew.bat run

还能够通过gradle来构建这个程序：

./gradlew.bat createDistributable

这样就会在build/compose/binaries目录下生成一个可执行文件程序文件夹，里面包含了可执行文件和依赖库。

这个文件拷贝到其他地方，就可以运行了。

当然在IDEA中——默认你使用的是IDEA——你可以直接右边的Gradle工具栏中选择Tasks，然后选择application，然后选择run，就可以运行这个程序。

看看这个游戏的显示效果，其实还有点小清新的……特别是下棋的时候那个点击的爽感，还是不错的……

总结

这个程序是一个简单的井字棋游戏，我们通过Jetpack Compose来实现了界面，通过Kotlin来实现了逻辑。

至于程序的实现细节，源代码的解读，就放在下次。