Tugas 4 - Membuat Aplikasi Dice Roller Interaktif
Membuat Aplikasi Dice Roller Interaktif
Ricardo Supriyanto 5025221218
Pada tugas kali ini, saya diberikan instruksi untuk mengikuti sebuah tutorial pembuatan aplikasi dadu (dice) dari sumber Android Codelabs. Hasil dari tutorial yang saya ikuti adalah seperti ini:
Setelah mengikuti seluruh langkah pada tutorial tersebut dan memastikan aplikasi dapat berjalan dengan baik, saya melanjutkan dengan melakukan eksplorasi mandiri serta beberapa modifikasi pada aplikasi yang telah dibuat. Berikut ini adalah beberapa modifikasi yang saya terapkan pada aplikasi dadu:
1. Menambahkan Jumlah Dadu: Dadu yang semula hanya satu buah saya ubah menjadi tiga buah, sehingga pengguna dapat melempar tiga dadu sekaligus.
2. Menambahkan Sistem Rotasi: Saya menambahkan animasi rotasi pada setiap dadu yang aktif saat tombol "Roll" ditekan untuk memberikan efek visual lebih menarik.
3. Menampilkan Jumlah Total Dadu: Setelah dadu dilempar, aplikasi akan menghitung dan menampilkan total nilai dari ketiga dadu yang muncul.
4. Menambahkan Efek Suara (Sound Effect): Efek suara ditambahkan pada saat dadu di-roll untuk meningkatkan pengalaman pengguna secara auditori.
5. Penambahan Latar Belakang (Background): Untuk memperindah tampilan, saya menambahkan gambar latar belakang pada halaman aplikasi.
Tampilan melalui emulator:
Tampilan melalui screen recording:
Demo Aplikasi:
Kode Modifikasi:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = Color(0xFFB3E5FC)
) {
DiceRollerApp()
}
}
}
}
}
@Composable
fun DiceRollerApp() {
DiceWithButtonAndImage(modifier = Modifier
.fillMaxSize()
.wrapContentSize(Alignment.Center)
)
}
@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
val context = LocalContext.current
val mediaPlayer = remember { MediaPlayer.create(context, R.raw.dice_sound) }
val scope = rememberCoroutineScope()
val rotation = remember { Animatable(0f) }
var isRolling by remember { mutableStateOf(false) }
var diceValues by remember { mutableStateOf(listOf(1, 1, 1)) }
val diceImages = listOf(
R.drawable.dice_1, R.drawable.dice_2, R.drawable.dice_3,
R.drawable.dice_4, R.drawable.dice_5, R.drawable.dice_6
)
var totalValue by remember { mutableIntStateOf(3) }
Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
Column(
modifier = Modifier.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = painterResource(id = diceImages[diceValues[0] - 1]),
contentDescription = "Top Dice ${diceValues[0]}",
modifier = Modifier
.size(200.dp)
.graphicsLayer(rotationZ = rotation.value)
)
Spacer(modifier = Modifier.height(16.dp))
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
diceValues.drop(1).forEach { value ->
Image(
painter = painterResource(id = diceImages[value - 1]),
contentDescription = "Bottom Dice $value",
modifier = Modifier
.size(200.dp)
.graphicsLayer(rotationZ = rotation.value)
)
}
}
}
Spacer(modifier = Modifier.height(16.dp))
Text(text = "Total: $totalValue", fontSize = 24.sp)
Spacer(modifier = Modifier.height(16.dp))
Button(
onClick = {
mediaPlayer?.let {
it.seekTo(0)
it.start()
}
isRolling = true
scope.launch {
rotation.snapTo(0f)
rotation.animateTo(
targetValue = 1080f,
animationSpec = tween(durationMillis = 1000)
)
diceValues = List(3) { (1..6).random() }
totalValue = diceValues.sum()
isRolling = false
}
},
enabled = !isRolling
) {
Text(text = if (isRolling) "Randomizing..." else "Throw", fontSize = 24.sp)
}
}
}
Link GitHub:
Referensi:
Membuat aplikasi Dice Roller interaktif Codelab
Komentar
Posting Komentar